利用html+css创建一个二级导航菜单

最新推荐文章于 2022-09-20 22:33:33 发布
最新推荐文章于 2022-09-20 22:33:33 发布
阅读量700 收藏 8
点赞数 3
文章标签： python
原文链接：https://my.oschina.net/u/2490061/blog/522842
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

首先我们先来选取一个网站来仿制吧，选用复旦大学官网：复旦大学官网首页

170006_Aotm_2490061.png


第一步：创建放置导航栏的div元素

代码清单1：HTML代码

<body>
<div id="nav1">
    <div id="nav2">
    </div>
</div>
</body>

代码清单2：CSS样式代码

@charset "utf-8";
body {
	margin:0px;
}
#nav1 {
	position:fixed;
	width:100%;
	height:50px;
	background-color:#e2e21d;
}
#nav2 {
	width:60%;
	margin:auto auto;
	height:50px;
	background-color:#898976;
}

代码效果：

123349_1g6e_2490061.png

代码分析：

body：要设置margin为0px，因为浏览器默认body元素与浏览器边框有间距；

div#nav1：背景色为黄色，宽度100%，高度50px，位置固定；

div#nav2：为div#nav1的子元素，设置其背景色为灰色，margin设置为auto使其居中，宽度为60%，高度与#nav1一致；


第二步：利用无序列表ul元素创建一级菜单

代码清单3：HTML代码

<body>
<div id="nav1">
	<div id="nav2">
    	<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>
            <li><a href="#">公共服务</a></li>
        </ul>
    </div>
</div>
</body>

代码效果：

124624_BHcf_2490061.png

可以看到，div#nav2的位置移动了，因为div#nav2下新增了ul子元素，ul元素是块级元素，浏览器默认与父级元素有margin和padding值，故需在CSS样式设置margin和padding值为0px。

同时设置ul list-style-type标签样式为none。

代码清单3：设置margin值为0px

#nav2>ul {
    list-style-type:none;
    margin:0px;
}

代码效果：

130438_ZAbq_2490061.png

代码清单4：设置padding值为0px：

#nav2>ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
}

代码效果：

130925_vW2w_2490061.png

第三步：设置ul子元素li的CSS样式

代码清单5：设置li样式

#nav2>ul>li {
    float:left;
    width:110px;
    border-left:1px solid #f6f6f6;
}
#nav2>ul>li:first-child {
    border-left:none;
}

下面以添加一句代码看一句效果以便深刻理解代码添加后的变动情况。

  1. 设置li float值为left，此时ul高度变为0px，不再是块级元素；

  2. 一开始设置li宽度为10%，但百分数是相对于父元素，也就是ul元素而言的，ul一共有6个li子元素，故设置li宽度值为（100/6）%=16.66666%，不能 四舍五入，而应向下取整，故取16.6%；但这样很不严谨，故取整数值110px；

  3. 设置li左边框，并且第一个li不设置。

第四步：设置链接a元素样式

代码清单6：设置a元素样式

#nav2>ul>li>a {
	display:block;
	line-height:50px;
	text-decoration:none;
	color:#d8d8d8;
	text-align:center;
	font-family:微软雅黑, Geneva, sans-serif;
}
#nav2>ul>li:hover {
	background-color:#4e4e00;
}

  1. 设置display值为block；

  2. 设置链接a元素高度与导航栏高度一致；

  3. 设置文本装饰值为none；

  4. 设置字体颜色；

  5. 设置文本居于li元素中间；

  6. 设置字体；


第五步：设置第二级导航栏

代码清单7：二级菜单

<body>
<div id="nav1">
	<div id="nav2">
    	<ul>
        	<li><a href="#">复旦概况</a>
            	<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>
        		<li><a href="#">访问复旦</a></li>
 		</ul></li>
         	<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>
</div>
</body>

效果图：

142229_jWVr_2490061.png

代码清单8：设置二级菜单CSS样式

#nav2>ul>li>ul {
	list-style-type:none;
	padding:0px;
	float:none;
	background-color:#00578a;
}
#nav2>ul>li>ul>li {
	border-bottom:1px solid #b8b8b8;
}
#nav2>ul>li>ul>li>a {
	text-decoration:none;
	display:block;
	line-height:50px;
	color:#f2f2f2;
	text-align:center;
	font-family:微软雅黑, Geneva, sans-serif;
}
#nav2>ul>li>ul>li>a:hover {
	color:#ebeb00;
}

效果：

162644_Eoqn_2490061.png

代码分析：

  1. 设置二级菜单无序列表样式：无序标签样式设置为none，设置背景色，padding值设为0，浮动设置为左右禁止元素浮动；

  2. 设置li样式：设置下边框，便于区分；

  3. 设置超链接元素：行高与母菜单一致设置为50px，文本居中，无装饰样式，设置字体与颜色，设置display属性为块级；

  4. 设置鼠标停留（hover）时的样式：改变链接字体颜色。

第六步：设置二级菜单初始状态为隐藏，鼠标停留时显示

设置二级无序菜单初始display值为none：

