jQuery鼠标滑过显示二级下拉导航菜单代码



70 279 94



特效描述:鼠标滑过显示 二级下拉导航 导航菜单,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

加群请备注:从官网了解到