bootstrap侧边栏菜单颜⾊_前端组件之导航栏
最近想开始写⼀些关于⽹页会⽤到⼀些组件的⽂章。对于很多⽹站⽽⾔，导航栏是必不可少的⼀部分，它对于⽹页的作⽤，就好⽐⼀本书的⽬录。如何到达⽹页的不同部分这时候就很需要导航栏了。对于导航栏，⼀般分⽔平导航栏和垂直导航栏两种，垂直导航栏⼀般⽽⾔在电商⽹页使⽤很多，相对于垂直导航栏⽽⾔，⼤部分⽹页更青睐⽔平导航栏。所以计划了⼀下，今天先来从⽹页的“门⾯”⽔平导航栏讲起。
第⼀步：先创建放载导航栏的div盒⼦
代码清单:html代码
<div id="nav1">
<div id="nav2">
</div>
</div>
代码清单:css代码
*{
margin: 0;
padding: 0;
}
body{
background: #99ccff;
}
#nav1{
margin-top: 10px;
width: 100%;
height: 50px;
position: relative;
}
#nav2{
width: 70%;
height: 50px;
margin: auto auto;
background: #f2f2f2;
}
先清除掉浏览器默认的边距，然后给body设置背景⾊好看出效果。再对两个div设置基本的宽⾼。⽤margin控制其居中上部偏下⼀点点。
第⼆步：使⽤ul和li创建⼀级菜单
对于⼀般的导航栏⽽⾔，都是利⽤ul，li和a标签组成的。
代码清单:html代码
<body>
<div id="nav1">
<div id="nav2">
<ul>
<li><a href="#">⾸页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">图⽚</a></li>
</ul>
</div>
</div>
</body>
有了基础的结构，现在我们就来对导航栏的样式进⾏⼀点变化：
代码清单:css代码
#nav2>ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#nav2>ul>li{
float: left;
width: 120px;
}
#nav2>ul>li>a{
display: block;
text-decoration: none;
color: #262626;
text-align: center;
font-size: 16px;
line-height: 50px;
font-family：微软雅⿊, Geneva, sans-serif;
}
先把ul的默认⼩圆点清除掉，把边距清除掉。然后把li通过浮动让他横向排列。最后就是对a标签的⼀些改变啦。效果图如下
此时，导航栏就有了基本的样⼦了。那么我们开始来做⼆级的菜单。
第三步：在li下创建⼆级菜单
在a标签后⾯，对于有⼆级菜单的⼦项添加ul、li和a标签
代码清单:html代码
<body>
<div id="nav1">
<div id="nav2">
<ul>
<li><a href="#">⾸页</a></li>
<li><a href="#">新闻</a>
<ul>
<li><a href="#">国内新闻</a></li>
<li><a href="#">国外新闻</a></li>
</ul>
</li>
<li><a href="#">视频</a>
<ul>
<li><a href="#">搞笑视频</a></li>
<li><a href="#">短视频</a></li>
</ul></li>
<li><a href="#">图⽚</a></li>
</ul>
</div>
</div>
</body>
这时候，就会在对应的⼦项下⽅有了⼆级菜单，但受默认样式影响，此时我们看不吃⼆级菜单的样⼦。那么我们来对导航栏⼆级菜单进⾏⼀些样式改变吧
代码清单:css代码
#nav2>ul>li>ul{
list-style-type: none;
padding: 0;
float: none;
background: #00001a;
}
#nav2>ul>li>ul>li{
border-bottom: 1px solid #666666;
}
#nav2>ul>li>ul>li:last-child{
border-bottom:none
}
#nav2>ul>li>ul>li>a{
display: block;
line-height:40px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
font-size: 16px;
font-family：微软雅⿊, Geneva, sans-serif;
}
当我们处理完之后就会看到⼆级菜单位于⼀级菜单下⽅，且连在⼀起了！
第四步：对⼀级li进项设置，⿏标移到li时显⽰隐藏的⼆级菜单
简单来说，就是先把⼆级菜单⽤display设置成none；当⿏标移到⼀级菜单⼦项时则把默认的display：none设置为display:block即可显⽰回来
代码清单:css代码
#nav2>ul>li>ul{
display: none;
}
#nav2>ul>li:hover>ul{
display: block;
}
#nav2>ul>li>ul>li>a:hover{
color: #F2F2F2;
background: #ff8080;
}
就可以得到最简单的导航栏效果了。
上⾯就是最简单的导航栏实现⽅法了，只通过css和html实现出来。对于⽇常使⽤的导航栏，这肯定是不够的，下⾯继续深⼊导航
1.带下标的三⾓翻转实现
在很多⽹页的导航栏中,⼀些⼦项的右侧会有⼀个⼩三⾓，当⿏标移到⼦项时,⼩三⾓就会翻转180度,⼦项下⾯显⽰⼆级菜单。那么我们来看看如何实现这个。
在结构中li便签上添加⼀个类命名为has_active，对于有下标的⼦项就可实现
代码清单:html代码
<li class="has_sub"><a href="#">新闻</a><li>
我们这次⽤到了伪元素去进⾏改变实现，像这种三⾓，你可以把他看做盒⼦的两条边组成的图像再旋转得到的，那么我们先把他弄出来，定好他位置。
代码清单:css代码
.has_sub > a::after {
js导航栏下拉菜单position: absolute;
top:50%;
margin-top: -3px;
margin-left: 20px;
width: 6px;
height: 6px;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
content: "";
}
就有这样的效果啦：
这时候我们只需要旋转！在给他⿏标悬浮时的样式，就可以实现效果啦：
代码清单:css代码
.has_sub > a::after {
position: absolute;
top:50%;
margin-top: -3px;
margin-left: 20px;
width: 6px;
height: 6px;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
content: "";
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-
o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-ms-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
.has_sub:hover>a::after{
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-
ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
border-color: #FF0000;
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-ms-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
最终效果：当我们在需要⽤到这个图案的li标签加上类has_sub就可以了
2.滑块滑动效果
我们在很多⽹页的导航栏都会看到这么⼀个效果:⿏标移动，导航栏上⽅或者下⽅有个滑块，或者整⼀个背景是⼀个滑块的移动。那么该如何实现呢？
⾸先我们需要在HTML中在导航栏的ul中加⼀个id="nav"；并且在装载ul的div内加⼀个⽤来装载滑块的div并且设定id="nav_line"：
代码清单:html代码
<div id="nav2">
<ul id="nav">
</ul>
<div id="nav_line"></div>
</div>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论