<!DOCTYPE HTML>
<html>
<head>
<meta charset="=utf-8" />
<title>仿百度菜单练习</title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, textarea {
padding: 0;
margin: 0;
font-size: 18px;
}
ol, ul, li {
list-style: none;
}
img {
display: block;
border: none;
}
a {
display: block;
text-decoration: none;
}
.clearfloat {
zoom: 1;
}
.clearfloat:after {
display: block;
content: '';
clear: both;
visibility: hidden;
height: 0;
}
.nav {
background: #666;
min-width: 800px;
margin-top: 180px;
}
.nav .menu-wrap {
width: 800px;
height: 48px;
margin: 0 auto;
}
.menu-wrap .menu-item {
float: left;
}
.menu-wrap .item-index, .menu-wrap .item-user-center {
width: 160px;
text-align: center;
}
.menu-wrap .item-box {
text-align: center;
}
.menu-wrap .item-box-a, .menu-wrap .item-box-b, .menu-wrap .item-box-c {
width: 160px;
}
.menu-wrap .item-box-b .menu-title {
cursor: default;
}
.menu-wrap .item-box-a:hover .menu-title, .menu-wrap .item-box-b:hover .menu-title, .menu-wrap .item-box-c:hover .menu-title {
background: #555;
}
.menu-wrap .menu-title {
color: #fff;
line-height: 48px;
}
.item-box .menu-content {
display: none;
background: #ddd;
border-radius: 0 0 10px 10px;
padding-top: 18px;
padding-bottom: 6px;
}
.item-box-a:hover .menu-content, .item-box-b:hover .menu-content, .item-box-c:hover .menu-content {
display: block;
}
.menu-content-category {
position:absolute;
}
.item-box-a-sub {
width: 360px;
}
.menu-sub-list .menu-sub-item-wrap {
margin-bottom: 18px;
}
.item-box-a-sub .menu-sub-item-wrap {
float: left;
}
.menu-sub-list .menu-sub-item {
font-size: 15px;
line-height: 15px;
color: #666;
}
.item-box-a-sub .menu-sub-item {
width: 120px;
}
.menu-sub-list .menu-sub-item:hover {
color: #fff;
}
</style>
</head>
<body>
<div class="nav">
<div class="menu-wrap clearfloat">
<div class="menu-item item-index">
<a class="menu-title" href="#"><span>首页</span></a>
</div>
<div class="item-box">
<div class="menu-item item-box-a">
<a class="menu-title" href="#"><span>问题分类</span></a>
<div class="menu-content menu-content-category">
<ul class="item-box-a-sub menu-sub-list clearfloat">
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">全部问题</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">娱乐休闲</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">游戏</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">旅游</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">教育培训</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">金融财经</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">医疗健康</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">科技</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">家电数码</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">政策法规</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">文化历史</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">时尚美容</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">情感心理</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">汽车</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">生活</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">职业</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">母婴</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">三农</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">互联网</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">生产制造</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">其他</a></li>
</ul>
</div>
</div>
<div class="menu-item item-box-b">
<a class="menu-title"><span>用户</span></a>
<div class="menu-content">
<ul class="menu-sub-list clearfloat">
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">认证用户</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">日报作者</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">芝麻团</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">认证团队</a></li>
</ul>
</div>
</div>
<div class="menu-item item-box-c">
<a class="menu-title" href="#"><span>知道日报</span></a>
<div class="menu-content">
<ul class="menu-sub-list clearfloat">
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">日报精选</a></li>
<li class="menu-sub-item-wrap"><a class="menu-sub-item" href="#">日报广场</a></li>
</ul>
</div>
</div>
</div>
<div class="menu-item item-user-center">
<a class="menu-title" href="#"><span>我的主页</span></a>
</div>
</div>
</div>
</body>
</html>
思路
- 首先无论开发什么页面,都必须先写个清除默认样式的css,避免因默认值带来的诸多不便:距离px超出或者缺少等等、序列的点不好看、下划线不需要等等,需要了再单独设置就行;
- 敲码写项目时,都会用到float,但是float肯定是会导致父元素高度塌陷的,所以再定义一个万能清除修复的类,当子元素出现float时,给父元素套上清除浮动的类就好了;
- 我这里的导航条是深灰色的背景色,因为希望宽度随着浏览器改变,不想定死宽,所以没给值。但是我必须给最小的宽值,否则当浏览器缩小,出现水平滚动条时,拉到右边后,背景色是没有的,因为超出了浏览器大小,如下:
- 在准备写内容部分前,先给一个容器wrap,设置宽高。用
margin: 0 auto;
来使定宽块级居中。 - 因为导航两端都没下拉,只有中间部分存在下拉,所以无法共用ul-li来完成,那么我就分了三部分:
- 因为中间部分有下拉内容,所以先定义一个容器,item-box,然后再写所包含的东西;
- 先把两端不需要下拉且相同的部分完成:
①类:menu-item,共用的样式类
②类:item-index,item-user-center,独立的类名,独立样式用
- 然后,因为中间下拉部分,我这给的是三个标题,为了方便,直接命名a、b、c,(注意宽度算好,我这里菜单一共5个标题,容器宽800px,也就是平均每个160px)
- 因为鼠标经过“用户”只出现下拉,鼠标不改变还是箭头,且点用户也不会跳转链接,所以不需要给“用户”href,同时独立设置鼠标指针样式:
- 再来给这三个含下拉的标题设置鼠标经过的样式:(因为“首页”和“我的知道”无下拉内容,所以不设
:hover
伪类,当然你喜欢也可以加)
Q:为何:hover
不跟.menu-title
呢?
A:如果写成.menu-title:hover
,那么鼠标离开该元素就立马恢复颜色,但我希望鼠标在该下拉内容里(该父元素内),还是不变的。
Q:既然需要.item-box-a:hover
,那为何后面还加子类.menu-title
?去掉不行吗?
A:这个不能去掉,这个是给后面子类设圆角的步骤定义的。
- 菜单的标题写好了,然后就是下拉部分的css了:
①display: none;
是元素不可见,且不会占空间。你想想,下拉菜单,不就是鼠标经过后,显示的东西吗,所以这个属性很合适,而至于visibility: hidden;
这个虽然也是隐藏,但是会占据空间,所以不合适。
②border-radius: ;
设置边的弧度,也就是圆角,顺序是逆时针,左上,右上,右下,左下。
③padding: ;
填充,撑开文本内容与上下边的距离。 - 注意一下“问题分类”的单独css样式:
position: absolute;
:
【之前练习时是配合top/bottom、left/right来达到定位效果的,但是这里并不需要top/bottom、left/right,因为该元素没有定义width和height,所以这里的absolute是拉伸作用。】
- 当操作完以上步骤后,发现,除了第一个下拉,其它两个下拉完成了,第一个却出现了下面的情况,为什么?这是因为,<ul>没有设置宽,这些<li>子元素在父元素中按照文档流排列,当该行挤不下时,才自动换行。所以,如果希望美观点,就给<ul>宽值,我这里360px,是分三列,每列120px。
- 剩下的也就是关于下拉子类标题的一些css样式了,无非就是通常ul-li导航需要的 li float,和鼠标经过字体颜色改变等等,就不多说了。
ps:
-
有一点缺陷,关于鼠标经过子类的标题,官网是只对文字有效,移出文字是没有手指鼠标的,也就是不会打开链接。而我这里,因为定宽,所以块化了,移出字体还是能够触发。以后再看看怎么回事。
-
另:当然不是百分百copy官网的啦,先做参考,然后以自己的思路和所学的知识写的。因为还没学到css3,所以css3阴影透明等我都没用到。