纯CSS下拉导航和jquery下拉导航对比
纯css实现的下拉导航demo:http://codepen.io/tianzi77/pen/xGOyxp
不用javascript以及jquery动态效果实现导航条的下拉效果。纯css属性实现,主要应用到绝对定位中的left:auto和left:-9999px;来隐藏或者鼠标经过的时候显示下拉菜单。
htm结构:
<ul class="nav">
<li><a href="/">小哲</a></li>
<li><a href="/">小哲</a></li>
<li><a href="">小哲</a>
<ul>
<li><a href="">小哲</a></li>
<li><a href="">小哲</a></li>
<li><a href="">小哲</a></li>
</ul>
</li>
</ul>
css样式:
body {
font-family: "微软雅黑";
font-size: 1.4em;
margin-top: 4em;
}
ul.nav, ul.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
border: 1px solid #486B02;
background-color: #8BD400;
}
ul.nav li {
float: left;
width: 8em;
text-align: center;
}
ul.nav li ul {
position: absolute;
width: 8em;
left: -999em;
margin-left: -1px;
}
.nav li:hover ul {
left: auto;
}
ul.nav a {
display: block;
color: #2B3F00;
text-decoration: none;
padding: 0.3em 1em;
border-right: 1px solid #486B02;
border-left: 1px solid #E4FFD3;*/
}
ul.nav li li a {
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
border-left: 0;
border-right: 0;
text-align: center;
}
ul.nav li:last-child a {
border-right: 0;
border-bottom: 0;
}
ul a:hover,
ul a:focus {
color: #E4FFD3;
background-color: #6DA203;
}
还有一种就是利用css加jquery实现一些更炫酷的下拉菜单导航条:
demo:http://codepen.io/tianzi77/pen/Pqzywv
html结构:
<div id="header">
<ul id="navigation">
<li><a href="#">首页</a></li>
<li><a href="#">天子</a>
<ul class="subnav">
<li><a href="#">tianzi</a></li>
<li><a href="">tianzi</a></li>
<li><a href="#">tianzi</a></li>
</ul>
</li>
<li><a href="#">服务</a>
<ul class="subnav">
<li><a href="#">liuzhe</a></li>
<li><a href="#">liuzhe</a></li>
</ul>
</li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
样式:
*{
padding: 0;
margin: 0;
}
ul#navigation{
list-style-type: none;
background: orange;
height: 63px;
font-size: 24px;
width: 1000px;
border-radius: 50px;
margin: 50px auto;
}
ul#navigation li{
float: left;
width: 175px;
text-align: center;
position: relative;
height: 63px;
padding: 20px 2px 10px 5px;
}
ul#navigation li a{
color: #fff;
text-decoration: none;
display: block;
font-family: "微软雅黑";
}
ul#navigation li a.active{
color: yellow;
}
ul#navigation li ul.subnav{
background: #e7f1d2;
width: 175px;
clear: both;
display: none;
position: absolute;
top: 63px;
border-radius: 10px;
border-left: 2px solid #998;
border-right: 2px solid #998;
border-bottom: 2px solid #998;
list-style-type: none;
}
ul#navigation li ul.subnav li{
clear: both;
height: 40px;
padding: 0;
text-align: center;
margin: 0px;
}
ul#navigation li ul.subnav li a{
background: none;
font-size: 18px;
color: #333;
text-decoration: none;
padding: 10px 0;
border:none;
}
ul#navigation li ul.subnav li a:hover{
background: #dbf1ad;
font-size: 18px;
color: #333;
border-radius: 10px;
}
jquery动态效果:
$(function(){
$("#navigation li").hover(function(){
$(this).find(".subnav").slideDown("slow");
$(this).find("a").addClass("active");
},
function(){
$(this).find(".subnav").slideUp("fast");
$(this).find("a").removeClass("active");
})
})
效果图:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。