#nav2>ul>li>ul {
	display:none;
}

设置鼠标停留时display值为block：

#nav2>ul>li:hover>ul {
	display:block;
}

效果：

鼠标在导航栏外：

164847_Duoh_2490061.png

鼠标停留在一级导航菜单上时：

165348_ZyxT_2490061.png


完整代码

HTML完整代码：test.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>创建导航栏</title>
<link rel="stylesheet" type="text/css" href="../nav1.css">
</head>

<body>
<header>
<div id="nav1">
	<div id="nav2">
    	<ul>
        	<li><a href="#">复旦概况</a>
            	<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>
        		    <li><a href="#">访问复旦</a></li>
 				</ul></li>
         	<li><a href="#">人才培养</a>
            	<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>
        		    <li><a href="#">继续教育</a></li>
 				</ul></li>
         	<li><a href="#">科学研究</a>
            	<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>
        		    <li><a href="#">学术刊物</a></li>
 				</ul></li>
         	<li><a href="#">机构设置</a>
            	<ul>
            		<li><a href="#">院系专业</a></li>
            		<li><a href="#">科研机构</a></li>
		            <li><a href="#">附属医院</a></li>
        		    <li><a href="#">党政教育</a></li>
                </ul></li>
         	<li><a href="#">文化生活</a>
            	<ul>
            		<li><a href="#">讲座论坛</a></li>
            		<li><a href="#">第二课堂</a></li>
		            <li><a href="#">书院生活</a></li>
        		    <li><a href="#">校园媒体</a></li>
                </ul></li>
         	<li><a href="#">公共服务</a>
            	<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></li>
       	 </ul>
    </div>
</div>
</header>
</body>
</html>

CSS完整代码：nav1.css

@charset "utf-8";
body {
	margin:0px;
}
#nav1 {
	position:fixed;
	width:100%;
	height:50px;
	background-color:#e2e21d;
	min-width:750px;
}
#nav2 {
	width:664px;
	margin:auto auto;
	height:50px;
	background-color:#898976;
}
#nav2>ul {
	position:absolute;
	list-style-type:none;
	margin:0;
	padding:0px;
}
#nav2>ul>li {
	float:left;
	width:110px;
	border-left:1px solid #f6f6f6;
}
#nav2>ul>li:first-child {
	border-left:none;
}
#nav2>ul>li>a {
	display:block;
	line-height:50px;
	text-decoration:none;
	color:#d8d8d8;
	text-align:center;
	font-family:微软雅黑, Geneva, sans-serif;
}
#nav2>ul>li:hover {
	background-color:#4e4e00;
}
#nav2>ul>li>ul {
	display:none;
	list-style-type:none;
	padding:0px;
	float:none;
	background-color:#00578a;
}
#nav2>ul>li:hover>ul {
	display:block;
}
#nav2>ul>li>ul>li {
	border-bottom:1px solid #b8b8b8;
}
#nav2>ul>li>ul>li>a {
	text-decoration:none;
	display:block;
	line-height:50px;
	color:#f2f2f2;
	text-align:center;
	font-family:微软雅黑, Geneva, sans-serif;
}
#nav2>ul>li>ul>li>a:hover {
	color:#ebeb00;
}
/* CSS Document */


转载于:https://my.oschina.net/u/2490061/blog/522842

