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

最新推荐文章于 2024-11-19 11:54:09 发布
最新推荐文章于 2024-11-19 11:54:09 发布
阅读量759 收藏 8
点赞数 21
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woyinyuebofangqi/article/details/143425129
版权

8.1 水平顶利用部导航栏


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

水平菜单导航栏是网站设计中应用范围最广的导航设计，一般放置在页面的顶部。水平导航适用性强，几乎所有类型的网站都可以使用，设计难度较低。
如果导航过于普通，无法容纳复杂的信息结构，就需要在内容块较多的情况下，结合下拉子导航使用。


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

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

ul,ol{
				list-style-type: none;
				padding: 0;
				margin: 0;
				}

8.1.3 列表样式的设计

此时会带有<ul>元素的默认样式，即每个列表选项前面有实心点标记，可以利用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 纵向侧边导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<nav>
			<div id="nav"></div>
			<h3 class="tit">所有商品分类</h3>
			<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>
		</nav>
	</body>
</html>


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 列表样式的设计

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			nav{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav"></div>
			<h3 class="tit">所有商品分类</h3>
			<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>
		</nav>
	</body>
</html>


8.2.1.4 超链接样式的设计

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			nav{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				line-height: 30px;
				display: block;
				width: 150px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav"></div>
			<h3 class="tit">所有商品分类</h3>
			<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>
		</nav>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			nav{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				line-height: 30px;
				display: block;
				width: 150px;
				text-align: center;
			}
			a:link,a:visited{
				background-color: #eeeeee;
				color: #33cc00;
			}
			a:hover,a:active{
				background-color: #33cc00;
				color: #eeeeee;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav"></div>
			<h3 class="tit">所有商品分类</h3>
			<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>
		</nav>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			nav{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				line-height: 30px;
				display: block;
				width: 150px;
				text-align: center;
			}
			a:link,a:visited{
				background-color: #eeeeee;
				color: #33cc00;
			}
			a:hover,a:active{
				/* background-color: #33cc00; */
				/* color: #eeeeee; */
				background-image: url(img/bg.JPG);
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav"></div>
			<h3 class="tit">所有商品分类</h3>
			<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>
		</nav>
	</body>
</html>


8.3 底部固定导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>底部导航栏</title>
		<style type="text/css">
			/*8.3.2*/
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
			/*8.3.4*/
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-decoration: none;
				text-align: center;
			}
			/*8.3.5*/
			a:link,a:visited{
				background-color: #0000ff;
				color: #ffff00;
			}
			a:hover,a:active{
				background-color: #ffff00;
				color: #0000ff;
			}
			/*8.3.3*/
			.fix-footer{
				position: absolute;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<nav>
			<div class="fix-footer">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">前端</a></li>
					<li><a href="#">后台</a></li>
					<li><a href="#">移动应用</a></li>
				</ul>
			</div>
		</nav>
	</body>


8.3.1 导航栏的创建

底部导航，顾名思义是放在页脚部位，是网站设计中一种辅助导航。底部导航应用性不是很广，比较常出现在一些活动或个性化的网站当中。并且，底部导航被广泛使用的并不唐在PC端中，而是在移动端。如果在PC端中采用底部导航的形式，一般都是采用固定的方式。
底部导航可以减少用户的使用成本，但对于结构复杂有二级或三级导航的网站，就不是很合适。而且，用户浏览的习惯都是从上到下、从左往右的，将导航放置底部，这样的设计比较挑战用户的使用习惯。所以，很多网站在设计的时候首页导航会放在底部，其后的导航就会固定到顶部。

8.3.2 列表样式的设计

在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<u>配合列表选其中选项内容使用超链接的形式，链接地址当前设置为空链接。代码

ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}

8.3.3 菜单固定底部的设计

为了美化文字内容的外观，可以设置 div 的高度、宽度、背景、边框和文本对齐方式为了使导航菜单始终处于页面的最上层，需要设置z-index属性的优先值。为了使导航韡固定于页面底部，需要设置位置属性 position 和各个方向的位置值。代码如下:

.fix-footer{
				position: absolute;
				bottom: 0;
			}


8.3.4 超链接样式的设计

利用 CSS 为超链接重新设置样式，对超链接的a:link 和 a:visited 进行设置，表示超链接未被访问和已访问状态。然后将其display属性设置为block，使得超链接成为块级元素代码如下:

a{
				display: block;
				width: 80px;
				padding: 10px;
				text-decoration: none;
				text-align: center;
			}


8.3.5 鼠标事件

利用 CSS 为 a:hover 和 a:active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。代码如下:

a:link,a:visited{
				background-color: #0000ff;
				color: #ffff00;
			}
			a:hover,a:active{
				background-color: #ffff00;
				color: #0000ff;
			}


8.4 综合案例——优名养生馆


8.4.1 封面页的设计与实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style type="text/css">
			body{
				background-image: url(img/bg.jpg);
			}
			ul{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			li{
				width: 25%;
				float: left;
				line-height: 50px;
			}
			img{
				margin-top: 70px;
				margin-right: 40px;
			}
			.footer{
				height: 50px;
				width: 100%;
				background-image: url(img/footer-bg.jpg);
				border-top: 3px solid gray;
				text-align: center;
				z-index: 9998;
				position: fixed;
				bottom: 0;
				left: 0;
			}
			.footer-top{
				height: 90px;
				width: 90px;
				text-align: center;
				line-height: 90px;
				z-index: 9999;
				position: fixed;
				bottom: 0;
				left: 45%;
			}
			.footer-top a{
				border-radius: 90px;
			}
			.footer-top a:link,a:visited{
				display: block;
				font-size: 20px;
				color: brown;
				text-decoration: none;
				font-weight: bold;
				border-top: 3px solid gray;
				background-image: url(img/footer-top-bg1.jpg);
			}
			.footer-top a:hover{
				background-image: url(img/footer-top-bg2.jpg);
				color: white;
			}
			.footer a:link,a:visited{
				display: block;
				font-size: 20px;
				color: brown;
				text-decoration: none;
				font-weight: bold;
			}
			.footer a:hover{
				background-color: darkgray;
				border-left: 2px solid white;
				border-right: 2px solid white;
				font-size: 16px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<marquee direction="right" scrollamount="20">
				<img src="img/marquee1.jpg"/>
				<img src="img/marquee2.jpg"/>
				<img src="img/marquee3.jpg"/>
			</marquee>
		</div>
		<nav>
			<div class="footer-top">
				<a href="index.html">进入官网</a>
			</div>
			<div class="footer">
				<ul>
					<li><a href="#">奇幻世界</a></li>
					<li><a href="#">主题风采</a></li>
					<li><a href="#">加盟相关</a></li>
					<li><a href="#">友情推荐</a></li>
				</ul>
			</div>
		</nav>
	</body>


8.4.2 主页的设计与实现

 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>花名养生馆</title>
		<style>
		body {
			background-image: url(img/bg.jpg);
		}
		.all {
			margin: 0px auto;
			width: 900px;
		}
		.top {
			width: 900px;
			height: 225px;
			background-image: url(img/top-bg.jpg);
		}
		.cent {
			width: 320px;
			margin-left: auto;
			margin-right: auto;
			font-size: 58px;
			font-family: "楷体";
			color: lemonchiffon;
			font-style: italic;
		}
		.nav {
			width: 200px;
			float: left;
			margin-top: 30px;
			font-size: 20px;
			font-weight: bold;
			color: saddlebrown;
		}
		.main {
			width: 700px;
			height: 300px;
			float: left;
			margin-top: 10px;
		}
		.footer{
			font-size: 14px;
			font-weight: bold;
			color: brown;
			text-align: center;
			clear: both;
			background-image: url(img/footer-bg.jpg);
		}
		p{
			color: brown;
			font-size: 16px;
		}
		img{
			margin: 15px;
		}
		ul{
			list-style-type: none;
		}
		li{
			height: 22px;
		}
		a:link{
			font-size: 16px;
			text-decoration: none;
			color: brown;
		}
		a:hover{
			background-color: burlywood;
			color: white;
		}
		</style>
		</head>
		<body>
			<div class="all">
				<div class="top">
					<br>
					<div class="cent">优名养生馆</div>
				</div>
				<nav>
					<div class="nav">
						<table>
							<tr>养生之道</tr>
							<tr>
								<ul>
									<li><a href="#">运动养生</a></li>
									<li><a href="#">四季养生</a></li>
									<li><a href="#">健康检测</a></li>
								</ul>
							</tr>
							<tr>中医养生</tr>
							<tr>
								<ul>
									<li><a href="#">经络养生</a></li>
									<li><a href="#">体质养生</a></li>
									<li><a href="#">特色疗法</a></li>
								</ul>
							</tr>
						</table>
					</div>
				</nav>
				<div class="main">
					<img src="img/main.jpg" align="left" />
					<p>&emsp;&emsp;古人云：善养生者，上养神智，中养形态，下养筋骨。</p>
					<p>&emsp;&emsp;养生不是简单的体育锻炼、也不是吃一顿营养套餐、打一套太极拳。养生是以调阴阳、和气血、保精神为原则，运用调神、引气导络、四时调摄、食养、药养、节欲、辟谷等多种方法，达到保养、调养生命的一种行为。</p >
					<p>&emsp;&emsp;养生是养护生命的意思，即根据人体生命过程的活动规律所进行的物质与精神的身心养护活动。既包括生理层面的养生，也注重身体机能的维护和康复；也包括心理层面的养生，腔调内在精神的平衡和谐。按照层次划分，华夏层面的养生包括养颜、养体、养老；心理层面的养生包括养心、养性、养神。</p >
				</div>
				<hr />
				<div class="footer">版权所有&copy;优名养生馆</div>
			</div>
		</body>
	</html>

 

业余绳匠
关注
第八章 利用CSS制作导航栏菜单
whitesandcnm的博客
09-26 3919
水平顶部导航栏（Horizontal Top Navigation Bar）是网页设计中常用的一种导航栏布局，通常位于页面的顶部，以水平的方式排列导航选项。这种布局便于用户快速访问网站的主要部分。常见的设计元素包括菜单项、图标、搜索框、以及用户信息等。
第八章 利用CSS制作导航栏
2301_81876587的博客
11-11 1125
响应式设计是指网页能够根据不同设备屏幕尺寸和分辨率自适应调整布局和样式，以确保在手机、平板和桌面等设备上都能提供良好的用户体验。
纯CSS打造的菜单栏
10-29
效果不错的CSS打造的菜单栏，里面有很多属性，包括浏览器器之间的兼容性都是不错的
css menu
ayaya
02-19 243
[code="java"] 二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU /* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { ...
第8章利用CSS制作导航菜单
yubnm99的博客
11-13 506
而且，用户浏览的习惯都是从上到下、从左往右的，将导航放置底部，这样的设计比较挑战用户的使用习惯。为了美化文字内容的外观，可以设置 div 的高度、宽度、背景、边框和文本对齐方式为了使导航菜单始终处于页面的最上层，需要设置z-index属性的优先值。在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<u>配合列表选其中选项内容使用超链接的形式，链接地址当前设置为空链接。如果导航过于普通，无法容纳复杂的信息结构，就需要在内容块较多的情况下，结合下拉子导航使用。鼠标悬停显示下拉菜单。
CSS 导航菜单
boonyaxnn的博客
03-12 404
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } a:link, a:visited { display: block; width: 180px; height:30px;
CSS menu
raineo的专栏
07-16 539
  #navigation {width:182px; padding:0px; margin:0px; text-align:left}#navigation ul {list-style-type:none;margin:0px;padding:0px;}#navigation ul li { padding:0px; margin:0px; /* */}#navigation ul li a
HTML·第八章 利用CSS制作导航栏菜单
最新发布
MortalTom的博客
11-19 2909
水平顶部导航栏（Horizontal Top Navigation Bar）是网页设计中常用的一种导航栏布局，通常位于页面的顶部，以水平的方式排列导航选项。这种布局便于用户快速访问网站的主要部分。常见的设计元素包括菜单项、图标、搜索框、以及用户信息等。
CSS菜单栏 超级强大
05-07
各式各样的CSS菜单栏 实用加实用 谢谢支持
纯CSS多级菜单(横向)
07-14
纯CSS多级菜单(横向)，HTML代码和CSS代码。使用时直接拷贝到网页即可
css+div 菜单
03-15
NULL 博文链接：https://guona.iteye.com/blog/328184
CSS+HTML实现菜单栏
lunabar的博客
09-10 595
ul不能用flex布局，虽说li不用计算宽度（弹性布局），但是ul没有设高度，li+二级菜单ul时，会撑开整个li高度，那么ul就是最长li的那个高度。a.无浮动   b.无position   c.有宽度 d.display:block。li只能用float，ul没有设高度，子盒子float => 父盒子高度坍塌为0。felx设置在父上，好处是子弹性布局（内部盒子宽度自行调整排列）选择器1：hover 选择器2{ }  鼠标放1上，设置2样式。选择器1：hover{ }  鼠标放1上，设置1样式。
css垂直菜单栏
随心而为的博客
09-28 1416
简单的垂直菜单栏
html+css实现菜单栏
weixin_42943220的博客
12-20 1235
html+css实现二级菜单栏 <html> <head><title></title></head> <body> <style> #titlebar { padding-top:0; padding-left:0; padding-right:0; background-color:gre...
CSS 导航栏
梁辰兴的博客
09-20 2759
CSS导航栏是网站中一个基本的组成部分，它能够快速帮助用户进行需求选择，也是网站中不可或缺的一部分。CSS导航栏一般由选项列表、子选项列表和搜索框等组成。选项列表是可以点击的链接，子选项列表是鼠标滑过选项列表时出现的更详细的列表，搜索框便于用户搜索目标内容。除此之外，还可以添加LOGO等元素来增加导航栏的个性化。CSS可以设置导航栏的各种外观，包括背景色、宽度、高度、边框等，通过调整这些属性可以使得导航栏更加美观易用。
css---如何制作菜单栏（附加二级菜单栏）
weixin_45323349的博客
04-14 889
<html> <head> <!--line-height 把字体的所占的空间高度也变成了40--> <title>菜单导航</title> <link rel= "stylesheet" href = st.css type="text/css" /> </head> <body> <ul class = "mune"&
CSS导航栏菜单制作大全
寂寞的博客
03-02 2498
1.垂直导航栏看代码：<style type="text/css"> *{margin:0; padding:0; font-size:14px;} a{color:#333;text-decoration:none} .nav li a{ display:block; text-indent:20px; height:30px; line-height:30px; width:120px; bac
纯CSS3实现的网页底部固定导航菜单特效
资源摘要信息:"css3网页底部固定导航特效代码" 知识点: 1. CSS3概念及特性 CSS3是层叠样式表（Cascading Style ...通过理解并掌握上述知识点，开发者可以制作出既美观又实用的导航菜单，提升网站的整体用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值