javascript仿京東導航左側分類導航下拉選單效果

首頁
web前端
js教程
javascript仿京東導航左側分類導航下拉選單效果_javascript技巧
May 16, 2016 pm 03:08 PM
本文實例為大家分享了類似京東、淘寶商城左側分類導航下拉選單，供大家參考，具體內容如下
效果圖：
實作程式碼：
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="gb2312"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;style&gt;
   *{margin:0;padding:0;}
   .ul{position:relative;width:200px;height:auto;} 
   .ul li{height:24px;line-height:24px;border-bottom:1px solid #ddd;text-align:center;font-size:12px;}
   .ul li a{display:block;background:#fff;color:#000;text-decoration:none;}
   .ul li a:hover{display:block;background:#000;color:#fff;text-decoration:none;}
   .ul li div{display:none;width:400px; height:auto;position:absolute;top:0;left:200px; background:#000; color:#fff;}
   .ul li div dl dd{float:left; width:100px;}
   .ul .liname div{display:block;}
  &lt;/style&gt;
  &lt;script&gt;
    window.onload=function(){
      var aLi=document.getElementsByTagName("li");
      for(var i=0;aLi.length&gt;i;i++){
        aLi[i].i=i;
        aLi[i].onmouseover=function(){
          this.className="liname";
 
          var h1=this.i*25;
          var h2=this.getElementsByTagName("div")[0].offsetHeight;
          if(h2&lt;h1){
            this.getElementsByTagName("div")[0].style.top=h1+'px';
          }
           
        }
        aLi[i].onmouseout=function(){
          this.className="";
        }
      }
    }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;ul class="ul"&gt;
    &lt;li&gt;
      &lt;a href=""&gt;类别1&lt;/a&gt;
      &lt;div class="div"&gt;
        &lt;dl&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
        &lt;/dl&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
    &lt;a href=""&gt;类别2&lt;/a&gt;
      &lt;div class="div"&gt;
        &lt;dl&gt;
          &lt;dd&gt;类别2&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
        &lt;/dl&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;类别3&lt;/a&gt;&lt;div class="div"&gt;
        &lt;dl&gt;
          &lt;dd&gt;类别3&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
        &lt;/dl&gt;
      &lt;/div&gt;
      &lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;类别4&lt;/a&gt;&lt;div class="div"&gt;
        &lt;dl&gt;
          &lt;dd&gt;类别4&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
        &lt;/dl&gt;
      &lt;/div&gt;
      &lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;类别5&lt;/a&gt;&lt;div class="div"&gt;
        &lt;dl&gt;
          &lt;dd&gt;类别5&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
        &lt;/dl&gt;
      &lt;/div&gt;
      &lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;类别6&lt;/a&gt;&lt;div class="div"&gt;
        &lt;dl&gt;
          &lt;dd&gt;类别6&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
        &lt;/dl&gt;
      &lt;/div&gt;
      &lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;类别7&lt;/a&gt;&lt;div class="div"&gt;
        &lt;dl&gt;
          &lt;dd&gt;类别7&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
        &lt;/dl&gt;
      &lt;/div&gt;
      &lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;类别8&lt;/a&gt;&lt;div class="div"&gt;
        &lt;dl&gt;
          &lt;dd&gt;类别8&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
          &lt;dd&gt;类别1&lt;/dd&gt;
        &lt;/dl&gt;
      &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
登入後複製
希望本文所述對大家學習javascript程式設計有所幫助。
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn