jQuery鼠標滑過顯示二級下拉導航菜單代碼



73 291 98



特效描述:鼠標滑過顯示 二級下拉導航 導航菜單,jQuery鼠標滑過導航二級菜單,下拉二級導航菜單代碼。

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/main.js"></script>

2. HTML代碼

 <!--頭部開始 -->
<div class="head ">
  <div class="cont">
    <div class="head-left"><a href="#"><img src="images/logo.png" alt="" /></a></div>
    <div class="nav"> 
      <!--導航條-->
      <ul class="nav-main">
        <li>網站首頁</li>
        <li id="li-1">關于我們<span></span></li>
        <li id="li-2">成功案例<span></span></li>
        <li id="li-3">我們服務<span></span></li>
        <li id="li-4">聯系我們<span></span></li>
      </ul>
      <!--隱藏盒子-->
      <div id="box-1" class="hidden-box hidden-loc-index">
        <ul>
          <li>公司簡介</li>
          <li>公司榮譽</li>
        </ul>
      </div>
      <div id="box-2" class="hidden-box hidden-loc-us">
        <ul>
          <li>金屬字</li>
          <li>發光字</li>
          <li>燈箱</li>
          <li>水晶</li>
          <li>LED顯示屏</li>
          <li>導視系統</li>
        </ul>
      </div>
      <div id="box-3" class="hidden-box hidden-loc-info">
        <ul>
          <li>金屬字</li>
          <li>發光字</li>
          <li>燈箱</li>
          <li>水晶</li>
          <li>LED顯示屏</li>
          <li>導視系統</li>
          <li>消費者服務</li>
        </ul>
      </div>
      <div id="box-4" class="hidden-box hidden-loc-info box04">
        <ul>
          <li>聯系我們</li>
          <li>加入我們</li>
        </ul>
      </div>
    </div>
    <script type="text/javascript" src="js/main.js"></script> 
  </div>
  <div class="yanse"></div>
</div>
<!--頭部結束 --> 
    <script type="text/javascript" src="js/main.js"></script> 



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽:
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表