京東左側懸浮導航製做

時間 2019-11-11

標籤京東左側懸浮導航製做简体版

原文原文鏈接

<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>
javascript

相關文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<