一款基于jQuery左侧产品分类二级菜单导航

今天要为大家分享一款基于jQuery左侧产品分类二级菜单导航。这款二级导航菜单非常适合的电商网站。或导航比较多的网站。效果非常不错。一起看下效果图:

在线预览   源码下载

实现的代码。

html代码:

  <div class="header">
        <div class="topM sline clearfix">
            <div class="searchBar">
                <div class="searchVInput">
                    <form action="http://www.w2bc.com/" method="post" name="fo" id="fo" target="_blank">
                    <a href="javascript:document.getElementById('fo').submit()">搜索</a>
                    <div>
                        <input type="text" id="cardname" name="cardname" autocomplete="off" /></div>
                    </form>
                </div>
                <!-- searchVInput end -->
                <input name="producttype" id="producttype" value="0" type="hidden" />
            </div>
            <!-- searchBar end -->
        </div>
        <!-- sline end -->
        <div class="navigationBar">
            <div class="navigationBarInnel">
                <tt title="所有产品分类"></tt>
                <div class="mainMenuV">
                    <a href="http://www.w2bc.com/">首页</a> <a href="http://www.w2bc.com/" target="_blank">
                        网游交易区</a> <a href="http://www.w2bc.com/" target="_blank">积分商城</a> <a href="http://www.w2bc.com/?"
                            target="_blank">免费游戏</a>
                </div>
                <!-- mainMenuV end -->
            </div>
            <!-- mainMenudl end -->
        </div>
        <!-- navigationBar end -->
    </div>
    <!-- header end -->
    <div class="of_whole">
        <!--tp通栏广告-->
        <!--tp通栏广告-->
        <!--主体内容区开始-->
        <div id="of_mainBody" class="push_t">
            <!--左侧栏开始-->
            <script>
                $(document).ready(function () {
                    var OLeft = $(".searchBar").offset().left;
                    var Otop = $(".searchBar").offset().top + $(".searchBar").height() - 3;
                    $("#KsmanDisp").css({ left: OLeft, top: Otop }); //搜索联想的DIV被幻灯片图片盖住。
                    $("#cardname").addClass("cardnameV");
                    $("#cardname").focus(function () {
                        if ($(this).val() != "") {
                            $(this).removeClass("cardnameV");
                        } else {
                            $(this).addClass("cardnameV");
                        }
                    })
                    $("#cardname").keyup(function () {
                        $(this).removeClass("cardnameV");
                    })
                    $("#cardname").blur(function () {
                        if ($(this).val() != "") {
                            $(this).removeClass("cardnameV");
                        } else {
                            $(this).addClass("cardnameV");
                        }
                    })
                    $(".mainProNav dl dt").mouseover(function () {
                        $(".mainProNav dl").removeClass("dlHover");
                        $(this).parent().addClass("dlHover");
                    })
                    $(".mainProNav").hover(function () {
                        $(this).addClass("mainProNavHover");
                    }, function () {
                        $(this).removeClass("mainProNavHover");
                        $(".mainProNav dl").removeClass("dlHover");
                    })
                });
            </script>
            <div class="side_small tag_line float_l">
                <div class="mainProNav">
                    <dl class="navM1">
                        <dd>
                            <h6>
                                <a href="http://www.w2bc.com/">聚合分享</a></h6>
                            <p>
                                <a href="http://www.w2bc.com/">91游戏</a><a href="http://www.w2bc.com/">梦幻国度</a><a
                                    href="http://www.w2bc.com/">Q币随意直充</a><a href="http://www.w2bc.com/">魔兽世界</a><a href="http://www.w2bc.com/"
                                        class="more">查看更多...</a></p>
                            <h6>
                                <a href="http://www.w2bc.com/">游戏卡密</a></h6>
                            <p>
                                <a href="http://www.w2bc.com/">骏网一卡通</a><a href="http://www.w2bc.com/">完美一卡通</a><a
                                    href="http://www.w2bc.com/">聚合素材</a><a href="http://www.w2bc.com/">巨人一卡通</a><a href="http://www.w2bc.com/"
                                        class="more">查看更多...</a></p>
                            <h5>
                                上面没找到,别漏了这些哦。</h5>
                            <ul>
                                <li><a href="http://www.w2bc.com/">网页游戏充值</a></li>
                                <li><a href="http://www.w2bc.com/">外服网游点卡</a></li>
                                <li><a href="http://www.w2bc.com/">游戏辅助卡</a></li>
                                <li><a href="http://www.w2bc.com/">棋牌休闲游戏</a></li>
                                <li><a href="http://www.w2bc.com/">游戏相关实物</a></li>
                                <li><a href="http://www.w2bc.com/">手机游戏</a></li>
                            </ul>
                        </dd>
                        <dt>游戏充值类</dt>
                    </dl>
                    <dl class="navM2">
                        <dd>
                            <h2>
                                <a href="http://www.w2bc.com/">手机充值(直充)</a></h2>
                            <h6>
                                <a href="http://www.juheweb.com">话费充值卡</a></h6>
                            <p>
                                <a href="http://www.w2bc.com/">全国移动话费100元卡密</a><a href="http://www.w2bc.com/">全国联通话费100元卡密</a><a
                                    href="http://www.w2bc.com/" class="more">查看更多...</a></p>
                            <ul class="hide">
                                <li><a href="http://www.w2bc.com/">IP电话卡</a></li>
                            </ul>
                        </dd>
                        <dt>话费充值类</dt>
                    </dl>
                    <dl class="navM3">
                        <dd>
                            <ul>
                                <li><a href="http://www.w2bc.com/">网络及休闲</a></li>
                                <li><a href="http://www.w2bc.com/">学习教育</a></li>
                                <li><a href="http://www.w2bc.com/">娱乐影视</a></li>
                                <li><a href="http://www.w2bc.com/">网络加速器</a></li>
                                <li><a href="http://www.w2bc.com/">网上保险</a></li>
                                <li><a href="http://www.w2bc.com/">电子杂志</a></li>
                                <li><a href="http://www.w2bc.com/">生活服务类</a></li>
                            </ul>
                        </dd>
                        <dt>互联网充值类</dt>
                    </dl>
                    <dl class="navM4">
                        <dd>
                            <h2>
                                <a href="http://www.w2bc.com/">银行转帐</a>
                            </h2>
                            <ul class="hide">
                                <li><a href="http://www.w2bc.com/">信用卡还款</a></li>
                                <li><a href="http://www.w2bc.com/">欧飞游戏一卡通</a></li>
                                <li><a href="http://www.w2bc.com/">欧飞话费一卡通</a></li>
                            </ul>
                            <h6>
                                <a href="http://www.w2bc.com/?cp63.html">支付帐号充值</a></h6>
                            <p>
                                <a href="http://www.w2bc.com/?630101.htm">支付宝账号充值</a><a href="http://www.w2bc.com/?6303.html">支付宝卡</a><a
                                    href="http://www.w2bc.com/?6304.html">支付宝实物卡</a><a href="http://www.w2bc.com/?cp63.html"
                                        class="more">查看详情...</a></p>
                            <h6>
                                <a href="http://www.w2bc.com/?6401.html">江苏电费充值缴费卡</a></h6>
                            <p>
                                <a href="http://www.w2bc.com/?640103.htm">50元</a><a href="http://www.w2bc.com/?640101.htm">100元</a><a
                                    href="http://www.w2bc.com/?640102.htm">200元</a><a href="http://www.w2bc.com/?6401.html"
                                        class="more">查看其他面值...</a></p>
                            <h6>
                                <a href="http://www.w2bc.com/?3603.html">欧飞游戏一卡通</a></h6>
                            <p>
                                <a href="http://www.w2bc.com/">5元</a><a href="http://www.w2bc.com/">10元</a><a href="http://www.w2bc.com/">15元</a><a
                                    href="http://www.w2bc.com/">30元</a><a href="http://www.w2bc.com/">50元</a><a href="http://www.w2bc.com/">100元</a><a
                                        href="http://www.w2bc.com/" class="more">查看详情...</a></p>
                            <h6>
                                <a href="http://www.w2bc.com/">欧飞话费一卡通</a></h6>
                            <p class="last">
                                <a href="http://www.w2bc.com/">30元</a><a href="http://www.w2bc.com/">50元</a><a href="http://www.w2bc.com/">100元</a><a
                                    href="http://www.w2bc.com/" class="more">查看详情...</a></p>
                        </dd>
                        <dt>缴费支付类</dt>
                    </dl>
                    <dl class="navM5">
                        <dd>
                            <ul>
                                <li><a href="http://www.w2bc.com/">系统应用类</a></li>
                                <li><a href="http://www.w2bc.com/">媒体娱乐类</a></li>
                                <li><a href="http://www.w2bc.com/">股票证券类</a></li>
                                <li><a href="http://www.w2bc.com/">图形图像类</a></li>
                                <li><a href="http://www.w2bc.com/">行业管理类</a></li>
                                <li><a href="http://www.w2bc.com/">网吧特供类</a></li>
                                <li><a href="http://www.w2bc.com/">在线杀毒卡</a></li>
                            </ul>
                        </dd>
                        <dt>软件产品类</dt>
                    </dl>
                    <dl class="navM6">
                        <dd>
                            <ul>
                                <li><a href="http://www.w2bc.com/" target="_blank">武尊</a></li>
                                <li><a href="http://www.w2bc.com/" target="_blank">无双三国</a></li>
                                <li><a href="http://www.w2bc.com/" target="_blank">武斗乾坤</a></li>
                                <li><a href="http://www.w2bc.com/" target="_blank">烈焰</a></li>
                                <li><a href="http://www.w2bc.com/" target="_blank">三国论剑</a></li>
                                <li><a href="http://www.w2bc.com/" target="_blank">战三国</a></li>
                            </ul>
                            <h2>
                                <a href="http://www.w2bc.com/" target="_blank">更多超酷游戏</a></h2>
                        </dd>
                        <dt>超酷游戏</dt>
                    </dl>
                </div>
                <!-- mainProNav end -->
            </div>
            <!--以下代码不作为插件效果内容 -->
        </div>
    </div>


在线预览    源码下载

爱编程-编程爱好者经验分享平台
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-1