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

最后更新于:2022-04-01 10:03:22

在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单。导航菜单种类很多,但是制作原理都是大同小异的,这里看的比二级下拉式菜单还简单。来看一些网站上的导航菜单: 垂直导航菜单: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-03-22_56f0b84511456.jpg) 水平导航菜单: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-03-22_56f0b84522a49.jpg) ### 一.垂直菜单制作原理: (1)用无序列表构建菜单; (2)< a >标签的设置:ul 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> ~~~ 效果展示: 初始化状态或鼠标离开的状态: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-03-22_56f0b8453581c.jpg) 鼠标放上去的状态: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-03-22_56f0b84542699.jpg) ### 二.水平菜单 制作原理:在垂直菜单的基础上,将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; } ~~~ 效果展示: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-03-22_56f0b84554899.jpg) ### 三.圆角菜单 制作原理:在水平菜单的基础上我们进行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> ~~~ 效果展示: 初始化状态或鼠标离开的状态: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-03-22_56f0b84567ae9.jpg) 鼠标移上去的状态: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-03-22_56f0b8457ac5c.jpg)
';