Web前端开发实战4：导航菜单(一)

最新推荐文章于 2024-08-18 15:49:27 发布

life is wonderful

最新推荐文章于 2024-08-18 15:49:27 发布

阅读量1.2w

点赞数 17

分类专栏： Web Web前端开发实战文章标签： Web前端 HTML+CSS+JS实战导航导航菜单

本文链接：https://blog.csdn.net/erlian1992/article/details/50445997

版权

Web前端开发实战同时被 2 个专栏收录

12 篇文章 26 订阅

订阅专栏

Web

11 篇文章 2 订阅

订阅专栏

在前面的博文中我们提到横向一级菜单，这里我们来看看导航菜单。导航菜单种类很多，但是制作原理都是大同

小异的，这里看的比二级下拉式菜单还简单。来看一些网站上的导航菜单：

垂直导航菜单：

水平导航菜单：

一垂直菜单

制作原理：(1)用无序列表构建菜单；(2)<a>标签的设置：ul li a{display:block;}。定义的关键是将<a>标签设置为

块元素。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航菜单</title>
<style type="text/css">
/*CSS全局设置*/
*{
   margin:0;
   padding:0;
   font-size:16px;
   font-family:"微软雅黑";
}
.nav{
   height:200px;
   width:90px;
   margin-top:50px;
   margin-left:10px;
}
.nav ul{
   list-style:none;
}
.nav li a{
   background-color:#EEEEEE;
   text-decoration:none;
   color:#000000;
   /*设置的关键*/
   display:block;
   width:90px;
   height:40px;
   line-height:40px;
   text-align:center;
   margin-bottom:1px;
}
.nav li a:hover{
   background-color:#FF6600;
   color:#FFFFFF;
}
</style>
</head>

<body>
<div id="nav" class="nav">
     <ul>
	<li><a href="#">网站首页</a></li>
	<li><a href="#">课程大厅</a></li>
	<li><a href="#">学习中心</a></li>
	<li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>
</body>
</html>

效果展示：

初始化状态或鼠标离开的状态：

鼠标放上去的状态：

二水平菜单

制作原理：在垂直菜单的基础上，将li元素进行左浮动设置。由于li元素浮动脱离原来的文档流会失去宽和高，因

此一定要在a元素上使用display:block属性将其变为块级元素，然后进行宽和高的设置。

只改变CSS样式代码：

/*CSS全局设置*/
*{
   margin:0;
   padding:0;
   font-size:16px;
   font-family:"微软雅黑";
}
.nav{
   height:40px;
   margin-top:50px;
   margin-left:10px;
}
.nav ul{
   list-style:none;
}
/*设置的关键*/
.nav li{
   float:left;
}
.nav li a{
    background-color:#EEEEEE;
    text-decoration:none;
    color:#000000;
    display:block;
    width:90px;
    height:40px;
    line-height:40px;
    text-align:center;
    margin-right:1px;
}
.nav li a:hover{
    background-color:#FF6600;
    color:#FFFFFF;
}

效果展示：

三圆角菜单

制作原理：在水平菜单的基础上我们进行CSS圆角属性的设置，但是IE6,7,8浏览器并不支持这个属性，制作一定

要考虑浏览器的兼容性，在这里我们使用圆角属性。解决不兼容的方法就是我们可以裁剪圆角背景图作为每个li元素

的背景即可。

完整的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航菜单</title>
<style type="text/css">
/*CSS全局设置*/
*{
   margin:0;
   padding:0;
   font-size:16px;
   font-family:"微软雅黑";
}
.nav{
   height:50px;
   margin-top:20px;
   margin-left:10px;
}
.nav ul{
   list-style:none;
   height:50px;
   border-bottom:10px solid #FF6600;
   padding-left:30px;
}
.nav li{
   float:left;
   margin-top:10px;
}
.nav li a{
    background-color:#EEEEEE;
    text-decoration:none;
    color:#000000;
    display:block;
    width:90px;
    height:40px;
    line-height:40px;
    text-align:center;
    margin-left:1px;
    /*设置圆角属性,IE6,7,8不支持*/
    border-top-left-radius:15px;
    border-top-right-radius:15px;
}
.nav li a:hover,.nav li a.on{
    background-color:#FF6600;
    color:#FFFFFF;
}
</style>
</head>

<body>
<div id="nav" class="nav">
     <ul>
	<li><a class="on" href="#">网站首页</a></li>
	<li><a href="#">课程大厅</a></li>
	<li><a href="#">学习中心</a></li>
	<li><a href="#">经典案例</a></li>
	<li><a href="#">关于我们</a></li>
    </ul>
</div>
</body>
</html>

效果展示：

初始化状态或鼠标离开的状态：