第八章 利用CSS制作导航菜单栏

8.1 水平顶利用部导航栏

8.1.1 简单水平导航栏的设计与实现

水平菜单导航栏是网站设计中应用范围最广的导航设计，一般放置在页面的顶部。水平导航适用性强，几乎所有类型的网站都可以使用，设计难度较低。

如果导航过于普通，无法容纳复杂的信息结构，就需要在内容块较多的情况下，结合下拉子导航使用。

8.1.2 下拉子菜单导航栏的设计与实现

导航菜单中的文字内容和超链接已经完成，用户单击不同的选项可以跳转至指定的页面。

ul,ol{

list-style-type: none;

padding: 0;

margin: 0;

}

8.1.3 列表样式的设计

此时会带有

元素的默认样式，即每个列表选项前面有实心点标记，可以利用CSS在dhead>标签中进行声明，对列表样式进行改变

ul li{

float: left;

}

ul li ol li{

float: none;

}

8.1.4超链接样式的设计

ul li ol{

display: none;

}

ul li:hover ol{

display: block;

}

8.1 .5鼠标事件

a{

display: block;

text-decoration: none;

width: 100px;

padding: 10px;

text-align: center;

}

8.1.6 下拉子菜单导航栏的设计与实现

基本功能和事件

鼠标悬停显示下拉菜单

item.addEventListener('mouseover', function () {

let dropdown = this.querySelector('.dropdown-menu');

if (dropdown) {

dropdown.classList.add('active');

}

});

鼠标移出隐藏下拉菜单

功能：当用户将鼠标从导航项移开时，隐藏下拉子菜单

item.addEventListener('mouseout', function () {

let dropdown = this.querySelector('.dropdown-menu');

if (dropdown) {

dropdown.classList.remove('active');

}

});

8.2 纵向侧边导航栏

8.2.1 简单纵向导航栏的设计与实现

8.2.1.1导航栏的创建

div{

background-color: #33cc00;

width: 150px;

padding: 10px;

}

8.2.1.2 DIV样式的设计

h3{

text-align: center;

color: #eeeeee;

}

8.2.1.3 列表样式的设计

8.2.1.4 超链接样式的设计

8.3 底部固定导航栏

8.3.1 导航栏的创建

底部导航，顾名思义是放在页脚部位，是网站设计中一种辅助导航。底部导航应用性不是很广，比较常出现在一些活动或个性化的网站当中。并且，底部导航被广泛使用的并不唐在PC端中，而是在移动端。如果在PC端中采用底部导航的形式，一般都是采用固定的方式。

底部导航可以减少用户的使用成本，但对于结构复杂有二级或三级导航的网站，就不是很合适。而且，用户浏览的习惯都是从上到下、从左往右的，将导航放置底部，这样的设计比较挑战用户的使用习惯。所以，很多网站在设计的时候首页导航会放在底部，其后的导航就会固定到顶部。

8.3.2 列表样式的设计

在