水平滑动与垂直滑动菜单

水平滑动菜单

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				background-color: #000;
				
			}
			ul li{
				text-shadow: none;
				display: inline-block;
				height: 40px;
			}
			ul li a{
				text-decoration: none;
				color: #fff;
				padding: 10px;
				line-height: 40px;
				text-align: center;
			}
			ul li:hover a{
				background-color:#8F8A8A;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">New</a></li>
			<li><a href="#">Book</a></li>
			<li><a href="#">prices</a></li>
			<li><a href="#">Phone</a></li>
			<li><a href="#">Photographs</a></li>
			<li><a href="#">Tian</a></li>
			<li><a href="#">Name</a></li>
		</ul>
	</body>
</html>

使用行内样式将列表水平展示,然后通过定义背景色和鼠标经过时的背景色实现滑动效果

垂直滑动菜单

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				background-color: #000;
				
			}
			ul li{
				text-shadow: none;
				height: 40px;
			}
			ul li a{
				text-decoration: none;
				color: #fff;
				padding: 10px;
				line-height: 40px;
				width: 100%;
				display: block;
			}
			ul li:hover a{
				background-color:#8F8A8A;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="https://www.w3school.com.cn/css/css_navbar_horizontal.asp">Home</a></li>
			<li><a href="#">New</a></li>
			<li><a href="#">Book</a></li>
			<li><a href="#">prices</a></li>
			<li><a href="#">Phone</a></li>
			<li><a href="#">Photographs</a></li>
			<li><a href="#">Tian</a></li>
			<li><a href="#">Name</a></li>
		</ul>
	</body>
</html>

原理与水平滑动标签一样

相关推荐
薛定谔的算法13 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku13 小时前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀69613 小时前
2025-35st-w-日常开发总结
前端
我是日安13 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
小lan猫13 小时前
React学习笔记(一)
前端·react.js
晨米酱13 小时前
JavaScript 中"对象即函数"设计模式
前端·设计模式
拜无忧13 小时前
【教程】Nuxt v4 入门指南与实践 (vue前端角度开发)
前端·nuxt.js
云枫晖13 小时前
手写Promise-什么是Promise
前端·javascript
拜无忧13 小时前
html,svg,花海扩散效果
前端·css·svg
DevUI团队13 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能