实现菜单管理栏(HTML)
创建index01.html
创建一级列表
- 使用无序列表
- 修改一级列表样式
<style>
/* 清屏 */
*{
margin: 0;
padding: 0;
}
.first > li{
width: 190px;
/* 边框 */
border-style:solid solid none none;/*上右下左*/
border-color: gray gray;
border: 1px 1px 0 0;
list-style: none;
/* 字体 */
font-size: 13px;
font-weight: 500;
/* 左移 */
padding-left: 40px;
/* 边框大小不变 */
box-sizing: border-box;
}
/* 超链接 */
.first > li > a{
color: #666;
display: block;
line-height: 40px;
/* 去下划线 */
text-decoration: none;
}
</style>
加入图标
- 下载后解压缩,把
css
、fonts
文件复制到index01.html
目录下
- 在
index01.html
进行引用
放在head
中
<link rel="stylesheet" href="css/font-awesome.min.css">
- 添加图标
点击home
,复制i
元素
其中fa-lg
用于调整图标大小
创建二级列表
- 在一级列表下的
li
中加入ul
<ul class="second">
<li>
<a href="#">基本资料</a>
</li>
<li>
<a href="#">密码修改</a>
</li>
<li>
<a href="#">绑定手机</a>
</li>
</ul>
- 二级列表的
style
.second{
display: none;
}
.second > li{
width: 145px;
height: 37px;
list-style: none;
}
.second > li > a{
line-height: 40px;
text-decoration: none;
color: #666;
padding-left: 25px;
}
- 引入
jquery
,用于控制列表的点击
<!-- 从百度引入jquery -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
console.log("jquery");
/*
Jquery支持CSS元素选择器的写法找元素
*/
$(".first > li").click(function(){
//$(this)一级li,找second元素,toggle用来执行在交替的点击,300是执行时间。
$(this).find(".second").toggle(300);
//隐藏同级列表
$(this).siblings().find(".second").hide(300);
})
})
</script>
- 效果
美化二级列表
style
中加入
/* 竖线 */
.second:before{
content: "";
display: block;
position: absolute;
z-index: 1;
left: 45px;
top: 40px;
bottom: 0;
border: 1px dotted;
border-width: 0 0 0 1px;
}
/* 横线 */
.second > li:before{
content: "";
width: 10px;
display: block;
position: relative;
z-index: 1;
left: 8px;
top: 20px;
bottom: 0;
border: 1px dotted;
border-width:1px 0 0;
}
- 效果