10.CSS导航、下拉菜单和提示工具

最新推荐文章于 2022-08-12 15:54:59 发布

小阿宁的猫猫

最新推荐文章于 2022-08-12 15:54:59 发布

阅读量236

点赞数 1

分类专栏： # CSS WEB 文章标签： css 前端 php html css3

本文链接：https://blog.csdn.net/dyjkl/article/details/125827120

版权

WEB 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

这年夏天,风遇见云,萤火虫遇见星光

CSS导航、下拉菜单和提示工具

1.垂直导航栏

右侧图片内容即为一个垂直导航栏，它相较于简单
的HTML菜单更加直观、美观并节省空间。
简单来说，导航栏就是一个链接列表。

(1)导航栏实例

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

(2)去除不必要元素：

ul {
    list-style-type: none;   移除列表前小标志。填充设置为0
    margin: 0;
    padding: 0;
}

(3)范围可选：

a{
    display:block;
    width:60px;
}

显示块元素的链接，让整体变为可点击链接区域，不仅仅是文本

display:block

(4)垂直导航栏实例：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;} 
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;} 

/* 鼠标移动到选项上修改背景颜色 */
li a:hover {           
    background-color: #555;
    color: white;}

(5)全屏高度的固定垂直导航栏：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%;              /* 全屏高度 */
    position: fixed; 
    overflow: auto;          /* 如果导航栏选项多，允许滚动 */

2.水平导航栏

在这里插入图片描述

使用内联(inline)或浮动(float)的列表项可以创建水平导航栏。

(1)内联列表项：

li{
    display:inline;
}

(2)浮动列表项：

li{
    float:left;}    使用浮动块元素彼此相邻
a{
    display:block;   显示块元素的链接，让整体变为可点击链接区域
    width:60px;}     指定一个60像素的宽度

(3)水平导航栏实例：

ul {list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;} 
li {float: left;} 
li a {display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;} 
li a:hover {/*鼠标移动到选项上修改背景颜色 */
    background-color: #111;}

固定水平导航栏：页面滚动,导航栏不动

ul {
    position: fixed;
    top: 0;
    width: 100%;}

3.下拉菜单

比如:
在这里插入图片描述

4.提示工具

提示工具是指在鼠标移动到指定元素后触发提示一段文字或其他内容的效果。

5.演示代码

<!DOCTYPE html>
<html><meta charset="UTF-8">
	<head>
		<title>
			CSS导航、下拉菜单和提示工具
		</title>
		<link rel="stylesheet" type="text/css" href="amiao10.css">
	</head>
	<body>

		<!-- 垂直导航栏 -->
		<div class="col">
			<ul>
				<li> <a href=""> 首页</a> </li>
				<li> <a href=""> 新闻</a> </li>
				<li> <a href=""> 我的</a> </li>
				<li> <a href=""> 关于</a> </li>
			</ul>			
		</div>	

		<!-- 水平导航栏 -->
		<div class="row">
			<ul>
				<li> <a href=""> 首页</a> </li>
				<li> <a href=""> 新闻</a> </li>
				<li> <a href=""> 我的</a> </li>
				<li> <a href=""> 关于</a> </li>
			</ul>			
		</div>

		<!-- 下拉菜单 -->
		<div class="drop">
			<h2>下拉菜单</h2>
			<p>鼠标移动到下方按钮上会显示下拉菜单内容</p>
			<div class="dropdown">
				<button class="dropdownbtn"> 下拉菜单 </button>
				<div class="dropdown-content">
					<a href="">内容1</a>
					<a href="">内容2</a>
					<a href="">内容3</a>
				</div>
			</div>
		</div>
		<div class="tooltip">鼠标移动到此处有惊喜
			<span class="text">这年夏天,风遇见云,萤火虫遇见星光.</span>
		</div>
	</body>
</html>

amiao10.css

/* 创建一个无顺序列表 */
.col ul{
	list-style-type:none;   /*移除列表前小标志。填充设置为0  */
	padding:0;
	margin:0;
	background-color:#d89ff9;
	width:100px;
	position:fixed;
	top:0;
	left:0;	
	text-align: center;
	}

/* 设置具体内容的属性 */
.col a{
	color:rgb(237, 250, 249);
	text-decoration:none;
	font-size:20px;
	display:block;       /* 显示块元素的链接，让整体变为可点击链接区域 */
	text-align:center;
    }

/* 内联标签 */
.col li{
	width:100px;
    }

/* 让鼠标放在文字上颜色会变化 */
.col a:hover{
	background-color:#999;
	color:#fff;
    }

/* 创建一个无顺序列表 */
.row ul{
	position:fixed;
	left:110px;
	top:0;
	list-style-type:none;
	margin:0;
	padding:0;
	background-color:#e37cf5;
    }

/* 使用浮动块元素彼此相邻:横向显示 */
.row li{
	float:left;
	background-color:#effe8a;
    }

/* 设置具体内容的属性 */
.row a{
	display:block;          /* 显示块元素的链接，让整体变为可点击链接区域 */
	width:100px;
	text-decoration:none;
	text-align:center;
	color:rgb(156, 241, 95);	
    }

/* 让鼠标放在文字上颜色会变化 */
.row a:hover{
	background-color:#999;
	color:#fff;
    }

/* 设置下拉菜单的位置 */
.drop{
	position:fixed;
	top:20px;
	left:110px;
    }

/*  */
.dropdown{
	position:relative;
	display:line-block;
    }

/* 设置按钮 */
.dropdownbtn{
	background-color:rgb(188, 137, 247);
	color:white;
	padding:16px;
	font-size:16px;
	border:none;	
    }

/* 下拉的内容 */
.dropdown-content{
	display:none;            /* 默认不展示,鼠标移过去才显示 */
	position:absolute;
	background-color:#f9f9f9;
	width:150px;
    }

/* 设置a标签 */
.dropdown-content a{
	color:#000;
	padding:12px 16px;
	text-decoration:none;
	display:block;
}

/* a标签被覆盖的时候 */
.dropdown-content a:hover{
	background-color:#777;
    }

/* 鼠标放在按钮上,下拉内容自动显示 */ 
.dropdown:hover .dropdown-content{
	display:block;
    }

/* 鼠标放在按钮上,按钮怎么变化 */
.dropdown:hover .dropdownbtn{
	background-color:#666;
    }

/* 设置显示属性 */
.tooltip{
	position:fixed;
	top:400px;
	left:110px;
	display:line-block;
	border-bottom:1px solid black;
    }

/* 设置tooltip中的text */
.tooltip .text{
	visibility:hidden;      	/*不显示 */
	width:300px;
	background-color:rgb(252, 248, 248);
	color:rgb(251, 167, 70);
	text-align:center;
	padding:5px 0;
	position:absolute;
	z-index:1;
    }

/* 鼠标移动到这句话上的变化 */
.tooltip:hover .text{
	visibility:visible;
}

6.演示结果

在这里插入图片描述

小阿宁的猫猫

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
10.CSS导航、下拉菜单和提示工具

1.垂直导航栏(1)导航栏实例(2)去除不必要元素：(3)范围可选：(4)垂直导航栏实例：(5)全屏高度的固定垂直导航栏：2.水平导航栏(1)内联列表项：(2)浮动列表项：(3)水平导航栏实例：3.下拉菜单4.提示工具5.演示代码amiao10.css6.演示结果...
复制链接

扫一扫