纯css做一个简单好看的导航栏

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了纯css做一个简单好看的导航栏，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2023字，纯文字阅读大概需要3分钟。

内容图文

先上代码 html的：

<nav>
		<ul>
			<li>哈哈哈</li>
			<li>吼吼吼</li>
			<li>嘿嘿嘿</li>
			<li>嘎嘎嘎</li>
			<li class="move"></li>
			<!--<li class="fly fly1"></li>
			<li class="fly fly2"></li>
			<li class="fly fly3"></li>
			<li class="fly fly4"></li>
			-->
		</ul>
	</nav>

css的：

nav,
ul,
li {
	padding: 0;
	margin: 0;}
nav {
	position: relative;
	left: 35%;
	top: 20px;
	
	width: 30%;
	height: 60px;
	background-color: #66CCFF;
	
	box-sizing: border-box;
	display: inline-block;
	}
ul {
	width: 100%;
	height: 60px;
	vertical-align: middle;
	}
li {
	display: inline-block;
	
	width: 20%;
	text-align: center;
	height: 60px;
	line-height: 60px;
	cursor: pointer;
	color: #000000;
	
	transition: color 0.4s ease-in-out;
	}
li:hover {
	color: #FFFFFF;}
.move {
	display: inline-block;
	border: 4px solid #FF3333;
	height: 0px;
	background-color: #FF3333;
	
	position: absolute;
	left: 0;
	top: 56px;
	
	transition: left 0.4s ease-in-out;}
li:nth-child(1):hover~.move {
	left: 0;}
li:nth-child(2):hover~.move {
	left: 20%;}
li:nth-child(3):hover~.move {
	left: 40%;}
li:nth-child(4):hover~.move {
	left: 60%;}

开始做的时候，用float来完成列表项在一行的效果，这样的结果就是顺序会颠倒，而且还是以块元素形式存在，所以同一导航栏其他内容无法排在一行，display：inline-block很好的解决了这一点。

其他小亮点的使用就是，用一个li的空元素当做用来移动的标识，把他绝对定位到第一个位置，然后通过~来设置每个li元素的悬停时候move类这个li空元素的位置。（css3的新属性真的很好用，尤其是过渡tratition属性）

ps：本想用同样的原理，来实现当悬停时，实现从下到上的一个颜色变换。不过好像自己的思路不对，我设了四个空元素，把他们高度定为0，绝对定位到底，当悬停时高度变为60px，事实和想象还是有距离。

前两天终于拖沓的略读了《css3专业开发指南》这本书，css3的好多属性虽然有些还没有被规范使用，但效果真的很棒。也更加模糊了css，js之间的分界，不再是各管各事，不过对设计的人来说还是方便了不少。

需要学习CSS的同学请关注Gxl网CSS视频教程，众多css在线视频教程可以免费观看！

以上就是纯css做一个简单好看的导航栏的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的纯css做一个简单好看的导航栏全部内容，希望文章能够帮你解决纯css做一个简单好看的导航栏所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端