Shiqi's Blog

HTML实战：导航栏二级菜单

HTML实战：导航栏二级菜单

1. 框架结构

1
div#menu>ul>(li>a.drop+div.dropdown_1column>div.dropdown_1column-inner>ul>li*4)*4

2. 小结

1.关键代码

Step3 将一级菜单的position设置为relative

1
2
3
4
5
6
7
8
#menu>ul>li {
            width: 160px;
            float: left;
            text-align: center;
            line-height: 45px;
            padding: 0 20px;
            position: relative;
        }

如果不这样做，它的子元素.dropdown_1column 在positon:absolute状态下将会默认相对body元素定位。

Step2 #menu .dropdown_1column的position设置为absolute并将left设置为-999em实现隐藏二级菜单的效果

示例代码：

1
2
3
4
5
#menu .dropdown_1column {
    position: absolute;
    left: -999em;
    width: 110px;  
}

Step3 将一级菜单的:hover与.dropdown_1column绑定，实现将鼠标移至一级菜单时显示二级菜单的效果

示例代码：

1
2
3
4
5
 #menu ul>li:hover .dropdown_1column {
     left:45px;
     top:45px;
     padding-top:5px;
}

2. 实现面板的凹陷效果

其实，原理是利用人类的错觉，在li元素的下方有一个比背景颜色深一点的边框，在li元素的上方有一个背景颜色浅一点的边框，两个边框在一起最终造成了凹陷的效果。

核心代码：

注意事项：上下边框的颜色要和背景颜色接近，否则违和感会很强。

3. 效果演示

4. 源码

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>导航栏二级菜单制作</title>
</head>
<body>
    <style>
        * {
            font-family: Microsoft Yahei;
        }
        li {
            list-style: none;
        }

        #menu {
            width: 900px;
            height: 45px;
            margin: 35px auto 0;
            background: rgba(232, 231, 227,1);
        }

        #menu a {
            text-decoration: none;
            color:rgba(117, 117, 117,1);
        }

        #menu>ul>li {
            width: 160px;
            float: left;
            text-align: center;
            line-height: 45px;
            padding: 0 20px;
            position: relative;
        }

        #menu>ul>li:hover {
            background: rgba(63, 63, 63,1);
        }

        #menu>ul>li:hover a {
            color:white;
        }

        #menu ul>li:hover .dropdown_1column {
            left:45px;
            top:45px;
            padding-top:5px;
        }

        #menu .dropdown_1column {
            position: absolute;
            left: -999em;
            width: 110px;
            
        }

        #menu .dropdown_1column-inner{
            background: rgba(225, 226, 230,1);
            border-radius: 5px;
        }

        #menu ul li ul {
            padding: 0;
        }

        #menu ul li ul li {
            display: block;
            width: 100px;
            margin: 0 auto;
            text-align: center;
            border-bottom: 1px solid rgba(121, 123, 124, 0.178);
            border-top: 1px solid rgb(242, 243, 247);
        }

        #menu ul li ul li:hover {
            color: rgba(233, 104, 107,1);
            cursor: pointer;
        }
    </style>
    <div id="menu">
        <ul>
            <li>
                <a class="drop" href="">最火下载站</a>
                <div class="dropdown_1column">
                    <div class="dropdown_1column-inner">
                        <ul>
                            <li>网站建设</li>
                            <li>网站制作</li>
                            <li>电子商务</li>
                            <li>导航代码</li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a class="drop" href="">网站推荐</a>
                <div class="dropdown_1column">
                    <div class="dropdown_1column-inner">
                        <ul>
                                <li>网站推广</li>
                                <li>网站优化</li>
                                <li>网站制作</li>
                                <li>咨询建议</li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a class="drop" href="">联系作者</a>
                <div class="dropdown_1column">
                    <div class="dropdown_1column-inner">
                        <ul>
                            <li>网络营销</li>
                            <li>关于我们</li>
                            <li>联系我们</li>
                            <li>反馈建议</li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a class="drop" href="">电影推荐</a>
                <div class="dropdown_1column">
                    <div class="dropdown_1column-inner">
                        <ul>
                            <li>你的名字</li>
                            <li>最新大片</li>
                            <li>音乐推荐</li>
                            <li>最新文章</li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>