商城导航

淩亂°似流年 2022-08-03 03:17 125阅读 0赞

最近一直都在看慕课，看见些有意思的小特效也就在这记一下，今天看的是一款京东商城导航的，大体一看并不难，无论是C单一SS还是单一JS都不需要太多的逻辑，所以打算在这里记下来  
先说一下CSS方面吧，很简单，主要是一些hover的应用，对CSS理解深一点的人大体都可以写出来，但  
里面的一些小特效，小技巧还是让我眼前一亮，还是蛮有意思的，这次代码里还用的dl dt dd我以前几乎不用，看了视频后也是更多的了解了这个标签，发现以前总是用li标签，的确又不好解决的地方，也算是一些收获吧  
下面附上主要的核心代码

<ul class="topmenu">
            <div class="toptitle">全部商品分类</div>
            <li><a href="#">图书、音像、数字产品</a><span></span>
                <div class="submenu">
                    <div class="left-div">
                        <dl>
                            <dt><a href="#">电子书</a></dt>
                            <dd><a href="#">免费</a><a href="#">励志与成功</a><a href="#">小说</a>
                                <a href="#">婚恋</a><a href="#">文学</a><a href="#">经营</a>
                            </dd>
                        </dl>
                    </div>
                    <div class="right-div">
                        右侧推荐品牌<br/>
                        右侧推荐品牌<br/>
                        右侧推荐品牌<br/>
                        右侧推荐品牌<br/>
                        右侧推荐品牌<br/>
                        右侧推荐品牌<br/>
                    </div>
                </div>
            </li>
        </ul>

**CSS**

//这是其中的鼠标划过事件
    .topmenu li a:hover{
        text-decoration: underline;
        font-weight: bold;
        color: #e4393c;
    }
    .topmenu li:hover{
        border: 1px solid #DDD;
        border-right:0;
        box-shadow: 0 0 8px #DDD;//发亮效果，用阴影做的，以前没试过，还不错
        -moz-box-shadow:0 0 8px #DDD;//兼容
        -webkit-box-shadow:0 0 8px #DDD;//兼容
        background-image: none;//取消背景图片，，我以前取消都没想到这么简单的- -
    }
    .topmenu li:hover .submenu{
        display: block;
    }
    .topmenu li:hover span{
       //这是一个小技巧吧，一会贴特效图，主要是做出了一个小白块，使左右导航连了起来
    //如下图
        background: white;
        display: inline-block;
        z-index: 20;//层级最高
        width: 20px;
        height: 30px;
        float: right;//浮动和相对缺一不可
        position: relative;//
    }

![这里写图片描述][20150730113606938]  
如果用JS，我想大部分人已经想到了  
无非就是mouseover和mouseout事件

但我们需要把CSS中li：hover改为.lihover改为一个类，这样我们就可以用JS给他添加类属性了。

[20150730113606938]: /images/20220731/646d2d50064841d68b665649be58d99a.png