天猫html悬浮菜单，商城导航菜单（CSS）---详细zongran⽼师讲的CSS实现商城菜单，课程中还有js特效与代码优化
建议看看⽼师的写的源代码
导航分类样式
门户⽹站如新浪等: 导航在上⽅平铺展⽰
商城⽹站如天猫·京东：导航在页⾯⼀侧以⼀级菜单+悬浮窗的形式展⽰
商城导航制作(CSS)
代码是京东商城⼀级菜单的为例,CSS共有三部分本别是⼀级菜单制作,
⿏标浮动以及悬浮层制作。⼀些想法都以注释的形式在每⾏的代码上⽅。
最终效果图
⼀级菜单制作
.topmenu
{
display: block;
width: 220px;
//为整体的⼀级菜单添加外边框
border: 2px solid #e4393c;
margin: 0;
padding: 0;
}
//toptitle即红⾊区域
.toptitle
{
/
/保持⽂字的垂直居中
height: 40px;
line-height: 40px;
//⽂字向左对齐
text-align: left;
font-size: 11pt;
font-weight: bold;
color: White;
background: #e4393c;
//⽂字与左边框有20px的距离
padding-left: 20px;
}
//为每个⼀级菜菜单设置样式
.topmenu li
{
height: 30px;
line-height: 30px;
font-size: 11pt;
//去除li标签的前⾯原点
list-style-type: none;
text-align: left;
padding-left: 8px;
/
/为后⾯的悬浮层在其上⽅显⽰做铺垫值,
//值越⼩该层次越容易被覆盖
z-index: 3;
//设置⼀级菜单内的右侧箭头(该⽹页⽆法显⽰) background-image: url(1.png);
//当图⽚⼩于⽗容器是也不在其⽗容器内部平铺background-repeat: no-repeat;
//在⽗容器的内部右侧贴边显⽰
background-position: right;
}
.topmenu li a
{
text-decoration: none;
color: #313131;
}
⿏标浮动效果
.topmenu li a:hover
{
text-decoration: underline;
//设置字体为粗体
font-weight: bold;
color: #e4393c;
.topmenu li:hover
{
border: 1px solid #DDD;
//去除该li的右border
border-right: 0;
//为当⿏标划过时的li的外部阴影效果
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
//取消设置的图⽚
background-image: none;
}
//span标签是为了消除悬浮框的外边框对⼀级菜单的影响, //⽤⾃⾝来覆盖边框达到隐藏
.
topmenu li:hover span
{
css设置文字垂直居中//与li的背景颜⾊⼀致
background: white;
display: inline-block;
//显⽰在Z轴的最前⽅
z-index: 20;
width: 20px;
height: 30px;
float: right;
position: relative;
}
悬浮层制作
.topmenu li:hover .submenu
{
//当⿏划过li时使其显⽰
display: block;
}
.submenu
//在⼀级标签的li内部隐藏
display: none;
width: 715px;
left: 220px;
position: absolute;
top: 40px;
border: 1px solid #DDD;
z-index: 4;
background: white;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
}
.leftdiv
{
float: left;
width: 490px;
margin: 5px;
}
.rightdiv
{
float: left;
width: 200px;
margin: 5px;
}
.
leftdiv dl
{
display: block;
border-bottom: 1px solid #EEE;
padding-bottom: 6px;
//当该部分内部⽂字过多时，隐藏⽽不是扩充容器overflow: hidden;
}
.leftdiv dl dt
{
display: block;
float: left;
width: 60px;
text-align: right;
height: 22px;
line-height: 22px;
padding-right: 6px;
}
.leftdiv dl dt a
{
color: #e4393c;
font-weight: bold;
text-decoration: underline;
font-size: 10pt;
}
.leftdiv dl dd
{
display: block;
overflow: hidden;
}
.leftdiv dl dd a
{
//通过改变a标签的形式，可以⾃定义其⾼度和宽度display: block;
float: left;
/
/标签内部的左侧竖线
border-left: 1px solid #CCC;
color: #737373;
font-size: 9pt;
padding: 0 8px;
height: 14px;
line-height: 14px;