• • • • • LIRE 3 minutes

Aperçu

Thème: CSS3
Difficulté: Débutant
Temps d’exécution estimé: 20 min

Dans ce tutoriel, nous coderons cela en CSS3 pur Le menu de navigation vous pouvez trouver cela dans Interface utilisateur impressionniste.

Étape 1 – Balisage HTML

Nous allons Faire une liste non ordonnée avec un élément de liste et une balise d’ancrage pour chaque lien de menu. Pour créer le sous-menu, ajoutez une autre liste non ordonnée à la liste.


<ul class="menu">

	<li><a href="#">My dashboard</a></li>
	<li><a href="#">Likes</a></li>
	<li><a href="#">Views</a>

		<ul>
			<li><a href="#" class="documents">Documents</a></li>
			<li><a href="#" class="messages">Messages</a></li>
			<li><a href="#" class="signout">Sign Out</a></li>
		</ul>

	</li>
	<li><a href="#">Uploads</a></li>
	<li><a href="#">Videos</a></li>
	<li><a href="#">Documents</a></li>

</ul> <!-- end .menu -->


Étape 1

Nous allons commencer à supprimer la marge, l’espacement, la bordure et le contour de tous les éléments du menu. Ensuite, nous ajoutons une largeur et une hauteur fixes au menu, des coins arrondis et des dégradés CSS3. Pour aligner les liens horizontalement, les listes sont déplacées vers la gauche. Nous devons également définir la position sur relative car nous en avons besoin pour aligner les sous-menus.


.menu,
.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

.menu {
	height: 40px;
	width: 505px;

	background: #4c4e5a;
	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 40px;
}

Nous allons cacher ça Sous-menu temporaire pour faciliter le premier niveau.

Générateur de modèles d’e-mails en ligne

Avec Cartes postales Vous pouvez créer et modifier des modèles d’e-mails en ligne sans aucune connaissance en programmation! Comprend plus de 100 composants pour vous aider à créer des modèles de courrier électronique personnalisés plus rapidement que jamais.

Essayez-le gratuitementAutres produits


.menu ul { display: none; }

étape 2

À Style des liens de menu Nous allons ajouter quelques propriétés CSS de base telles que la police, la couleur, le remplissage, etc. Ensuite, nous allons ajouter une ombre de texte sombre et un dégradé pour créer un effet lisse lorsque la couleur change en flottant. Pour créer le séparateur de lien, ajoutez une bordure à gauche et à droite. Ensuite, nous supprimons la marge gauche du premier lien et la marge droite du dernier lien. Pour l’état flottant, nous ne modifions que la couleur du texte.


.menu li a {
	display: block;
	padding: 0 14px;
	margin: 6px 0;
	line-height: 28px;
	text-decoration: none;

	border-left: 1px solid #393942;
	border-right: 1px solid #4f5058;

	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;

	color: #f3f3f3;
	text-shadow: 1px 1px 1px rgba(0,0,0,.6);

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover &gt; a { color: #8fde62; }

étape 3

Supprimons d’abord cette ligne de code que nous avons ajoutée à la deuxième étape.


.menu ul { display: none; }

Maintenant nous allons Donnez du style au sous-menu. Nous commençons à positionner le sous-menu à 40px du haut et 0px à partir de la gauche de l’élément de menu et ajoutons des coins arrondis en bas. Nous définissons l’opacité sur 0 et la lévitation sur 1 pour créer l’effet de fondu entrant / sortant. Pour l’effet de glissement vers le bas / vers le haut, nous devons définir la hauteur de la liste à 0 pixels lorsqu’elle est masquée et à 36 pixels lorsqu’elle est flottante.

.menu ul {
	position: absolute;
	top: 40px;
	left: 0;

	opacity: 0;
	background: #1f2024;

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;

	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
}

.menu li:hover &gt; ul { opacity: 1; }

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;

	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}

.menu li:hover &gt; ul li {
	height: 36px;
	overflow: visible;
	padding: 0;
}

Nous allons définir la largeur des liens du sous-menu à 100px. Au lieu des marges gauche et droite, nous en ajouterons une inférieure et la supprimerons du dernier lien.


.menu ul li a {
	width: 100px;
	padding: 4px 0 4px 40px;
	margin: 0;

	border: none;
	border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }

Pour y mettre fin, nous devons juste Ajouter une icône à chaque lien de sous-menu. Pour ce faire, nous créons une classe personnalisée pour chacun et ajoutons une image d’arrière-plan.


.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

Étape 4

Conclusion

Nous l’avons créé avec succès menu déroulant CSS3 pur. Si vous avez des questions, faites-le moi savoir dans les commentaires. N’oubliez pas non plus de laisser un commentaire et de le partager avec vos amis. Suivez-nous si vous souhaitez être le premier informé des derniers tutoriels et articles.

Aperçu



Source link

Recent Posts