天猫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

{

//与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;

//因dt标签的高度为22px,而dd的行高只有14px,尚未对齐

//故增加margin来提高整体的高度,若只是修改dt标签的高度为14px

//则会使dd没有行间距，不美观

margin: 4px 0;

}

.rightdiv dl dd

{

margin: 3px 0;

}

.rightdiv dl dt

{

color: #e4393c;

font-weight: bold;

font-size: 10pt;

}

.rightdiv dl dd a

{

font-size: 9pt;

color: #737373;

line-height: 22px;

}

.rightdiv dl dd a:hover

{

color: #737373;

//取消字体加粗

font-weight: normal;

}

知识回顾

1.取消li的前方原点

list-style-type: none;

2.自定义Z轴方向重叠时的位置(3D模型)

z-index: 3;

3.添加边框外部的阴影

box-shadow: 0 0 8px #DDD;

-moz-box-shadow: 0 0 8px #DDD;

-webkit-box-shadow: 0 0 8px #DDD;

4.取消背景的图片

background-image: none;