WEB代码：点击左侧导航弹出导航页面

最新推荐文章于 2022-11-23 09:38:15 发布

hahahafree

最新推荐文章于 2022-11-23 09:38:15 发布

阅读量601

点赞数

分类专栏： Web 文章标签： WEB

本文链接：https://blog.csdn.net/weixin_43731793/article/details/99718765

版权

Web 专栏收录该内容

80 篇文章 0 订阅

订阅专栏

html

 <div class="navWrap">
        <div class="nav">
            <div class="navCategoryMenu">
                <h2>全部商品分类</h2>
                <ul class="categoryBox clearfix">
                    <li class="catItem" id="_nowactstr1">
                        <div class="catItemLeft"></div>
                        <div class="catItemCon" name="__home_fenleiyijian">
                            <h3 name="tagH" pathname="一键选酒" url="http://www.jiuxian.com/" ishot="true" iszlm="1"><i class="publicIcon seleWine"></i>
                                <a target="_blank" href="http://www.jiuxian.com"></a>一键选酒</h3>
                            <div class="categoryCon">
                                <p><a href="http://shop.jiuxian.com/brand-382/activity-3684.htm?area=17" target="_blank" rel="nofollow">整箱购</a>
                                    <a href="http://shop.jiuxian.com/brand-371/activity-679.htm?area=17" target="_blank" rel="nofollow">家乡名酒</a>
                                    <a href="http://shop.jiuxian.com/brand-371/activity-1069.htm?area=17" target="_blank" rel="nofollow">老酒特卖</a>
                                    <a href="http://shop.jiuxian.com/brand-371/activity-1069.htm?area=17" target="_blank" rel="nofollow">年份酒</a></p>
                                <p><a href="http://shop.jiuxian.com/index-1171/activity-3211.htm?area=17&amp;isPreview=1#c" target="_blank" rel="nofollow">地域名酒</a>
                                    <a href="http://shop.jiuxian.com/index-1171/activity-3405.htm?area=17" target="_blank" rel="nofollow">值得买</a>
                                    <a href="http://shop.jiuxian.com/brand-371/activity-440.htm?area=17" target="_blank" rel="nofollow">实惠大坛</a>
                                    <a href="http://shop.jiuxian.com/brand-371/activity-709.htm?area=17" target="_blank" rel="nofollow">有礼有面</a></p>
                            </div>
                        </div>
                        <div class="menuBox">
                            <h1>111111111111111111111</h1>
                            <h1>111111111111111111111</h1>
                            <h1>111111111111111111111</h1>
                            <h1>111111111111111111111</h1>
                        </div>
                    </li>
                    <li class="catItem bg" id="_nowactstr2">
                        <div class="catItemLeft"></div>
                        <div class="catItemCon" name="__home_fenleibai">
                            <h3 name="tagH" pathname="白酒" url="http://list.jiuxian.com/1-0-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2" ishot="false" iszlm="1"><i class="publicIcon liquor"></i><a target="_blank" href="http://list.jiuxian.com/1-0-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2">白酒</a></h3>
                            <div class="categoryCon">
                                <p><a href="http://shop.jiuxian.com/brand-382/activity-3376.htm?area=17" target="_blank">茅台</a>
                                    <a href="http://list.jiuxian.com/1-2-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2" target="_blank" class="on">五粮液</a>
                                    <a href="http://shop.jiuxian.com/brand-41/activity-3399.htm?area=17&amp;source=23" target="_blank" class="on">酒鬼</a>
                                    <a href="http://list.jiuxian.com/1-4-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2" target="_blank">汾酒</a></p>
                                <p><a href="http://list.jiuxian.com/1-0-0-0-126-0-0-0-0-0-0-0.htm?area=17#v2" target="_blank">浓香型</a>
                                    <a href="http://list.jiuxian.com/1-0-0-0-97-0-0-0-0-0-0-0.htm?area=17#v2" target="_blank" class="on">酱香型</a>
                                    <a href="http://list.jiuxian.com/1-0-0-9500-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2" target="_blank">贵州</a>
                                    <a href="http://list.jiuxian.com/1-0-0-9485-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2" target="_blank">四川</a></p>
                            </div>
                        </div>
                        <div class="menuBox">
                            <h1>2222222222222222</h1>
                            <h1>2222222222222222</h1>
                            <h1>2222222222222222</h1>
                            <h1>2222222222222222</h1>
                        </div>
                    </li>
                    <li class="catItem" id="_nowactstr3">
                        <div class="catItemLeft"></div>
                        <div class="catItemCon" name="__home_fenleipu">
                            <h3 name="tagH" pathname="葡萄酒" url="http://list.jiuxian.com/2-0-0-0-0-0-0-0-0-0-0-0.htm?area=17" ishot="true" iszlm="1"><i class="publicIcon wine"></i><a target="_blank" href="http://list.jiuxian.com/2-0-0-0-0-0-0-0-0-0-0-0.htm?area=17">葡萄酒</a></h3>

                            <div class="categoryCon">
                                <p><a href="http://list.jiuxian.com/2-0-9437-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0.htm?area=17" target="_blank">法国</a>
                                    <a href="http://list.jiuxian.com/2-0-9442-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0.htm?area=17" target="_blank">澳大利亚</a>
                                    <a href="http://list.jiuxian.com/2-0-9439-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0.htm?area=17" target="_blank">西班牙</a>
                                    <a href="http://list.jiuxian.com/2-0-9443-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0.htm?area=17" target="_blank">智利</a></p>
                                <p><a href="http://list.jiuxian.com/2-0-9436-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0.htm?area=17" target="_blank">中国</a>
                                    <a href="http://list.jiuxian.com/search.htm?v=2&amp;key=%E6%8B%89%E8%8F%B2&amp;isOwn=1&amp;area=17" target="_blank" class="on">拉菲</a>
                                    <a href="http://list.jiuxian.com/search.htm?v=2&amp;key=%E5%A5%94%E5%AF%8C&amp;isOwn=1&amp;area=17" target="_blank">奔富</a>
                                    <a href="http://list.jiuxian.com/search.htm?key=%E9%BB%84%E5%B0%BE%E8%A2%8B%E9%BC%A0&amp;area=17" target="_blank">黄尾袋鼠</a></p>
                            </div>
                        </div>
                        <div class="menuBox">
                            <h1>3333333333333333</h1>
                            <h1>3333333333333333</h1>
                            <h1>3333333333333333</h1>
                            <h1>3333333333333333</h1>
                            <h1>3333333333333333</h1>

                        </div>
                    </li>
                    <li class="catItem bg" id="_nowactstr4">
                        <div class="catItemLeft"></div>
                        <div class="catItemCon" name="__home_fenleiyang">
                            <h3 name="tagH" pathname="洋酒" url="http://list.jiuxian.com/4-0-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2" ishot="true" iszlm="1"><i class="publicIcon yang"></i><a target="_blank" href="http://list.jiuxian.com/4-0-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2">洋酒</a></h3>
                            <div class="categoryCon">
                                <p><a href="http://list.jiuxian.com/4-110-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2" target="_blank" class="on">马爹利</a>
                                    <a href="http://list.jiuxian.com/4-112-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2" target="_blank" class="on">人头马</a>
                                    <a href="http://list.jiuxian.com/search.htm?key=%E5%B0%8A%E5%B0%BC%E8%8E%B7%E5%8A%A0&amp;area=17" target="_blank">尊尼获加</a>
                                    <a href="http://list.jiuxian.com/4-109-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2" target="_blank">芝华士</a></p>
                                <p><a href="http://list.jiuxian.com/4-113-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0.htm?area=17" target="_blank" class="on">轩尼诗</a>
                                    <a href="http://list.jiuxian.com/search.htm?area=17&amp;keys=%E7%BB%9D%E5%AF%B9" target="_blank" class="on">绝对</a>
                                    <a href="http://list.jiuxian.com/4-219-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0.htm?area=17" target="_blank">百龄坛</a>
                                </p>
                            </div>
                        </div>
                        <div class="menuBox">
                            <h1>44444444444444444444</h1>
                            <h1>44444444444444444444</h1>
                            <h1>44444444444444444444</h1>
                            <h1>44444444444444444444</h1>
                            <h1>44444444444444444444</h1>

                        </div>
                    </li>
                    <li class="catItem" id="_nowactstr5">
                        <div class="catItemLeft"></div>
                        <div class="catItemCon" name="__home_fenleipi">
                            <h3 name="tagH" pathname="啤酒|黄酒|养生酒" url="http://list.jiuxian.com/151-0-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2|http://list.jiuxian.com/95-0-0-0-0-0-0-0-0-0-0-0.htm#v2|http://list.jiuxian.com/6-0-0-0-0-0-0-0-0-0-0-0.htm#v2" ishot="false" iszlm="1"><i class="publicIcon health"></i><a target="_blank" href="http://list.jiuxian.com/151-0-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2">啤酒</a>/<a target="_blank" href="http://list.jiuxian.com/95-0-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2">黄酒</a>/
                                <a target="_blank" href="http://list.jiuxian.com/6-0-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2">养生酒</a>
                            </h3>
                            <div class="categoryCon">
                                <p><a href="http://list.jiuxian.com/151-2542-0-0-0-0-0-0-0-0-0-0.htm?area=17" target="_blank" class="on">埃丝伯爵</a>
                                    <a href="http://list.jiuxian.com/151-117-0-0-0-0-0-0-0-0-0-0.htm?area=17" target="_blank" class="on">青岛</a>
                                    <a href="http://list.jiuxian.com/151-3542-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0.htm?area=17" target="_blank" class="on">1664</a>
                                    <a href="http://list.jiuxian.com/95-144-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2" target="_blank" class="on">古越龙山</a></p>
                                <p><a href="http://list.jiuxian.com/6-407-0-0-0-0-0-0-0-0-0-0.htm?area=17" target="_blank">劲牌</a>
                                    <a href="http://list.jiuxian.com/search.htm?key=%E7%8C%8E%E9%B9%B0&amp;cg=151&amp;area=17#v2" target="_blank">猎鹰</a>
                                    <a href="http://list.jiuxian.com/search.htm?key=%E7%8B%AE%E8%99%8E%E4%BA%89%E9%9C%B8&amp;area=17" target="_blank">狮虎争霸</a>
                                </p>
                            </div>
                        </div>
                        <div class="menuBox">
                            <h1>55555555555555555555</h1>
                            <h1>55555555555555555555</h1>
                            <h1>55555555555555555555</h1>
                            <h1>55555555555555555555</h1>
                            <h1>55555555555555555555</h1>
                        </div>
                    </li>
                    <li class="catItem bg last" id="_nowactstr6">
                        <div class="catItemLeft"></div>
                        <div class="catItemCon" name="__home_fenleishi">
                            <h3 name="tagH" pathname="食尚" url="http://list.jiuxian.com/68-0-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2" ishot="false" iszlm="1"><i class="publicIcon wineTools"></i><a target="_blank" href="http://list.jiuxian.com/68-0-0-0-0-0-0-0-0-0-0-0.htm?area=17#v2">食尚</a></h3>
                            <div class="categoryCon">
                                <p><a href="http://list.jiuxian.com/search.htm?key=%E9%85%92%E5%85%B7&amp;area=17" target="_blank" class="on">酒具</a>
                                    <a href="http://list.jiuxian.com/search.htm?key=茶&amp;area=17" target="_blank">茶叶</a>
                                    <a href="http://list.jiuxian.com/search.htm?key=%E7%94%B5%E5%AD%90%E7%83%9F&amp;area=17" target="_blank" class="on">电子烟</a></p>
                            </div>
                        </div>
                        <div class="menuBox">
                            <h1>6666666666666666666</h1>
                            <h1>6666666666666666666</h1>
                            <h1>6666666666666666666</h1>
                            <h1>6666666666666666666</h1>
                            <h1>6666666666666666666</h1>
                        </div>
                    </li>
                </ul>
                
            </div>
            <!-- 横导航 -->
            <ul class="navList">
                <li class="home on"><a name="home_zhudaoshouye" class="channel" id="httpwwwjiuxiancom" href="http://www.jiuxian.com">首页</a></li>
                <li><a name="home_zhudao1" class="channel" id="httpshopjiuxiancombrand-383activity-1981htm" href="http://shop.jiuxian.com/brand-383/activity-1981.htm" target="_blank">领券中心</a></li>
                <li><a name="home_zhudao2" class="channel" id="httpshopjiuxiancombrand-386activity-3455htm" href="http://shop.jiuxian.com/brand-386/activity-3455.htm" target="_blank">自营甄选</a><span class="hot publicIcon"></span></li>
                <li><a name="home_zhudao3" class="channel" id="httpshopjiuxiancomindex-1171activity-3405htm" href="http://shop.jiuxian.com/index-1171/activity-3405.htm" target="_blank">值得买</a><span class="hot publicIcon"></span></li>
                <li><a name="home_zhudao4" class="channel" id="httpwinejiuxiancom" href="http://wine.jiuxian.com" target="_blank">葡萄酒馆</a></li>
                <li><a name="home_zhudao5" class="channel" id="httpspiritsjiuxiancom" href="http://spirits.jiuxian.com" target="_blank">洋酒馆</a></li>
                <li><a name="home_zhudao6" class="channel" id="httpshopjiuxiancombrand-382activity-2932htm" href="http://shop.jiuxian.com/brand-382/activity-2932.htm" target="_blank">新品</a><span class="hot publicIcon"></span></li>
                <li><a name="home_zhudao7" class="channel" id="httpshopjiuxiancombrand-381activity-2207htm" href="http://shop.jiuxian.com/brand-381/activity-2207.htm" target="_blank">CLUB</a></li>
                <li><a name="home_zhudao8" class="channel" id="httpshopjiuxiancombrand-383activity-3031htm" href="http://shop.jiuxian.com/brand-383/activity-3031.htm" target="_blank">门店加盟</a></li>
            </ul>
            <div class="navPromotion">
                <a name="home_zhugif" href="http://shop.jiuxian.com/brand-402/activity-3723.htm" target="_blank" rel="nofollow"><img src="http://img09.jiuxian.com/bill/2019/0801/c2b16c8c0e8549b1b3753304678bc52f.gif" width="120" height="34">
                </a>
            </div>
        </div>
    </div>

css

.navWrap .menuBox{
    display: none;
    width: 615px;
    height: 470px;
    position: absolute;
    /* top: 34px;
    left:190px; */
    background:#f0f;
    z-index: 301px;
    overflow: hidden;
}

  $('.categoryBox li').mouseenter(function() {
        $(this).find('.catItemLeft').css({ 'display': 'block' });
        $(this).css({ 'background': '#F1F1F1' });
        liw=$('.categoryBox li').width();
        x=$('.categoryBox li').first().position().left+liw;
        y=$('.categoryBox li').first().position().top;
        // alert(x+'-'+y)
        $(this).find('.menuBox').show().css({'left':x+'px','top':y+'px'});
    });
    $('.categoryBox li').mouseleave(function() {
        $(this).find('.catItemLeft').css({ 'display': 'none' });
        $(this).css({ 'background': '#FFF' });
        $(this).find('.menuBox').hide();
    });

hahahafree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB代码：点击左侧导航弹出导航页面

html <div class="navWrap"> <div class="nav"> <div class="navCategoryMenu"> <h2>全部商品分类</h2> <ul class="categoryBo...
复制链接

扫一扫