利用jQuery实现黑色实用多级导航菜单



70 278 93



特效描述:利用jQuery实现 黑色实用 多级导航菜单,利用jQuery实现黑色实用多级导航菜单

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

2. HTML代码

<ul id="webmenu" class="first-menu">
  <li><a href="#" style="color:#ff0; background:none; border:none;" target="_self">51前端</a></li>
  <li><a href="#" target="_self">建立网站</a>
    <ul style="display: none;" id="subMusic" class="second-menu">
      <li><a href="#" class="arrow" target="_self">域名空间</a>
        <ul class="third-menu">
          <li><a href="http://51qianduan.com/">fatcow</a></li>
          <li><a href="http://51qianduan.com/">justhost</a></li>
          <li><a href="http://51qianduan.com/">ipower</a></li>
          <li><a href="http://51qianduan.com/">inmotion</a></li>
          <li><a href="http://51qianduan.com/">ixweb</a></li>
          <li><a href="http://51qianduan.com/">supergreen</a></li>
          <li><a href="http://51qianduan.com/">hostgator</a></li>
          <li><a href="http://51qianduan.com/">powweb</a></li>
          <li><a href="http://51qianduan.com/">startlogic</a></li>
          <li><a href="http://51qianduan.com/">greengeeks</a></li>
        </ul>
      </li>
      <li><a href="#" class="arrow" target="_self">CSS 模版</a>
        <ul class="third-menu">
          <li><a href="http://51qianduan.com/">zengerden</a></li>
          <li><a href="http://51qianduan.com/">freecsstemplates.org</a></li>
          <li><a href="http://51qianduan.com/">oswd.org</a></li>
          <li><a href="http://51qianduan.com/">opendesigns.org</a></li>
          <li><a href="http://51qianduan.com/">cssplay</a></li>
          <li><a href="http://51qianduan.com/">studiopress</a></li>
          <li><a href="http://51qianduan.com/">styleshout</a></li>
        </ul>
      </li>
      <li><a href="#" class="arrow" target="_self">CSS 学习</a>
        <ul class="third-menu">
          <li><a href="http://51qianduan.com/">ken's blog</a></li>
          <li><a href="http://51qianduan.com/">ndoherty</a></li>
          <li><a href="http://51qianduan.com/">andy's blog</a></li>
          <li><a href="http://51qianduan.com/">cssplay</a></li>
        </ul>
      </li>
      <li><a href="#" class="arrow" target="_self">博客制作</a>
        <ul class="third-menu">
        </ul>
      </li>
      <li><a href="#" class="arrow" target="_self">素材下载</a>
        <ul class="third-menu">
          <li><a href="http://51qianduan.com/">flashden.net</a></li>
          <li><a href="http://51qianduan.com/">站酷</a></li>
        </ul>
      </li>
      <li><a href="#" class="arrow" target="_self">管理维护</a>
        <ul class="third-menu">
          <li><a href="http://51qianduan.com/">51前端</a></li>
          <li><a href="http://51qianduan.com/">网页设计师联盟</a></li>
          <li><a href="http://51qianduan.com/">蓝色理想</a></li>
          <li><a href="http://51qianduan.com/">天极网页</a></li>
          <li><a href="http://51qianduan.com/">前沿教室</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#" target="_self">工作生活</a>
    <ul id="subNews" class="second-menu">
      <li><a href="#" class="arrow" target="_self">搜索</a>
        <ul class="third-menu">
          <li><a href="http://51qianduan.com/">百度</a></li>
          <li><a href="http://51qianduan.com/">Google</a></li>
          <li><a href="http://51qianduan.com/">搜狐</a></li>
        </ul>
      </li>
      <li><a href="#" class="arrow" target="_self">新闻</a>
        <ul class="third-menu">
          <li><a href="http://51qianduan.com/">新浪</a></li>
          <li><a href="http://51qianduan.com/">腾讯</a></li>
          <li><a href="http://51qianduan.com/">搜狐</a></li>
          <li><a href="http://51qianduan.com/">网易</a></li>
          <li><a href="http://51qianduan.com/">凤凰网</a></li>
        </ul>
      </li>
      <li><a href="#" class="arrow" target="_self">招聘</a>
        <ul class="third-menu">
          <li><a href="http://51qianduan.com/">中华英才网</a></li>
          <li><a href="http://51qianduan.com/">前程无忧</a></li>
          <li><a href="http://51qianduan.com/">智联招聘</a></li>
          <li><a href="http://51qianduan.com/">中国人才热线</a></li>
          <li><a href="http://51qianduan.com/">上海第一招聘</a></li>
          <li><a href="http://51qianduan.com/">528招聘网</a></li>
          <li><a href="http://51qianduan.com/">1010兼职网</a></li>
        </ul>
      </li>
      <li><a href="#" class="arrow" target="_self">网赚</a>
        <ul class="third-menu">
          <li><a href="http://51qianduan.com/">威客中国</a></li>
        </ul>
      </li>
      <li><a href="#" class="arrow" target="_self">购物</a>
        <ul class="third-menu">
          <li><a href="#" class="arrow" target="_self">网站</a>
            <ul class="fourth-menu">
              <li><a href="http://51qianduan.com/">淘宝网</a></li>
              <li><a href="http://51qianduan.com/">当当网</a></li>
              <li><a href="http://51qianduan.com/">易趣网</a></li>
              <li><a href="http://51qianduan.com/">百度有啊</a></li>
              <li><a href="http://51qianduan.com/">卓越网</a></li>
              <li><a href="http://51qianduan.com/">拍拍网</a></li>
              <li><a href="http://51qianduan.com/">阿里巴巴</a></li>
              <li><a href="http://51qianduan.com/">京东商城</a></li>
              <li><a href="http://51qianduan.com/">锦上添花女装</a></li>
            </ul>
          </li>
          <li><a href="#" class="arrow" target="_self">快递公司</a>
            <ul class="fourth-menu">
              <li><a href="http://51qianduan.com/">申通快递</a></li>
              <li><a href="http://51qianduan.com/">圆通快递</a></li>
              <li><a href="http://51qianduan.com/">EMS特快专递</a></li>
              <li><a href="http://51qianduan.com/">顺丰快递</a></li>
              <li><a href="http://51qianduan.com/">天天快递</a></li>
              <li><a href="http://51qianduan.com/">中通快递</a></li>
              <li><a href="http://51qianduan.com/">韵达快运</a></li>
            </ul>
          </li>
          <li><a href="#" class="arrow" target="_self">电子支付</a>
            <ul class="fourth-menu">
              <li><a href="http://51qianduan.com/">支付宝</a></li>
              <li><a href="http://51qianduan.com/">快钱</a></li>
              <li><a href="http://51qianduan.com/">财付通</a></li>
              <li><a href="http://51qianduan.com/">paypal</a></li>
              <li><a href="http://51qianduan.com/">百付宝</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#" class="arrow" target="_self">科技</a>
        <ul class="third-menu">
          <li><a href="http://51qianduan.com/">专利之家</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#" class="arrow" target="_self">休闲娱乐</a>
    <ul style="display: none;" id="subMgm" class="second-menu">
      <li><a href="#" class="arrow" target="_self">游戏</a>
        <ul class="third-menu">
          <li><a href="#" class="arrow" target="_self">网络游戏</a>
            <ul class="fourth-menu">
              <li><a href="http://51qianduan.com/">魔兽世界</a></li>
              <li><a href="http://51qianduan.com/">劲舞团</a></li>
              <li><a href="http://51qianduan.com/">跑跑卡丁车</a></li>
              <li><a href="http://51qianduan.com/">征途</a></li>
              <li><a href="http://51qianduan.com/">问道</a></li>
              <li><a href="http://51qianduan.com/">泡泡堂</a></li>
              <li><a href="http://51qianduan.com/">热血江湖</a></li>
              <li><a href="http://51qianduan.com/">街头篮球</a></li>
              <li><a href="http://51qianduan.com/">梦幻西游</a></li>
              <li><a href="http://51qianduan.com/">QQ飞车</a></li>
              <li><a href="http://51qianduan.com/">冒险岛</a></li>
              <li><a href="http://51qianduan.com/">水浒Q传</a></li>
              <li><a href="http://51qianduan.com/">穿越火线</a></li>
              <li><a href="http://51qianduan.com/">天龙八部</a></li>
              <li><a href="http://51qianduan.com/">诛仙</a></li>
              <li><a href="http://51qianduan.com/">武林外传</a></li>
              <li><a href="http://51qianduan.com/">完美世界</a></li>
              <li><a href="http://51qianduan.com/">特种部队</a></li>
              <li><a href="http://51qianduan.com/">热血传奇</a></li>
            </ul>
          </li>
          <li><a href="http://51qianduan.com/">17173</a></li>
        </ul>
      </li>
      <li><a href="#" class="arrow" target="_self">电影</a>
        <ul class="third-menu">
          <li><a href="http://51qianduan.com/">迅雷看看</a></li>
          <li><a href="http://51qianduan.com/">狗狗搜索</a></li>
          <li><a href="http://51qianduan.com/">电驴下载</a></li>
          <li><a href="http://51qianduan.com/">80s手机电影</a></li>
        </ul>
      </li>
      <li><a href="#" class="arrow" target="_self">视频</a>
        <ul class="third-menu">
          <li><a href="http://51qianduan.com/">优酷</a></li>
          <li><a href="http://51qianduan.com/">土豆</a></li>
          <li><a href="http://51qianduan.com/">酷6</a></li>
          <li><a href="http://51qianduan.com/">六间房</a></li>
          <li><a href="http://51qianduan.com/">56</a></li>
        </ul>
      </li>
      <li><a href="#" class="arrow" target="_self">音乐</a>
        <ul class="third-menu">
          <li><a href="http://51qianduan.com/">百度-MP3</a></li>
          <li><a href="http://51qianduan.com/">QQ163</a></li>
          <li><a href="http://51qianduan.com/">一听音乐</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="http://51qianduan.com/" class="arrow" target="_blank">我的网站</a></li>
</ul>
<br><br><br>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 收缩导航菜单 二级导航菜单 文字收缩展开 下拉导航菜单 图片收缩展开 竖直导航菜单 图标导航菜单 固定导航菜单 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 收缩收起展开 导航菜单导航条

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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