先展示一下效果图：

一、代码

1.1 html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--    针对于ie的设置。--><!--[if lt IE 9]><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--><!--保证css在各个浏览器上都有相同的效果，可以写网络上的资源路径，也可以写本地的路径--><link rel="stylesheet" href="../css/normalize.css"><link rel="stylesheet" href="../css/menu3.css"><title>Title</title>
</head>
<body>
<nav id="menu"><header></header><ul class="level-1"><li><a href="page1.html">无人机控制</a><ul class="level-2"><li><a href="javascript:void(0);">1</a></li><li><a href="javascript:void(0);">2</a></li><li><a href="javascript:void(0);">3</a></li></ul></li><li><a href="page2.html">航点规划</a><ul class="level-2"><li><a href="javascript:void(0);">1</a></li><li><a href="javascript:void(0);">2</a></li><li><a href="javascript:void(0);">3</a></li></ul></li><li><a href="page3.html">深度学习</a><ul class="level-2"><li><a href="javascript:void(0);">1</a></li><li><a href="javascript:void(0);">2</a></li><li><a href="javascript:void(0);">3</a></li></ul></li><li><a href="page4.html">无人机调参</a><ul class="level-2"><li><a href="javascript:void(0);">1</a></li><li><a href="javascript:void(0);">2</a></li><li><a href="javascript:void(0);">3</a></li></ul></li></ul>
</nav>
</body>
</html>

1.2 css

#menu{background-color: rgba(255,228,196,0.5);position: fixed;  /* 位置固定 */z-index: 10;  /* 图层的第十层 */top: 0;  /* 紧贴上方 */width: 100%;margin: 0;padding: 0;
}
/* id menu 下的所有ul */
#menu ul{background-color: #ffe4c4;padding-left: 0px;list-style: none;  /* 去掉前面的点*/margin: 0;   /* 确保与上面紧贴 */
}#menu ul li a{color: grey;width: 120px;text-align: center;
}#menu ul.level-1 > li{display: inline-block;
}#menu ul.level-1 > li a{display: block;margin-top: 5px;margin-bottom: 5px;
}#menu ul.level-2{display: none;position: absolute;
}#menu ul.level-1 > li:hover ul.level-2{display: block;
}#menu ul li a:hover{background-color: red;color: white;
}

二、代码分析

2.1 浏览器配置

2.1.1 normalize.css

由于浏览器的不同，可能对css的解析有些偏差，导致相同的代码在不同的浏览器上显示的效果不同，所以需要一个文件使得css文件在不同的浏览器上均有相同的效果。

该文件的绝对路径为：https://github.com/necolas/normalize.css/blob/master/normalize.css

可以在html的head中直接引入该文件。如：

<link rel="stylesheet" href="https://github.com/necolas/normalize.css/blob/master/normalize.css">

也可以将其下载至本地硬盘，通过相对路径引入该文件，如：

<link rel="stylesheet" href="../css/normalize.css">

通过引用该文件，css的修饰将在不同浏览器上产生完全相同的效果。

2.1.2 html5shiv

IE浏览器完全不支持HTML5标签，为了解决该问题，需要在head内写入html判别式，判别是否是IE9以后的版本，若是就载入html5shiv.js文件。

由于该js文件不一定常用，可以使用别人提供的cdn主机资源。

一个提供html5shiv.js的cdn资源网站：https://cdnjs.com/libraries/html5shiv

其中min版本实压缩版本，就是省略空格、注释的版本，因为其体积小，所以加载快，选择该版本。

在html的head部分引入：

   <!--[if lt IE 9]><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]-->

通过if语句，如ie版本大于9，则调用这个js文件。

2.2 html分析

<nav id="menu">...
</nav>

<nav> 标签定义导航链接的部分。

<nav> 元素只是作为标注一个导航链接的区域。

在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

<ul class="level-1"><li><a href="page1.html">无人机控制</a><ul class="level-2"><li><a href="javascript:void(0);">1</a></li><li><a href="javascript:void(0);">2</a></li><li><a href="javascript:void(0);">3</a></li></ul></li>...</ul>

在html中，菜单栏一般均以列表的形式表现出来。

2. css解析

