|   1,297(字)

网页常用特效-导航类

网页常用特效-导航类

简单头部导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各种下拉菜单 | 镜心书社</title>
<style>
*{margin: 0;padding:0;}
#nav{background-color:#eee;width: 800px;height: 40px;margin: 0 auto;}
ul{list-style: none;}
ul li{float: left;padding: 0 20px;line-height: 40px;text-align: center;}
ul li a{text-decoration: none;color:#000;}
ul li:hover{background-color:#666; }
ul li:hover a{color: #fff;}
</style>
</head>
<body>
<nav id="nav">
<ul>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">书架</a></li>
<li><a href="#" title="">前端</a>
<!-- <ul>
<li>Javascript</li>
<li>jQuery</li>
<li>HTML5</li>
</ul> -->
</li>
<li><a href="#" title="">后端</a></li>
<li><a href="#" title="">移动</a></li>
<li><a href="#" title="">数据库</a></li>
<li><a href="#" title="">云计算</a></li>
<li><a href="#" title="">运维&测试</a></li>
</ul>
</nav>
</body>
</html>

这里有个小主意点:

1
2
3
4
5
6
ul li:hover{
background-color:#666;
}
ul li:hover a{
color: #fff;
}

下拉菜单

这种在li上面实现hover胜在简单,但是有一个问题,如果我要给其中一个选项加上下拉菜单,比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
<nav id="nav">
<ul>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">书架</a></li>
<li><a href="#" title="">前端</a>
<!-- 下拉菜单 -->
<ul>
<li>Javascript</li>
<li>jQuery</li>
<li>HTML5</li>
</ul>
</li>
<li><a href="#" title="">后端</a></li>
<li><a href="#" title="">移动</a></li>
<li><a href="#" title="">数据库</a></li>
<li><a href="#" title="">云计算</a></li>
<li><a href="#" title="">运维&测试</a></li>
</ul>
</nav>

效果会成这样

让下拉菜单纵向显示

1
ul li ul li{float: none;background: #eee;margin-top:2px; }

效果

所以,我们之前不该在li上添加hover 而应该在li 下面的a添加 ,改成这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各种下拉菜单 | 镜心书社</title>
<style>
*{margin: 0;padding:0;}
#nav{background-color: #eee;width: 800px;height: 40px;margin: 0 auto;}
ul{ list-style: none;}
ul li{float: left;line-height: 40px;text-align: center;position: relative;}
ul li a{text-decoration: none;color:#000;display: block;padding: 0 20px;height: 40px;}
ul li a:hover{color: #fff;background-color:#666; }
ul li ul li{float: none;background: #eee;margin-top:2px; }
ul li ul{position: absolute;left: 0px;top:40px;display: none;}
ul li ul a{width: 80px;}
ul li ul li a:hover{background-color:blue;
}
ul li:hover ul {display: block}
</style>
</head>
<body>
<nav id="nav">
<ul>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">书架</a></li>
<li><a href="#" title="">前端</a>
<!-- 下拉菜单 -->
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</li>
<li><a href="#" title="">后端</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Python</a></li>
</ul>
</li>
<li><a href="#" title="">移动</a>
<ul>
<li><a href="#">Android</a></li>
<li><a href="#">IOS</a></li>
<li><a href="#">Unity 3D</a></li>
</ul>
</li>
<li><a href="#" title="">数据库</a></li>
<li><a href="#" title="">云计算&大数据</a></li>
<li><a href="#" title="">运维&测试</a></li>
<li><a href="#" title="">UI设计</a></li>
</ul>
</nav>
</body>
</html>

javascript实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各种下拉菜单 | 镜心书社</title>
<style>
*{margin: 0;padding:0;}
#nav{background-color: #eee;width: 800px;height: 40px;margin: 0 auto;}
ul{ list-style: none;}
ul li{float: left;line-height: 40px;text-align: center;position: relative;}
ul li a{text-decoration: none;color:#000;display: block;padding: 0 20px;height: 40px;}
ul li a:hover{color: #fff;background-color:#666; }
ul li ul li{float: none;background: #eee;margin-top:2px; }
ul li ul{position: absolute;left: 0px;top:40px;display: none;}
ul li ul a{width: 80px;}
ul li ul li a:hover{background-color:blue;
}
</style>
</head>
<body>
<nav id="nav">
<ul>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">书架</a></li>
<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#" title="">前端</a>
<!-- 下拉菜单 -->
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</li>
<li><a href="#" title="">后端</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Python</a></li>
</ul>
</li>
<li><a href="#" title="">移动</a>
<ul>
<li><a href="#">Android</a></li>
<li><a href="#">IOS</a></li>
<li><a href="#">Unity 3D</a></li>
</ul>
</li>
<li><a href="#" title="">数据库</a></li>
<li><a href="#" title="">云计算&大数据</a></li>
<li><a href="#" title="">运维&测试</a></li>
<li><a href="#" title="">UI设计</a></li>
</ul>
</nav>
<script type="text/javascript">
function showsubmenu(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidesubmenu(li){
var submenu = li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}
</script>
</body>
</html>

jQuery实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各种下拉菜单 | 镜心书社</title>
<style>
*{margin: 0;padding:0;}
#nav{background-color: #eee;width: 800px;height: 40px;margin: 0 auto;}
ul{ list-style: none;}
ul li{float: left;line-height: 40px;text-align: center;position: relative;}
ul li a{text-decoration: none;color:#000;display: block;padding: 0 20px;height: 40px;}
ul li a:hover{color: #fff;background-color:#666; }
ul li ul li{float: none;background: #eee;margin-top:2px; }
ul li ul{position: absolute;left: 0px;top:40px;display: none}
ul li ul a{width: 80px;}
ul li ul li a:hover{background-color:blue;
}
</style>
<body>
<nav id="nav">
<ul>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">书架</a></li>
<li class="navmenu"><a href="#" title="">前端</a>
<!-- 下拉菜单 -->
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</li>
<li class="navmenu"><a href="#" title="">后端</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Python</a></li>
</ul>
</li>
<li class="navmenu"><a href="#" title="">移动</a>
<ul>
<li><a href="#">Android</a></li>
<li><a href="#">IOS</a></li>
<li><a href="#">Unity 3D</a></li>
</ul>
</li>
<li><a href="#" title="">数据库</a></li>
<li><a href="#" title="">云计算&大数据</a></li>
<li><a href="#" title="">运维&测试</a></li>
<li><a href="#" title="">UI设计</a></li>
</ul>
</nav>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
})
$(".navmenu").mouseout(function(){
$(this).children("ul").hide();
})
})
</script>
</body>
</html>
AlexZ33 wechat
扫码订阅公众号
如果文章对您有用请随意打赏,谢谢支持!