Créez une barre de navigation simple et belle avec du CSS pur

J'ai appris moi-même à créer un petit style de barre de navigation consciemment simple et beau, en utilisant quelques attributs CSS3. C'est une barre de navigation très simple et belle. Les amis qui l'aiment peuvent y jeter un œil.

Entrez d'abord le code 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%;}

Lorsque vous démarrez, utilisez float pour compléter les éléments de la liste Dans l'effet d'une ligne, le résultat est que l'ordre sera inversé, et il existe toujours sous la forme d'éléments de bloc, donc les autres contenus de la même barre de navigation ne peuvent pas être disposés sur une seule ligne : inline-block résout ce problème. très bien.

D'autres petits points forts consistent à utiliser un élément vide de li comme marque de mouvement, à le positionner absolument à la première position, puis à placer chaque li à travers ~ La classe de déplacement détermine la position de l'élément vide lorsque l'élément est survolé. (Les nouveaux attributs de CSS3 sont vraiment utiles, notamment l'attribut transition)

ps : je voulais utiliser le même principe pour réaliser une transformation de couleur de bas en haut au survol. Mais il semble que ma réflexion soit fausse. J'ai défini quatre éléments vides, j'ai mis leur hauteur à 0 et je les ai positionnés absolument jusqu'au bout, la hauteur devient 60 pixels. Il y a encore un écart entre la réalité et l'imagination.

J'ai finalement tergiversé et parcouru le livre "CSS3 Professional Development Guide" il y a deux jours. Bien que certaines propriétés CSS3 n'aient pas encore été standardisées, l'effet est vraiment génial. Cela brouille également les frontières entre CSS et JS. Ils n'ont plus à faire leur propre travail, mais cela reste beaucoup plus pratique pour les concepteurs.

Les étudiants qui ont besoin d'apprendre CSS, veuillez faire attention au site Web php chinois Tutoriel vidéo CSS De nombreux didacticiels vidéo CSS en ligne peuvent être visionnés gratuitement !       

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!