Make a simple and beautiful navigation bar with pure css

I taught myself to make a small style of navigation bar that is consciously simple and beautiful, using some css3 attributes. It is a very simple and beautiful navigation bar. Friends who like it can take a look.

Let’s start with the code html’s :

<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’s:

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%;}

When we start, use float to complete the effect of listing items in one line , the result is that the order will be reversed, and it still exists in the form of block elements, so other contents of the same navigation bar cannot be arranged in one line. display: inline-block solves this problem very well.

The use of other small highlights is to use a li empty element as a logo to move, position him absolutely in the first position, and then set each Li through ~ The position of the free element of the move class when the element is hovered. (The new attributes of CSS3 are really useful, especially the transition attribute)

PS: I wanted to use the same principle to achieve a color transformation from bottom to top when hovering. But it seems that my thinking is wrong. I set four empty elements, set their height to 0, and positioned them absolutely to the end. When hovering, the height becomes 60px. There is still a gap between reality and imagination.

Two days ago, I finally read the book "CSS3 Professional Development Guide". Although the many attributes of CSS3 have not been used, the effect is really great. It also blurs the boundaries between CSS and JS. They no longer have to do their own thing, but it is still a lot more convenient for designers.

Students who need to learn CSS please pay attention to the php Chinese website CSS Video Tutorial. Many css online video tutorials can be watched for free!       

The above is the detailed content of Make a simple and beautiful navigation bar with pure css. For more information, please follow other related articles on the PHP Chinese website!