使用 ul li 来实现水平导航菜单 2 examples 弹出菜单和背景覆盖菜单

最新推荐文章于 2023-02-22 10:37:21 发布

weixin_34217711

最新推荐文章于 2023-02-22 10:37:21 发布

阅读量213

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/sanji/blog/62513

本文介绍了一种使用CSS border属性实现水平导航菜单的设计方法。通过精确控制每个元素的尺寸和位置，作者展示了如何创建基本的水平弹出菜单及带有阴影效果的菜单。尽管设计简单，但通过合理的颜色搭配和布局调整，可以显著提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

今天再来一个使用 ul li 实现水平导航菜单的设计。

直接上代码了，还是那句话精确的控制每一个像素，就算是1个像素的误差也会带来视觉效果上的千差万别，现在虽然还很菜，但是这一点肯定不会改变的。在以后做设计的时候更是要这样，希望今后编码的时候能够精益求精哇。像’艺术家’一样浪漫，像’攻程师’一样严谨。

下面贴出代码，第一个水平弹出导航菜单只是在原理上实现了，并没有做色彩的搭配和样式间的协调控制，而第二个水平SHADOW 菜单用了一些小花样，虽然简单但是因为运用了一些色彩的搭配和样式间的控制，感觉就完全不一样咯。具体代码可以直接贴在 TXT 文档中另存为 HTML 文件，用浏览器打开即可运行。

另外这些都是通过 border 控制来实现的。当然也可以通过垫子的方式，这个以后介绍了。CSS 真的是一个非常灵活的东西，需要用心来感受。同样的代码可以用不同的方式来实现，开启自己的头脑风暴，去实现自己的设计吧。

<!DOCTYPE html>
<html>
  <head>
    <title>通过 border 实现水平导航菜单的设计 </title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<style type="text/css">
			
			/* 这个不多说了 精确控制 */
			body{
				margin: 0;
				padding: 0;
			}
			
			.ul-container{
				margin: 0;
				padding: 0;
				width: 600px;
				height: 40px;
				background-color: blue;
			}
			
			/* 设置 padding 消除内部边框 */
			.ul-container ul{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			/* 精确控制每一个像素 21 + 6 + 10 */
			.ul-container ul li{
				float: left;
				width: 140px;
				height: 22px;
				margin: 0 2px ;
				border-top: 10px solid blue; 
				padding: 3px;
				background-color: yellow;
				cursor: pointer;
				text-align: center;
			}
			
			/* 通过 border 控制一定要控制 border-top 否则默认格式会顶着 top */
			.ul-container ul li:HOVER {
				height: 30px;
				border-top: 2px solid blue;
				background-color: black;
				color: white;
			}
			
			/* 华丽分割线 */
			.split-line{
				border-bottom: 2px dashed #F0F6F9;
			}
			
			/* 根据颜色搭配搭配出好看的菜单,DEMO 配色比较纠结，大家谅解，
			下面来一个配好色的菜单，虽然是简单的设计但是通过合理的颜色搭配和布局就能得到非常好的效果 */
			.ul-shadow-navi-container{
				margin: 0;
				padding: 0 20px;
				width: 800px;
				height: 40px;
				background-color: #f3f5f8;
			}
			
			/* 设置 padding 消除内部边框 */
			.ul-shadow-navi-container ul{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			/* 精确控制每一个像素 22 + 4*2 + 10  */
			.ul-shadow-navi-container ul li{
				float: left;
				width: 60px;
				height: 26px;
				margin: 0 2px ;
				border-top: 6px solid #c7d1e0; 
				padding: 4px;
				background-color: #f3f5f8;
				cursor: pointer;
				text-align: center;
				font-family: "微软雅黑";
			}
			
			/* 通过 border 控制一定要控制 border-top 否则默认格式会顶着 top */
			.ul-shadow-navi-container ul li:HOVER {
				border-top-color: #6173a3;
				background-color: #6173a3;
				color: white;
			}
		</style>
  </head>
  
  <body>
  
  	<!-- 采用 border 的方法来实现弹出效果 -->
		<div class="ul-container">
			<ul>
				<li>1</li>				
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		
		<br />
		<!-- 华丽的分割线 -->
		<div class="split-line"></div>
		<br />
		
		<!-- 再来一个非弹出但是也比较有意思的菜单 
			not selected bg color f3f5f8
			not selected border-top c7d1e0
			selected bg color 6173a3
		-->
		
		<div class="ul-shadow-navi-container">
			<ul>
				<li>2000</li>				
				<li>2001</li>
				<li>2002</li>
				<li>2003</li>
			</ul>
		</div>
		
  </body>
</html>

转载于:https://my.oschina.net/sanji/blog/62513