weixin_34347651
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html表格二级右侧菜单,CSS3二级导航菜单制作步骤详解
weixin_39628105的博客
06-02 871
如果想要实现网页的二级导航，我们可以使用JS技术，动态的显示和隐藏二级菜单，当然也可以使用CSS技术来实现。并且这里推荐使用CSS，因为其效率更高，更流畅。这里将介绍二级菜单的动态显示与隐藏。1结构一般导航的主体我们主要是使用ulli标签首页产品小程序微信企业站服务技术支持产品外包关于我们人才招聘2布局导航的布局，由于子元素要随着父元素，所以对二级菜单选取定位布局。要想让多个li在一行中显示，那么...
利用HTML制作一二级导航菜单
qq_33587638的博客
01-01 4363
可以说现在导航都是利用列表来制作的，废话少说，开始我们的二级导航制作 我们先从一级导航开始，我们在页面中建一个ul列表，id为nav。在前端css命名中导航可以说都是叫nav。接下来我们里面添加8个列表并设置超链接，我们把超链接的目标设置成空链接，代码如下： 好啦，现在我们在浏览器中预览看看 下面这段代码不理解自行度娘，不解释 body{ margin:0px; paddi
HTML简单实现二级菜单栏（看了基本会）
宾有为的博客
02-22 1万+
菜单栏就是所谓的正常状态看不到二级和三级菜单，当你移鼠标到指定的位置后显示出来，因此，实现二级菜单栏只需要两行css代码就可以了。以下是未添加任何特效的效果图 1、打开写网页代码的软件，并新建一个html网页文件，在body里写上html代码： <body> <div class="a"> <ul> <li> <a href="#"&...
前端案例：蓝色CSS3二级导航菜单
python1001的博客
05-13 5757
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 导航 </title> <meta name="Generator" co...
HTML导航栏的四种制作方法,jQuery+CSS3实现四种应用广泛的导航条制作实例详解
weixin_34060561的博客
06-09 5245
导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条(文字下面有横线)等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。接下来将会一一介绍4种应用比较广的导航条，即：高亮显示的导...
bootstrap 侧边栏菜单颜色_前端组件之导航栏
weixin_35474374的博客
01-03 1027
最近想开始写一些关于网页会用到一些组件的文章。对于很多网站而言，导航栏是必不可少的一部分，它对于网页的作用，就好比一本书的目录。如何到达网页的不同部分这时候就很需要导航栏了。对于导航栏，一般分水平导航栏和垂直导航栏两种，垂直导航栏一般而言在电商网页使用很多，相对于垂直导航栏而言，大部分网页更青睐水平导航栏。所以计划了一下，今天先来从网页的“门面”水平导航栏讲起。第一步：先创建放载导航栏的div盒子...
纯html+css制作三级下拉菜单
09-24
总之，纯HTML+CSS制作的三级下拉菜单是一个实用的网页设计技巧，通过HTML的结构化标签和CSS的样式控制，可以创建出用户友好的导航界面。理解这个过程不仅有助于提升网页设计技能，还能为构建更复杂的交互功能打下...
jquery+css实现横向二级下拉菜单
06-06
本教程将深入探讨如何使用jQuery和CSS技术实现一个流畅且效果出色的横向二级下拉菜单。 首先，我们需要理解jQuery和CSS在创建这种菜单中的作用。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理以及...
jquery+css3导航二级图片页面上下滚动
06-05
二级导航菜单通常在鼠标悬停主菜单项时显示，这可以通过CSS的`:hover`伪类和jQuery的事件监听来实现。CSS可以设置初始隐藏状态，如`display:none`，然后通过jQuery在鼠标悬停时改变这一状态。 至于“页面上下滚动”...
CSS3 二级导航菜单的制作的示例
09-24
本示例将详细介绍如何使用CSS3来创建一个响应式的二级导航菜单。 首先，我们需要理解二级导航菜单的基本结构。在HTML中，通常我们会使用`<nav>`标签来定义导航区域，然后利用`<ul>`和`<li>`标签来构建菜单的层次。...
纯CSS二级导航菜单
11-20
创建二级导航菜单的基本步骤如下： 1. **HTML结构**：首先，我们需要一个基础的HTML结构来承载菜单。通常，一级菜单项包含在`<ul>`（无序列表）中，而二级菜单项则作为一级菜单项的子元素，可以用`<li>`（列表项）...
二级导航栏（html、css)
leihao-lester
10-13 1万+
二级导航栏（html、css) 效果图： 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial
使用HTML&css创建二级导航栏
qq_45915712的博客
11-08 9080
使用HTML&css创建二级导航栏创建一级导航栏创建二级导航栏 创建一级导航栏 使用 创建一个无序列表，即为一级导航栏 <ul> <li><a href="#">首页</a></li> <li><a href="#">学校概况</a></li> <li><a href="#">师资队伍</a></li> <--!省略多个li
HTML+CSS制作二级菜单栏
热门推荐
孙婷婷的博客
12-24 2万+
今天我们来练习一下二级菜单栏，说实话比较简单，但是自己一个人写的时候错误百出，逻辑混乱，于是乎网上找了几个案例，借鉴了一下思路，才整明白，鄙人确实不才，哈哈！ 效果图附上： 首先：我已链接了外部样式重置，所以无需自己亲自写： reset.css网上有很多，我用的是下面这个，免费分享给大家，永久有效哦！ 链接：https://pan.baidu.com/s/1doPA17vy--Qt...
HTML--二级菜单的实现
lkfmiaomiao的博客
09-06 5618
二级菜单练习 练习使用display display:none;/block;/inline-block; 练习代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二级菜单操作</title> <style> *...
HTML+ CSS来实现一个简单的二级菜单栏
qq_40992225的博客
09-20 6220
3.最后，就是将二级菜单栏隐藏起来，只有鼠标放到对应的一级菜单上时，二级菜单才会显示。2.接下来，写二级菜单栏，把它添加到一级菜单中的 li 里面。1.首先，我们先创建一级菜单。
html简单的二级菜单制作
小坚的技术博客
10-27 1万+
首先看看效果图 具体实现方法如下： 首先在html中写出一级菜单列表，然后在每个一级菜单中再嵌套一个列表即可创建一个二级菜单。 index.html Title 一级菜单 二级菜单
HTML+CSS做二级导航
Mr_zdk的博客
09-19 4012
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;导航菜单&lt;/title&gt;         &lt;link rel="stylesheet" type="text/css&q
用html+css写一个侧边导航栏加二级菜单
最新发布
07-16
当然可以！以下是一个使用 HTML 和 CSS 创建侧边导栏和二级菜单的示例代码： ```html <!DOCTYPE html> ...这是一个简单的侧边导航栏，其中“关于”菜单有一个二级菜单。你可以根据需要进行样式调整和功能扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值