#menu{background-color: rgba(255,228,196,0.5);position: fixed;  /* 位置固定 */z-index: 10;  /* 图层的第十层 */top: 0;  /* 紧贴上方 */width: 100%;margin: 0;padding: 0;
}

将菜单栏紧贴页面最上方固定，并且设置图层在第10层，保证其不会被其他图层覆盖。

#menu ul{background-color: #ffe4c4;padding-left: 0px;list-style: none;  /* 去掉前面的点*/margin: 0;   /* 确保与上面紧贴 */
}

设置在id:menu下的所有ul类的背景颜色，左padding，margin等，设置list-style为none使得列表选项前没有圆圈。

#menu ul li a{color: grey;width: 120px;text-align: center;
}

设置在id:menu下的ul类下的li类下的a的颜色、宽度、字体排版方式。

#menu ul.level-1 > li{display: inline-block;
}

设置在id:menu下类名为level-1的ul，其下一层li（该处的li值得是名为level-1的ul下的li，而不是level-2下的li。），为inline-block排列，就是将原来的纵向排列改为横向排列。

#menu ul.level-1 > li a{display: block;margin-top: 5px;margin-bottom: 5px;
}

设置在id:menu下类名为level-1的ul，其下一层li下的的a以块的形式显示，并且设置上下距离，只有将其设置为块block，才能设置其上下间距。

#menu ul.level-2{display: none;position: absolute;
}

设置在id:menu下类名为level-2的ul，其默认状态为不显示，并且位置是绝对的。

因为在鼠标没有滑动到该区域时，该子菜单不显示。显示的时候该子菜单在菜单栏的下方，位置是绝对的。

#menu ul.level-1 > li:hover ul.level-2{display: block;
}

当id:menu下类名为level-1的ul下的li被鼠标滑到（hover），则名为level-2的ul的显示状态为block，相当于从不可见到可见。

#menu ul.level-1 li a:hover{background-color: red;color: white;
}

当id:menu下的ul下的li下的a被鼠标滑到后，其背景颜色变为红色，字体颜色变为白色。

【前端】菜单栏设计（html、css）相关推荐

web前端课程设计 HTML+CSS+JavaScript旅游风景云南城市网页设计与实现 web前端课程设计代码 web课程设计 HTML网页制作代码
WEB前端网页设计 HTML CSS 网页设计参数 - JavaScripts
JavaScripts注释:单行注释以//开头,在其后添加注释. 多行注释以/*开头,以*/结尾,在中间添加注释. JavaScripts输出方式1:通过alert()函数弹出对话框调用windo ...
大鱼海棠国漫主题HTML前端网页设计成品预览与讲解DIV CSS JS
国漫大鱼海棠主题,本套大作业共计10个页面,页面美观度较高,网页在细节设计上花了很大功夫,如边框.阴影,鼠标滑过效果等,运用的知识点有:Div+CSS.JS轮播图.Table.下拉菜单栏.视频.表单. ...
HTML5期末大作业：商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:商城网站设计--蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码常见网页设计作业题材 ...
HTML+CSS大作业——电影动漫言叶之庭(4页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:电影网站设计--电影动漫言叶之庭(4页) web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码常见网页设计作业题材有个人. 美食. 公司. 学校. ...
静态HTML网页设计作品商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:商城网站设计--蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计文章目录 HTML5期末大作业:商城网站设计--蘑菇街商城(1页) HTML+CS ...
前端交接文档_开发型Web前端和设计型Web前端的区别是什么？
小编说学Web前端,你弄懂开发型Web前端和设计型Web前端的区别了吗?今天千锋广州小编给大家梳理一下设计型Web前端做什么?都要学习什么? 想必大家也会遇到这种情况,要做一个项目,产品经理说产品原型 ...
前端进阶之路: 前端架构设计(2)-流程核心
可能很多人和我一样, 首次听到"前端架构"这个词, 第一反应是: "前端还有架构这一说呢?" 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视 ...
前端总结·基础篇·CSS（二）视觉
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
前端架构设计1：代码核心
现在的前端领域, 随着JS框架, UI框架和各种库的丰富, 前端架构也变得十分的重要. 如果一个大型项目没有合理的前端架构设计, 那么前端代码可能因为不同的开发人员随意的引入各种库和UI框架, 导致代 ...

【前端】菜单栏设计（html、css）

目录