萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery實現級聯菜單效果

jQuery實現級聯菜單效果

 今天我們就帶大家體會一下級聯菜單的顯示,只是實現了簡單的效果,不過大都原理是一樣的

相信初學HTM+DIV+CSSl的同學們肯定也想做出淘寶網首頁的菜單動畫吧。今天我們就帶大家體會一下級聯菜單的顯示。小編我只是實現了簡單地效果,不過總體來說原理是一樣的哦,那麼先讓大家看看效果圖吧。    那麼要實現這個效果我們當然要使用到的是jQuery,那麼我就開始講解怎麼做的了,先上html和css的代碼   代碼如下: <!DOCTYPE html>  <html>  <head>  <title>menu.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  <meta http-equiv="description" content="this is my page">  <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <link rel="stylesheet" type="text/css" href="../css/menu.css">  <script type="text/javascript" src="../js/jquery-1.10.2.js"></script>  <script type="text/javascript" src="../js/menu.js"></script>    </head>    <body>  <ul>  <li class="menu">  <div class="title">  <span>電腦數碼類產品</span>  </div>  <ul class="content">  <li class="optn"><a href="#">筆記本</a>  <ul class="tip">  <li><a href="#">筆記本1</a></li>  <li><a href="#">筆記本1</a></li>  <li><a href="#">筆記本1</a></li>  <li><a href="#">筆記本1</a></li>  </ul>  </li>    <li class="optn"><a href="#">移動硬盤</a>  <ul class="tip">  <li><a href="#">移動硬盤1</a></li>  <li><a href="#">移動硬盤1</a></li>  <li><a href="#">移動硬盤1</a></li>  <li><a href="#">移動硬盤1</a></li>    </ul>  </li>  <li class="optn"><a href="#">電腦軟件</a>  <ul class="tip">  <li><a href="#">電腦軟件1</a></li>  <li><a href="#">電腦軟件1</a></li>  <li><a href="#">電腦軟件1</a></li>  <li><a href="#">電腦軟件1</a></li>    </ul>  </li>  <li class="optn"><a href="#">數碼產品</a>  <ul class="tip">  <li><a href="#">數碼產品1</a></li>  <li><a href="#">數碼產品1</a></li>  <li><a href="#">數碼產品1</a></li>  <li><a href="#">數碼產品1</a></li>  </ul>  </li>    </ul>  </li>    </ul>  </body>  </html>    menu.css   代碼如下: @CHARSET "UTF-8";    *{  margin: 0px;  padding: 0px;    }    ul,li{  list-style-type: none;    }    .menu{  width: 190px;  border: 1px red solid;  background-color: #fffdd2;  }    .optn{  width: 190px;  line-height: 28px;  border-top: 1px red dashed;    }      .content{  padding-top:10px;  clear: left;  }      a{  text-decoration: none;  color: #666;  padding: 10px;  }  .optnFocus{  background-color: #fff;  font-weight: bold;    }    div{  padding: 10px;  }    .tip{  width: 190px;  border: 2px red solid;  position: absolute;  background-color: #fff;  display: none;  }    .tip li{  line-height: 23px;  }    接下來就是主要的jquery代碼:menu.js   代碼如下: $(function(){    var curY;//獲取所選想的TOP  var curH;//獲取所選的Height  var curW;//獲取所選的width  var objL;//獲取當前對象    //自定義函數用於獲取當前位置  function setInitValue(obj){  curY=obj.offset().top;  curH=obj.height();  curW=obj.width();  }    //設置當前所選項的鼠標滑動事件  $(".optn").mouseover(function(){  objL=$(this);//獲取當前對象  setInitValue(objL);  var allY=curY-curH +"px";    objL.addClass("optnFocus");  //獲取氣元素下的下一個ul  $(".tip",this).show().css({"top":allY,"left":curW});;    });  $(".optn").mouseout(function(){    $(this).removeClass("optnFocus");  $(".tip",this).hide();    });    //為了防止移到子菜單時子菜單不見,我們也要為子菜單設置鼠標事件    $(".tip").mouseover(function(){    $(this).show();  objL=$(this).prev("li");  setInitValue(objL);  objL.addClass("optnFocus");  });    $(".tip").mouseout(function(){  $(this).hide();  $(this).prev("li").removeClass("optnFocus");    });  });    注意要點:    1.由於我們用的是較高版本的jquery文件庫,所以有些方法是不支持的,例如獲取下一個元素的第一個子元素next(erp),在10.1中是不支持的,所以我換了一種方法$(chiled,select),表示在select的范圍進行元素的選擇    2.整個效果的實現我們還要為子選項框綁定鼠標事件,目的就是為了不在我們移動到子選項卡中,突然消失。    要實現好看的效果就需要加一些圖片和樣式,不過原理是一樣的哦 
copyright © 萬盛學電腦網 all rights reserved