html5左侧d出菜单怎样实现

html5左侧d出菜单怎样实现,第1张

这个可以通过绝对定位,配合left设置 或者translate去实现

left的方法:

比如让class为menu的元素宽为300px,高100%的,设置left为-300px;在这期间可以加一个过渡transition:left 0.3s ...;

然后让class为menu active的元素设置 left设置为0就可以了 ,在这期间可以加一个过渡transition:left 0.3s ...;

然后可以通过Jquery的toggleClass('active')来实现切换

translate

比如让class为menu的元素宽为300px,高100%的,设置left为-300px;在这期间可以加一个过渡transition:left 0.3s ...;

然后让class为menu active的元素设置 transform:translate3d(-300px,0,0) ,在这期间可以加一个过渡transition:left 0.3s ...;

然后可以通过Jquery的toggleClass('active')来实现切换

这个过程中 需要注意 body需要overflow:hidden(不然会有滚动条,可设置overflow-x即可)

left 和 translate 最好用translate ,translate3d可以开启GPU硬件加速,性能会更好,体验会更流畅

我github有类似小组件样式

github: IFmiss

希望能解决你的问题

<h1><p>折叠1</p></h1>

<h1><p>折叠2</p></h1>

<h1><p>折叠3</p></h1>

<h1><p>折叠4</p></h1>

需要js来,最好用jquery来实现

只需要给h1绑定事件,单件它的时候,设置它的p属性,display:none。

这问题好纠结,最少来个截图啊,给你写个吧,粘过去就行,不行的话留个q,继续问

<!DOCTYPE html>

<html>

 <head>

 <meta charset="utf-8" />

 <title>选项卡</title>

 <style type="text/css">

 ::-webkit-scrollbar{width:0px}

*{ margin:0 padding:0}

ul{

 list-style: none

}

.tab{ 

 width: 600px

 margin: 80px auto

}

.tab .tab_menu{

 float:left

 height: 138px

 width: 90px 

 overflow-y:scroll

}

.tab .tab_menu ul{width:60px}

.tab .tab_menu ul li{

 

 width: 60px

 text-align: center

 line-height: 30px

}

.tab .tab_menu ul li:last-child{

 border-right:none

 width:60px

}

.tab .tab_menu ul li.on{

 background: #999

}

.tab_box{float:left}

.tab .tab_box > div{

 width: 300px

 height: 138px

 border:1px solid #6cf

 display: none //将三个内容框架全隐藏,通过下面的:first-child属性只将第一个框架内容显示出来

}

.tab .tab_box > div:first-child{

 display: block

}

 </style>

 </head>

 <body>

 <!--整体构局说明,用ul完成按钮的横向布局,用div完成三个内容框架的垂直布局(类似于类表),然后将三个内容框架全隐藏,通过下面的:first-child属性只将第一个框架内容显示出来-->

 <div class="tab">

 <div class="tab_menu">

 <ul>

     <li class="on">实事</li>

     <li>政治</li>

     <li>体育</li>

     <li>实事</li>

     <li>政治</li>

     <li>体育</li>

     <li>实事</li>

     <li>政治</li>

     <li>体育</li>

     <li>实事</li>

     <li>政治</li>

     <li>体育</li>

 </ul>

 </div>

 <div class="tab_box">

     <div>实事内容</div>

     <div>政治内容</div>

     <div>体育内容</div>

     <div>实事内容</div>

     <div>政治内容</div>

     <div>体育内容</div>

     <div>实事内容</div>

     <div>政治内容</div>

     <div>体育内容</div>

     <div>实事内容</div>

     <div>政治内容</div>

     <div>体育内容</div>

 </div>

 </div>

 <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

 <script type="text/javascript">

$(function(){

 $(".tab_menu ul li").click(function(){

 $(this).addClass("on").siblings().removeClass("on") //切换选中的按钮高亮状态

 var index=$(this).index() //获取被按下按钮的索引值,需要注意index是从0开始的

 $(".tab_box > div").eq(index).show().siblings().hide() //在按钮选中时在下面显示相应的内容,同时隐藏不需要的框架内容

 })

})

 </script>

 </body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6994655.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存