您的位置：首页 > 其它

京东左侧悬浮导航制作

2016-02-27 18:24 316 查看
<style type="txt/css">
*{
margin:0px;
padding:0px;
}
#Nav{
width:210px;
height:450px;
background:blue;
border:2px solid #CD2A2C;/*边框的颜色*/
}
#Nav .title{/*nav控制title*/
width:100%;
height:40px;
background:red;
color:#ffff;
font-size:14px;
font-family:"微软雅黑";
font-weight:bold;/*加粗*/
line-height:40px;
text-indent:10px;
}
#Nav ul{
border:1px solid blue;
}
#Nav ul li{
height:30px;
border-bottom:1px solid #fff;
list-style:none;
background:#FAFAFA;
color:#666;
font-size:14px;
line-height:30px;
text-indent:10px;/*首行缩进*/
position:relative;
}
#Nav ul li a{
color:#666;
text-decoration:none;/*去掉超链接的下划线*/
}
#Nav ul li a:hover{
color:red;
font-weight:bold;/*加粗*/
text-decoration:underline;/*鼠标放上去超链加已去掉接的下划线*/
}
#Nav ul li .menu{
width:700px;
height:440px;
border:1px solid red;
position:absolute;
left:200px;
top:0px;
z-index:33;
background:#fff;
}
#Nav ul li .bor{
background:#fff;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
#Nav ul li p.bg{
height:30px;
background:#fff;
position:absolute;
z-index:555;
}
</style>
</head>

<body>
<!--盒子模型有高度和图片-->
<div id="Nav">
<div class="title">全部分类<div>
<ul>
<li class="bor">
<p class="bg"><a hrf="#">图书</a>、<a hrf="#">映像</a>、<a hrf="#">数字</a></li></p>
<div class="menu"></div>
<li ><p class="bg"><a hrf="#">图书</a></li></p>
<div class="menu"></div>
<li><a hrf="#">图书</a></li>
<li><a hrf="#">图书</a></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-2.2.1.min.js">
alert("ssd");
</script>
<script type="text/javascript" >
${function(){
$("#Nav ul li").mouseover(function(){
var top=$(this).offset().top;//获取头部的距离
var height=$(this).find{".meun"}.height()/2;
if(top<height){
top=0;//控制menu top值
}
else{
top=-height;
}
$(this).find(".menu").css("top").show();//添加top的值并显示menu
$(this).addClass("bor");//给li添加样式
}).moseout{
$(this).find(".menu").hide();
$(this).removeClass("bor");
}
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航