基于jquery實現購酒網分類導航代碼



24 92 31



特效描述:基于jquery實現 購酒網 分類導航,基于jquery實現購酒網分類導航代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="style/base.css" />
<link rel="stylesheet" href="style/head.css" />

2. 引入JS

<script src="script/global.js" type="text/javascript"></script>
<script src="script/head.js" type="text/javascript"></script>

3. HTML代碼

<div class="headNav">
  <div class="navCon w1020">
    <div class="navCon-cate fl navCon_on">
      <div class="navCon-cate-title"> <a href="http://51qianduan.com">全部商品分類</a></div>
      <div class="cateMenu hide">
        <ul>
          <li style="border-top: none;">
            <div class="cate-tag"> <strong><a href="http://51qianduan.com">白酒</a></strong>
              <div class="listModel">
                <p> <a href="http://51qianduan.com">茅臺</a> <a href="http://51qianduan.com">洋河</a> <a href="http://51qianduan.com">郎酒</a> <a href="http://51qianduan.com">古井貢酒</a> </p>
                <p> <a href="http://51qianduan.com">習酒</a> <a href="http://51qianduan.com">珍酒</a> <a href="http://51qianduan.com">紅星</a> <a href="http://51qianduan.com">瀘州老窖</a> </p>
                <p> <a href="http://51qianduan.com">沱牌</a> <a href="http://51qianduan.com">國臺</a> <a href="http://51qianduan.com">五糧液</a> <a href="http://51qianduan.com">劍南春</a> </p>
              </div>
            </div>
            <div class="list-item hide">
              <ul class="itemleft">
                <dl>
                  <dt>品牌</dt>
                  <dd> <a href="http://51qianduan.com">茅臺</a> <a href="http://51qianduan.com">五糧液</a> <a href="http://51qianduan.com">劍南春</a> <a href="http://51qianduan.com">水井坊</a> <a href="http://51qianduan.com">汾酒</a> <a href="http://51qianduan.com">洋河</a> <a href="http://51qianduan.com">瀘州老窖</a> <a href="http://51qianduan.com">珍酒</a> <a href="http://51qianduan.com">郎酒</a> <a href="http://51qianduan.com">古井貢酒</a> <a href="http://51qianduan.com">西鳳酒</a> <a href="http://51qianduan.com">董酒</a> <a href="http://51qianduan.com">酒鬼酒</a> <a href="http://51qianduan.com">紅星</a> <a href="http://51qianduan.com">文君酒</a> <a href="http://51qianduan.com">牛欄山</a> <a href="http://51qianduan.com">四特酒</a> <a href="http://51qianduan.com">口子酒</a><a href="http://51qianduan.com">星河灣</a> <a href="http://51qianduan.com">百年傳奇</a> </dd>
                </dl>
                <div class="fn-clear"></div>
                <dl>
                  <dt>香型</dt>
                  <dd> <a href="http://51qianduan.com">醬香型</a> <a href="http://51qianduan.com">濃香型</a> <a href="http://51qianduan.com">清香型</a> <a href="http://51qianduan.com">鳳香型</a> <a href="http://51qianduan.com">馥郁香</a> <a href="http://51qianduan.com">董香型</a> <a href="http://51qianduan.com">特香型</a> <a href="http://51qianduan.com">芝麻香</a> <a href="http://51qianduan.com">兼香型</a> <a href="http://51qianduan.com">金門香型</a> <a href="http://51qianduan.com">老干白</a> <a href="http://51qianduan.com">綿柔型</a> <a href="http://51qianduan.com">柔和型</a> <a href="http://51qianduan.com">小曲型</a> <a href="http://51qianduan.com">生態竹香型</a> </dd>
                </dl>
                <div class="fn-clear"></div>
              </ul>
              <ul class="itemright">
                <dl>
                  <dt>促銷信息</dt>
                </dl>
                <div class="news-list">
                  <p> <span class="red">[杜康]</span> <a href="http://51qianduan.com">酒體窖香幽雅、陳香舒適,只需156元,值得一試的好酒</a> </p>
                  <p> <span class="red">[紅星]</span> <a href="http://51qianduan.com">經典紅星153元熱銷千瓶,敢于全網誓比價!</a> </p>
                  <p> <span class="red">[太白]</span> <a href="http://51qianduan.com">中國第一詩酒,全場滿200減50</a> </p>
                </div>
                <dl>
                  <dt>促銷活動</dt>
                </dl>
                <div class="ad-list mt10"> <a href="http://51qianduan.com"><img src='http://img0.gjw.com/famous/2013/1108/f011895a50564f6fa4a689b053e9437c.jpg' width='210' height='100' /></a> <a href="http://51qianduan.com"><img src='http://img0.gjw.com/famous/2013/1108/67e10be5b9a045d68e01b395b94f57a4.jpg' width='210' height='100' /></a> <a href="http://51qianduan.com"><img src='http://img0.gjw.com/famous/2013/1108/3dcc2411eb9847d08e7b80e82d130ebc.jpg' width='210' height='100' /></a> </div>
              </ul>
            </div>
          </li>
          <li >
            <div class="cate-tag"> <strong><a href="http://51qianduan.com">葡萄酒</a></strong>
              <div class="listModel">
                <p> <a href="http://51qianduan.com">中國</a> <a href="http://51qianduan.com">法國</a> <a href="http://51qianduan.com">智利</a> <a href="http://51qianduan.com">葡萄牙</a> </p>
                <p> <a href="http://51qianduan.com">意大利</a> <a href="http://51qianduan.com">澳大利亞</a> <a href="http://51qianduan.com">德國</a> <a href="http://51qianduan.com">南非</a> </p>
                <p> <a href="http://51qianduan.com">美國</a> <a href="http://51qianduan.com">阿根廷</a> <a href="http://51qianduan.com">西班牙</a> </p>
              </div>
            </div>
            <div class="list-item hide">
              <ul class="itemleft">
                <dl>
                  <dt>產區</dt>
                  <dd> <a href="http://51qianduan.com">澳大利亞</a> <a href="http://51qianduan.com">德國</a> <a href="http://51qianduan.com">法國</a> <a href="http://51qianduan.com">加拿大</a> <a href="http://51qianduan.com">美國</a> <a href="http://51qianduan.com">西班牙</a> <a href="http://51qianduan.com">智利</a> <a href="http://51qianduan.com">葡萄牙</a> <a href="http://51qianduan.com">俄羅斯</a> <a href="http://51qianduan.com">阿根廷</a> <a href="http://51qianduan.com">新西蘭</a> <a href="http://51qianduan.com">南非</a> <a href="http://51qianduan.com">意大利</a> <a href="http://51qianduan.com">中國</a> <a href="http://51qianduan.com">希臘</a> </dd>
                </dl>
                <div class="fn-clear"></div>
                <dl>
                  <dt>類型</dt>
                  <dd> <a href="http://51qianduan.com">紅葡萄酒</a> <a href="http://51qianduan.com">白葡萄酒</a> <a href="http://51qianduan.com">桃紅葡萄酒</a> <a href="http://51qianduan.com">起泡酒/香檳</a> <a href="http://51qianduan.com">冰酒/貴腐/甜酒</a> </dd>
                </dl>
                <div class="fn-clear"></div>
                <dl>
                  <dt>品種</dt>
                  <dd> <a href="http://51qianduan.com">芭貝拉</a> <a href="http://51qianduan.com">長相思</a> <a href="http://51qianduan.com">解百納</a> <a href="http://51qianduan.com">瑪爾維薩</a> <a href="http://51qianduan.com">綜合佳釀</a> <a href="http://51qianduan.com">美樂</a> </dd>
                </dl>
                <div class="fn-clear"></div>
              </ul>
              <ul class="itemright">
                <dl>
                  <dt>促銷信息</dt>
                </dl>
                <div class="news-list">
                  <p> <span class="red">[加州樂事]</span> <a href="http://51qianduan.com">美國爆款紅酒,超市89元,68元特價售</a> </p>
                  <p> <span class="red">[華爾茲]</span> <a href="http://51qianduan.com">德國經典款,39元繼續熱賣中</a> </p>
                  <p> <span class="red">[貴婦]</span> <a href="http://51qianduan.com">法國進口紅酒,購滿6瓶每瓶僅需38元,超值專享價</a> </p>
                </div>
                <dl>
                  <dt>促銷活動</dt>
                </dl>
                <div class="ad-list mt10"> <a href="http://51qianduan.com"><img src='http://img0.gjw.com/famous/2013/1115/c32d2be3c2f345138b717f8a13fed00e.jpg' width='210' height='100' /></a> <a href="http://51qianduan.com"><img src='http://img0.gjw.com/famous/2013/1115/294a3235681345b4a097ef769fdb9348.jpg' width='210' height='100' /></a> </div>
              </ul>
            </div>
          </li>
          <li >
            <div class="cate-tag"> <strong><a href="http://51qianduan.com">洋酒</a></strong>
              <div class="listModel">
                <p> <a href="http://51qianduan.com">格蘭威特</a> <a href="http://51qianduan.com">杰克丹尼</a> <a href="http://51qianduan.com">軒尼詩</a> </p>
                <p> <a href="http://51qianduan.com">尊尼獲加</a> <a href="http://51qianduan.com">皇家路易</a> <a href="http://51qianduan.com">百齡壇</a> </p>
              </div>
            </div>
            <div class="list-item hide">
              <ul class="itemleft">
                <dl>
                  <dt>品牌</dt>
                  <dd><a href="http://51qianduan.com">第林可</a> <a href="http://51qianduan.com">本尼維斯</a> <a href="http://51qianduan.com">奇滋</a> <a href="http://51qianduan.com">奧凱</a> <a href="http://51qianduan.com">劍威</a> <a href="http://51qianduan.com">帕夫利季斯</a> <a href="http://51qianduan.com">佩特雷城堡</a> <a href="http://51qianduan.com">斯多克</a> <a href="http://51qianduan.com">愛德華</a> <a href="http://51qianduan.com">格蘭御鹿</a> <a href="http://51qianduan.com">薩隆公爵</a> </dd>
                </dl>
                <div class="fn-clear"></div>
                <dl>
                  <dt>酒種</dt>
                  <dd> <a href="http://51qianduan.com">白蘭地</a> <a href="http://51qianduan.com">伏特加</a> <a href="http://51qianduan.com">朗姆酒</a> <a href="http://51qianduan.com">力嬌酒</a> <a href="http://51qianduan.com">墨西哥烈酒</a> <a href="http://51qianduan.com">甜酒</a> <a href="http://51qianduan.com">威士忌</a> <a href="http://51qianduan.com">金酒</a> <a href="http://51qianduan.com">利口酒</a> </dd>
                </dl>
                <div class="fn-clear"></div>
              </ul>
              <ul class="itemright">
                <dl>
                  <dt>促銷信息</dt>
                </dl>
                <div class="news-list">
                  <p> <span class="red">[威士忌]</span> <a href="http://51qianduan.com">芝華士,月銷萬瓶!</a> </p>
                </div>
                <dl>
                  <dt>促銷活動</dt>
                </dl>
                <div class="ad-list mt10"> <a href="http://51qianduan.com"><img src='http://img0.gjw.com/famous/2013/1115/51ee0f88c7664b099526214a45076686.jpg' width='210' height='100' /></a> <a href="http://51qianduan.com"><img src='http://img0.gjw.com/famous/2013/1115/0815723969be40cb8126353991470fb1.jpg' width='210' height='100' /></a> <a href="http://51qianduan.com"><img src='http://img0.gjw.com/famous/2013/1115/ce2c2e1eae804529b68785bfd92f5a44.jpg' width='210' height='100' /></a> </div>
              </ul>
            </div>
          </li>
          <li >
            <div class="cate-tag"> <strong><a href="http://51qianduan.com">黃酒</a></strong>
              <div class="listModel">
                <p> <a href="http://51qianduan.com">石庫門</a> <a href="http://51qianduan.com">女兒紅</a> <a href="http://51qianduan.com">古越龍山</a> </p>
              </div>
            </div>
            <div class="list-item hide">
              <ul class="itemleft">
                <dl>
                  <dt>品牌</dt>
                  <dd> <a href="http://51qianduan.com">石庫門</a> <a href="http://51qianduan.com">和酒</a> <a href="http://51qianduan.com">古越龍山</a> <a href="http://51qianduan.com">女兒紅</a> <a href="http://51qianduan.com">沙洲優黃</a> <a href="http://51qianduan.com">會稽山</a> <a href="http://51qianduan.com">塔牌</a> <a href="http://51qianduan.com">烏氈帽</a> <a href="http://51qianduan.com">唐宋黃酒</a> <a href="http://51qianduan.com">錢塘人家</a> <a href="http://51qianduan.com">咸亨黃酒</a> <a href="http://51qianduan.com">嘉善黃酒</a> <a href="http://51qianduan.com">紹興師爺</a> <a href="http://51qianduan.com">梁祝</a> <a href="http://51qianduan.com">組合裝</a> </dd>
                </dl>
                <div class="fn-clear"></div>
                <dl>
                  <dt>年份</dt>
                  <dd> <a href="http://51qianduan.com">100年</a> <a href="http://51qianduan.com">10年</a> <a href="http://51qianduan.com">12年</a> <a href="http://51qianduan.com">15年</a> <a href="http://51qianduan.com">18年</a> <a href="http://51qianduan.com">20年</a> <a href="http://51qianduan.com">25年</a> <a href="http://51qianduan.com">30年</a> <a href="http://51qianduan.com">3年</a> <a href="http://51qianduan.com">5年</a> <a href="http://51qianduan.com">6年</a> <a href="http://51qianduan.com">8年</a> <a href="http://51qianduan.com">9年</a> <a href="http://51qianduan.com">常規年份</a> </dd>
                </dl>
                <div class="fn-clear"></div>
              </ul>
              <ul class="itemright">
                <dl>
                  <dt>促銷活動</dt>
                </dl>
                <div class="ad-list mt10"> <a href="http://51qianduan.com"><img src='http://img0.gjw.com/famous/2013/1108/c58fc62653c64cfb8e7b93ce34733535.jpg' width='210' height='100' /></a> <a href="http://51qianduan.com"><img src='http://img0.gjw.com/famous/2013/1108/ee9514f6a1c341efb0889917e51072af.jpg' width='210' height='100' /></a> </div>
              </ul>
            </div>
          </li>
          <li >
            <div class="cate-tag"> <strong><a href="http://51qianduan.com">保健酒與啤酒</a></strong>
              <div class="listModel">
                <p> <a href="http://51qianduan.com">百威</a> <a href="http://51qianduan.com">青島</a> <a href="http://51qianduan.com">喜力</a> <a href="http://51qianduan.com">勁酒</a> </p>
              </div>
            </div>
            <div class="list-item hide">
              <ul class="itemleft">
                <dl>
                  <dt>品牌</dt>
                  <dd> <a href="http://51qianduan.com">百威</a> <a href="http://51qianduan.com">喜力</a> <a href="http://51qianduan.com">青島</a> <a href="http://51qianduan.com">勁酒</a> <a href="http://51qianduan.com">黃金酒</a> <a href="http://51qianduan.com">藍莓酒</a> <a href="http://51qianduan.com">銀杏</a> <a href="http://51qianduan.com">春生堂</a> <a href="http://51qianduan.com">張裕酒</a> <a href="http://51qianduan.com">丹力</a> <a href="http://51qianduan.com">桂花酒</a> <a href="http://51qianduan.com">森林大貓</a> <a href="http://51qianduan.com">卡力特</a> <a href="http://51qianduan.com">麒麟</a> <a href="http://51qianduan.com">凱撒</a> <a href="http://51qianduan.com">修士</a> <a href="http://51qianduan.com">黑森馬蹄</a> <a href="http://51qianduan.com">威蘭仕</a> <a href="http://51qianduan.com">科羅娜</a> <a href="http://51qianduan.com">藍帶</a> <a href="http://51qianduan.com">布格福斯</a> <a href="http://51qianduan.com">博瑞克</a> <a href="http://51qianduan.com">力茲堡</a> <a href="http://51qianduan.com">嘉士伯</a> <a href="http://51qianduan.com">美名格</a> <a href="http://51qianduan.com">阿登堡</a> <a href="http://51qianduan.com">博德</a> <a href="http://51qianduan.com">德福堡</a> <a href="http://51qianduan.com">德力士</a> <a href="http://51qianduan.com">朗克</a> <a href="http://51qianduan.com">麥德奧黑</a> <a href="http://51qianduan.com">威歐</a> <a href="http://51qianduan.com">威斯瑪</a> <a href="http://51qianduan.com">朝日</a> <a href="http://51qianduan.com">彼樂</a> <a href="http://51qianduan.com">白鸛</a> <a href="http://51qianduan.com">德博</a> <a href="http://51qianduan.com">莊園主</a> <a href="http://51qianduan.com">德拉克</a> <a href="http://51qianduan.com">西藏青稞</a> </dd>
                </dl>
                <div class="fn-clear"></div>
              </ul>
              <ul class="itemright">
                <dl>
                  <dt>促銷活動</dt>
                </dl>
                <div class="ad-list mt10"> <a href="http://51qianduan.com"><img src='http://img0.gjw.com/famous/2013/1108/882341974a8543cf93f2a7d18ff277ab.jpg' width='210' height='100' /></a> </div>
              </ul>
            </div>
          </li>
          <li>
            <div class="float-list-dnav"> <a href="http://51qianduan.com">新品</a> <a href="http://51qianduan.com">清倉</a> <a href="http://51qianduan.com">多買優惠</a> </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="navCon-menu fl">
      <ul>
        <li><a class="curMenu" 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">VIP專場</a></li>
      </ul>
    </div>
  </div>
</div>
<div style="text-align:center;clear:both"><br>
</div>



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


熱門標簽: flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 導航切換 菜單切換 右鍵菜單 滑動導航菜單 滑動導航 滑動菜單 滾動導航菜單 滾動菜單 滾動導航 收縮菜單 收縮導航 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 浮動菜單 浮動導航 滾動切換 滾動條切換 滑動選項卡 滑動切換 滑動手風琴 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動星星打分 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 其他 鼠標懸停 導航切換 菜單切換 二級菜單 二級導航菜單 二級導航 側邊菜單 側邊導航 導航菜單插件 導航插件 菜單插件 文字導航菜單 文字導航 文字菜單
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子