商城导航

最近一直都在看慕课，看见些有意思的小特效也就在这记一下，今天看的是一款京东商城导航的，大体一看并不难，无论是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;//
}

如果用JS，我想大部分人已经想到了

无非就是mouseover和mouseout事件

window.onload=function(){
var lis=document.getElementsByTagName("li")
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover=function(){
this.className="lihover";
}
lis[i].onmouseout=function(){
this.className="";
}
};
}

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