综合应用伪类实现弹出式菜单效果
来自CloudWiki
目录
前情回顾
上节课 我们一起制作了水平导航栏：
源代码如下：
<!doctype html>
<html>
<head>
<title>商苑电商</title>
<meta charset="utf-8" />
<style type="text/css">
#navigation {
width:100%;
height:4.6em;
background-color:#1136c1;/*背景颜色*/
font:normal bold 100%/4.6em "宋体";
text-align:center; /* 这个属性使盒子中的链接居中 */
}
.dropbtn{
color:#FFFFFF;/*字体颜色*/
text-decoration: none;
width:17%;
height:4.6em;
box-sizing: border-box;
line-height: 4.6em;
border:0.05em solid black;
float:left;
}
.dropbtn:hover{ /* 鼠标经过时 */
background-color:#002099; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
</style>
</head>
<body>
<div id="navigation">
<a href="#" class="dropbtn">首页</a>
<a href="#" class="dropbtn">休闲零食</a>
<a href="#" class="dropbtn">日用百货</a>
<a href="#" class="dropbtn">服装鞋帽</a>
<a href="#" class="dropbtn">数码电子</a>
</div>
</body>
</html>
基础准备
将所有的a标签命名为dropbtn,并在外面加上一个叫做dropdown的盒子，
<div id="navigation">
<div id="dropdown1" class="dropdown">
<a href="#" class="dropbtn">首页</a>
</div>
<div id="dropdown2" class="dropdown">
<a href="#" class="dropbtn">休闲零食</a>
</div>
<div id="dropdown3" class="dropdown">
<a href="#" class="dropbtn">日用百货</a>
</div>
<div id="dropdown4" class="dropdown">
<a href="#" class="dropbtn">服装鞋帽</a>
</div>
<div id="dropdown5" class="dropdown">
<a href="#" class="dropbtn">数码电子</a>
</div>
</div>
添加第一个下拉菜单
html代码
在navigation的盒子里做如下改写：
然后在第一个dropdown盒子中加上叫做dropdwon-content的下拉菜单盒子
<div id="navigation">
<div id="dropdown1" class="dropdown">
<a href="#" class="dropbtn">首页</a>
<div id="dropdown-content1" class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
<div id="dropdown2" class="dropdown">
<a href="#" class="dropbtn">休闲零食</a>
</div>
<div id="dropdown3" class="dropdown">
<a href="#" class="dropbtn">日用百货</a>
</div>
<div id="dropdown4" class="dropdown">
<a href="#" class="dropbtn">服装鞋帽</a>
</div>
<div id="dropdown5" class="dropdown">
<a href="#" class="dropbtn">数码电子</a>
</div>
</div>
</div>
css代码
- 这里的要点是：
- 首先，为了便于定位下拉菜单，我们为navigation盒子加上定位属性：
position: relative;
- 然后通过绝对定位合理确定第一个下拉菜单（dropdown-content）的定位
.dropdown-content{
background-color: #666666;
width: 17%; height:auto;
box-sizing: border-box;
border:1px solid black;
}
#dropdown-content1{
position: absolute;top:4.6em;left:0;/*相对于它的包含框向下偏移4.6，向右偏移0*/
}
设定下拉菜单的链接样式：
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #1136c1;}
添加其他下拉菜单内容
#dropdown-content2{
position: absolute;top:4.6em;left:17%;/*相对于它的包含框向下偏移4.6，向右偏移0*/
}
#dropdown-content3{
position: absolute;top:4.6em;left:34%;/*相对于它的包含框向下偏移4.6，向右偏移0*/
}
#dropdown-content4{
position: absolute;top:4.6em;left:51%;/*相对于它的包含框向下偏移4.6，向右偏移0*/
}
#dropdown-content5{
position: absolute;top:4.6em;left:68%;/*相对于它的包含框向下偏移4.6，向右偏移0*/
}
设置悬停效果
使下拉菜单暂时不显示
- 达到这一步骤，仅需在前面的代码中做如下改动：
.dropdown-content{
...
display:none;
}
悬停后显示下拉菜单
- 现在设置;当鼠标悬停在导航栏时，显示下拉菜单
- 继续添加以下代码：
#dropdown1:hover #dropdown-content1 {
display: block;
}
#dropdown2:hover #dropdown-content2 {
display: block;
}
#dropdown3:hover #dropdown-content3 {
display: block;
}
#dropdown4:hover #dropdown-content4 {
display: block;
}
#dropdown5:hover #dropdown-content5 {
display: block;
}
- 效果图:
源代码
<!doctype html>
<html>
<head>
<title>商苑电商</title>
<meta charset="utf-8" />
<style type="text/css">
#navigation {
width:100%;
height:4.6em;
background-color:#1136c1;/*背景颜色*/
font:normal bold 100%/4.6em "宋体";
text-align:center; /* 这个属性使盒子中的链接居中 */
position: relative;
}
.dropbtn{
color:#FFFFFF;/*字体颜色*/
text-decoration: none;
width:17%;
height:4.6em;
box-sizing: border-box;
line-height: 4.6em;
border:0.05em solid black;
float:left;
}
.dropbtn:hover{ /* 鼠标经过时 */
background-color:#002099; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
.dropdown-content{
background-color: #666666;
width: 17%; height:auto;
box-sizing: border-box;
border:1px solid black;
display:none;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #1136c1;}
#dropdown-content1{
position: absolute;top:4.6em;left:0;/*相对于它的包含框向下偏移4.6，向右偏移0*/
}
#dropdown-content2{
position: absolute;top:4.6em;left:17%;/*相对于它的包含框向下偏移4.6，向右偏移0*/
}
#dropdown-content3{
position: absolute;top:4.6em;left:34%;/*相对于它的包含框向下偏移4.6，向右偏移0*/
}
#dropdown-content4{
position: absolute;top:4.6em;left:51%;/*相对于它的包含框向下偏移4.6，向右偏移0*/
}
#dropdown-content5{
position: absolute;top:4.6em;left:68%;/*相对于它的包含框向下偏移4.6，向右偏移0*/
}
#dropdown1:hover #dropdown-content1 {
display: block;
}
#dropdown2:hover #dropdown-content2 {
display: block;
}
#dropdown3:hover #dropdown-content3 {
display: block;
}
#dropdown4:hover #dropdown-content4 {
display: block;
}
#dropdown5:hover #dropdown-content5 {
display: block;
}
</style>
</head>
<body>
<div id="navigation">
<div id="dropdown1" class="dropdown">
<a href="#" class="dropbtn">首页</a>
<div id="dropdown-content1" class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
<div id="dropdown2" class="dropdown">
<a href="#" class="dropbtn">休闲零食</a>
<div id="dropdown-content2" class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
<div id="dropdown3" class="dropdown">
<a href="#" class="dropbtn">日用百货</a>
<div id="dropdown-content3" class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
<div id="dropdown4" class="dropdown">
<a href="#" class="dropbtn">服装鞋帽</a>
<div id="dropdown-content4" class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
<div id="dropdown5" class="dropdown">
<a href="#" class="dropbtn">数码电子</a>
<div id="dropdown-content5" class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
</div>
</body>
</html>
