自定义完成一个滑动左菜单
2018-01-16 本文已影响73人
顽皮的雪狐七七
很久没有发文章了，因为最近学的东西比较碎，总是想发一些完整的东西。
但是后来经过反思，学习是日积月累的，尤其是最近很多基础的东西忘记的时候，可以来简书上翻一翻，多好。
所以就开始来这里就算是零碎的东西，也慢慢地写上去。
最近做了一个左边的滑动菜单。结构简单，所以就发布上来分享一下：
目录
- 成品展示
- 需求分析
- 技术采纳
- 代码实现
- html布局
- css样式
- js实现动画
成品展示
首先看看完成的截图：
展开前的:
自定义完成一个滑动左菜单
展开后的:
自定义完成一个滑动左菜单
需求分析
适用于三级目录，使用的技术是html5，css3，jquery。
一级目录默认是展开的，三角形是朝下的。
二级目录默认是折叠的，三角形是朝右的。
三级目录前面是没有三角的，点击会执行别的命令。
每一级目录都比前一级目录进行缩进一部分距离。
如果超出了就用滚动条进行滚动。
技术采纳
- 使用了rem的布局思路（这个具体以后会讲到，其实小白可以直接写成px）
- 三级目录和这样层层嵌套，我就想起了dl，dt，dd的布局模式。因为尽可能不要用div去做所有的布局，这样的话，因为dt是dd的标题，dd是内容。dd标签里面再进行ul和li的嵌套，生成三级目录不错
- 里面的图标，使用i标签和b标签比较好，因为这些在html5之后就失去了斜体和粗体的意义，基本用来使用放图标。使用背景图片，可以随意调整位置。
- 滚动条使用伪元素，这个具体哪天在别的文章中进行剖析一下。
- 滑动的动画就使用jquery的slideDown()和slideUp()方法。之所以没有用slideToggle()是因为还有箭头的改变。
实现代码
html布局
首先先把html的结构分析一下
<!--首先这个div是相对于body定位的,p_a类就是position:absolute;-->
<div class="category p_a" id="category">
<!--这个是因为滚动条，所以要指定外盒子的宽高-->
<div>
<!--一级目录的div-->
<dl>
<!--一级目录的标题-->
<dt><i></i><span>菜单一</span></dt>
<!--一级目录的内容-->
<div>
<!--二级目录的div-->
<dd>
<!--二级目录的标题-->
<div><b></b><span>二级菜单一</span></div>
<!--三级目录的div-->
<ul>
<!--三级目录-->
<li>三级菜单一</li>
<li>三级菜单二</li>
</ul>
</dd>
<dd>
<div><b></b><span>二级菜单二</span></div>
<ul>
<li>三级任务一</li>
<li>三级任务二</li>
</ul>
</dd>
</div>
</dl>
<dl>
<dt><i></i><span>菜单二</span></dt>
<div>
<dd>
<div><b></b><span>二级导航一</span></div>
<ul>
<li>三级目录一</li>
<li>三级目录二</li>
</ul>
</dd>
<dd>
<div><b></b><span>二级导航二</span></div>
<ul>
<li>三级任务一</li>
<li>三级任务二</li>
</ul>
</dd>
<dd>
<div><b></b><span>二级导航三</span></div>
<ul>
<li>三级内容一</li>
<li>三级内容二</li>
</ul>
</dd>
<dd>
<div><b></b><span>二级导航四</span></div>
<ul>
<li>三级内容一</li>
<li>三级内容二</li>
</ul>
</dd>
<dd>
<div><b></b><span>二级导航五</span></div>
<ul>
<li>三级内容一</li>
<li>三级内容二</li>
</ul>
</dd>
<dd>
<div><b></b><span>二级导航六</span></div>
<ul>
<li>三级内容一</li>
<li>三级内容二</li>
</ul>
</dd>
<dd>
<div><b></b><span>二级导航七</span></div>
<ul>
<li>三级内容一</li>
<li>三级内容二</li>
</ul>
</dd>
<dd>
<div><b></b><span>二级导航八</span></div>
<ul>
<li>三级内容一</li>
<li>三级内容二</li>
</ul>
</dd>
</div>
</dl>
</div>
</div>
css样式
其次上css的代码：
/*这个是一些基础配置*/
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{
margin: 0;
padding: 0;
font-size: 14px;
font-family: Microsoft Yahei,sans-serif;
color: #ccc;
list-style: none;
cursor: default;
}
html,body{
width: 100%;
height: 100%;
font-size: 100px!important;
}
body{
background-color: #000;
}
.p_a{
position:absolute;
}
i{
font-style: normal;
}
/*目录的样式*/
.category{
width:3.06rem;
height: 4.62rem;
border: 1px solid #064F7A;
background-color: rgba(1, 42, 81, 0.5);
top: 0.2rem;
left: 0.3rem;
padding: 0.3rem 0 0.3rem 0.1rem;
}
/*这个是用于滚动条的，要确定高度和overflow*/
.category > div{
height: 100%;
overflow: auto;
}
/*下面是一系列使用伪元素设置滚动条的参数*/
.category > div::-webkit-scrollbar{
width: 8px;
}
/* 定义滚动条轨道 透明的圆角 */
.category > div::-webkit-scrollbar-track{
border-radius: 10px;
}
/* 定义灰色的滑块 内阴影+圆角 */
.category > div::-webkit-scrollbar-thumb{
border-radius:10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
background-color:rgba(157,163,169,0.7);
}
/*记得里面因为有浮动，注意用overflow:hidden清除浮动*/
.category dt{
font-size: 0.24rem;
line-height: 0.48rem;
overflow: hidden;
position: relative;
}
/*之所以不使用height而使用line-height是因为这样如果文字过于长的时候，不会乱到排版*/
.category dd{
font-size: 0.2rem;
line-height: 0.36rem;
margin-left: 0.32rem;
overflow: hidden;
}
.category dd > div{
overflow: hidden;
}
/*使用background-size可以让背景图片自适应在框内*/
.category i{
float: left;
display: inline-block;
width:0.16rem;
height: 0.16rem;
background: url("images/arrow_down.png") no-repeat center center;
background-size: contain;
margin-right: 0.05rem;
margin-top: 0.14rem;
}
.category b{
float: left;
display: inline-block;
width: 0.16rem;
height: 0.16rem;
background: url("images/arrow_down.png") no-repeat center center;
background-size: contain;
margin-right: 0.05rem;
margin-top: 0.1rem;
}
.category dt span{
display: block;
line-height: 0.48rem;
padding-left: 0.25rem;
}
.category dd span{
display: block;
line-height: 0.36rem;
padding-left: 0.2rem;
}
/*因为一开始是隐藏的，所以display:none*/
.category ul{
display: none;
}
.category li{
font-size: 0.16rem;
padding-left: 0.32rem;
}
js实现动画
下面就是一些动画效果了，因为使用的是jquery中的简单的slideDown和slideUp的方法，所以一定要记得，引入jquery。这里引入的是最新版的jquery，因为我曾用以前的jquery，发现出现了一些bug。
这里面的dt和dd绑定的事件中，关于有么有类select是相反的思路。
为什么呢？
是因为一开始一级目录是展开的，二级目录是折叠的，而且都本身没有select类，所以是相反的。不过这些可以灵活掌握。看具体的需求。
//一级目录的点击事件
$("#category dt").click(function(){
//判断有没有select的类，如果没有就上滑
if(!$(this).is(".select")){
//给自己添加select类，然后找到里面的i图标，从朝下的变成朝右的。
$(this).addClass("select").find("i").css("background-image","url('images/arrow_right.png')");
//当前的一级标题的下一个元素上滑折叠
$(this).next().slideUp();
}else{
//如果里面有select类，说明是折叠着的
//给当前元素移除select类，找到里面的i标签，从朝右的变成朝下的。
$(this).removeClass("select").find("i").css("background-image","url('images/arrow_down.png')");
//当前的一级标题的下一个元素下滑展开
$(this).next().slideDown();
}
})
//给二级标题绑定点击事件
$("#category dd").click(function(){
//判断当前元素有没有select类，如果没有下滑展开
if(!$(this).is(".select")){
//当前标题没有select类，其中的b元素的箭头从朝右的变成朝下的
$(this).addClass("select").find("b").css("background-image","url('images/arrow_down.png')");
//当前标题的ul下滑展开
$(this).find("ul").slideDown();
}else{
//如果有select类，就上滑折叠
//给当前标题移除select类，然后其中的b元素的箭头从朝下的变成朝右的
$(this).removeClass("select").find("b").css("background-image","url('images/arrow_right.png')");
//当前标题的ul上滑折叠
$(this).find("ul").slideUp();
}
})
//子页面加载，因为我在实验的时候，发现了事件冒泡的事情
//所以要进行阻止事件冒泡的事情。
$("#category li").on("click",function(e){
e.stopPropagation();
})
ok...
左菜单的分享就到这里。
@burning_韵七七
