Maison > Article > interface Web > jQuery+CSS implémente un menu de navigation coulissant code_jquery

jQuery+CSS implémente un menu de navigation coulissant code_jquery

PHP中文网original: 2016-05-16 09:00:312265parcourir

Les menus latéraux sont largement utilisés dans la conception de sites Web, et ce type de menu peut être vu sur de nombreux sites Web. Il peut afficher des informations clés, les rendre plus lisibles et plus belles, et satisfaire la valeur de l'expérience utilisateur !

Aujourd'hui, je vais vous montrer comment utiliser jquery et css pour implémenter un menu coulissant latéral.

Affichage de l'effet Téléchargement du code source

Afin de créez un menu de navigation, examinons d'abord la structure HTML :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation Menu Demo</title>
<link rel="stylesheet" href=" 
<link href=&#39;https://fonts.googleapis.com/css?family=Montserrat&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;>
<link rel="stylesheet" href=" 
<script src=" 
</script>
<script src="script.js">
</script>
<link rel="stylesheet" href="style.css">
</head><body>
<!-- Content goes here -->
</body>
</html>

Tout d'abord, nous référençons normalize.css comme style par défaut pour nous assurer que notre menu est affiché sur chaque navigateur. L'appareil est le même. Nous utilisons l'icône de police fontawesome pour afficher l'icône vers le bas de l'élément de menu. Nous devons également référencer jQuery pour implémenter le changement de menu.

Boutons du panneau

Chaque bouton de navigation du panneau du site Web est similaire. Il s'agit souvent d'une police d'icônes comme fontawesome, mais dans ce tutoriel, je souhaite ajouter une animation, nous le faisons donc avec des lignes horizontales. Fondamentalement, notre bouton est une étendue contenant trois div affichés sous forme de lignes horizontales. Le style

<span class="toggle-button">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-middle"></div>
<div class="menu-bar menu-bar-bottom"></div>
</span>

ressemble à ceci :

.toggle-button {
position: fixed;
width: 44px;
height: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 80%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #555;
border-bottom: none;
top: 0;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #555;
margin-top: 7px;
margin-bottom: 7px;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #555;
border-top: none;
top: 22px;
}
.button-open .menu-bar-top {
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
transform: rotate(-45deg) translate(8px, -7px);
transition: .5s;
}

Le bouton a une position fixe et fait défiler la page lorsqu'il ne bouge pas. Il a également un z-index de : 15 pour garantir qu'il reste toujours au-dessus des autres éléments qui se chevauchent. Le bouton se compose de trois lignes horizontales. Chaque ligne horizontale a son propre style et nous y ajoutons le style .menu-bar. Les styles restants de la classe ont été déplacés vers des fichiers de styles distincts. Lorsque l'animation se produit, nous ajoutons une classe .button-open. Nous citons jQuery, qui peut être plus pratique à mettre en œuvre :

$(document).ready(function() {
var $toggleButton = $(&#39;.toggle-button&#39;);
$toggleButton.on(&#39;click&#39;, function() {
$(this).toggleClass(&#39;button-open&#39;);
});
});

Les débutants ne connaissent peut-être pas jQuery, laissez-moi vous expliquer ce qui se passe. Tout d’abord, nous initialisons une variable appelée $togglebutton, qui contient notre bouton. Nous le stockons sous forme de variable, puis nous créons un moniteur d'événements pour écouter les clics sur les boutons. Chaque fois que vous cliquez dessus, l'écouteur d'événement exécutera la fonction de méthode toggleclass() pour activer/désactiver .button-open.

.button-open Nous pouvons utiliser cela pour changer la façon dont ces éléments sont affichés. Nous utilisons les fonctions CSS3 translate() et rotate() pour faire pivoter les lignes horizontales supérieure et inférieure de 45 degrés, et la ligne horizontale du milieu disparaît progressivement. Vous pouvez cliquer sur le bouton dans la démo pour voir l'effet.

Menu latéral

La structure HTML du menu coulissant latéral est la suivante :

<div class="menu-wrap">
<div class="menu-sidebar">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li class="menu-item-has-children"><a href="#">Click The Arrow</a>
<span class="sidebar-menu-arrow"></span>
<ul class="sub-menu">
<li><a href="#">Alignment</a></li>
<li><a href="#">Markup</a></li>
<li><a href="#">Comments</a></li>
</ul>
</li>
<li><a href="#">Courses</a></li>
<li><a href="#">Get In Touch</a></li>
</ul> 
</div>
</div>

Non expliqué dans détail ici Pour chaque style de menu, regardons le div .menu-wrap. Son style est le suivant :

.menu-wrap {
background-color: #6968AB;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}

Sa position est fixe, le menu défile donc toujours au même endroit. La hauteur est fixée à 100%. Notez que la marge gauche est définie sur un nombre négatif, ce qui fait disparaître le menu de la vue. Afin de lui donner un effet d'apparence, nous utilisons jquery pour appeler une autre classe pour l'afficher et la fermer. Le code JavaScript est le suivant :

$(document).ready(function() {
var $toggleButton = $(&#39;.toggle-button&#39;),
$menuWrap = $(&#39;.menu-wrap&#39;);
$toggleButton.on(&#39;click&#39;, function() {
$(this).toggleClass(&#39;button-open&#39;);
$menuWrap.toggleClass(&#39;menu-show&#39;);
});
});

On ajoute une variable $menuwrap qui contient tous les éléments du menu, et on utilise le même événement pour créer le bouton. Ce .menu-show a une marge gauche de 0 et ajoute des effets d'ombre de boîte.

.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #B9ADAD;
}

Sous-menus et liens

Vous remarquerez peut-être qu'un élément de liste a la classe .menu-item-has-children. Contient des sous-menus. En même temps, après le lien, il y a une classe .sidebar-menu-arrow.

<li class="menu-item-has-children"><a href="#">Click The Arrow</a>
<span class="sidebar-menu-arrow"></span>
<ul class="sub-menu">
<!-- List items -->
</ul>
</li>

span a un package de pseudo-éléments ::after qui implémente des flèches fontawesome. Par défaut, les sous-menus sont masqués et n'apparaissent qu'en cliquant sur le menu parent :

$(document).ready(function() {
var $sidebarArrow = $(&#39;.sidebar-menu-arrow&#39;);
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});

Quand on clique sur la flèche, une fonction est appelée après l'élément suivant de son span cible et le rend visible. Nous utilisons le slidetoggle de jquery. Elle fait apparaître ou disparaître l'effet de glissement d'un élément. La fonction possède un paramètre de temps d'animation.

Enfin, notre élément de menu de démonstration a un effet de survol. Il utilise un pseudo-élément ::after. Le code est le suivant :

.menu-sidebar li > a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 102%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
background-position: -100% 0;
}

Ce pseudo-élément ::after contient des éléments de niveau bloc positionnés de manière absolue sous chaque lien, avec une hauteur et une largeur de 0,15em. Nous n'appliquons pas seulement la couleur d'arrière-plan à la ligne, nous utilisons la fonction Linear-gradient() sur l'image d'arrière-plan. Bien que le but de cette fonction soit de créer un dégradé de couleurs, nous pouvons effectuer un changement de couleur du dégradé en spécifiant un pourcentage.

.menu-sidebar li > a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}

La moitié des lignes ici sont transparentes et l'autre moitié est jaune. Passez la taille du fond à 200% de la largeur pour que la partie transparente occupe la largeur de tous les liens.

La partie transparente peut utiliser d'autres couleurs. Cela créera l’illusion d’une ligne remplie d’une autre couleur, mais en réalité ce n’est qu’une ligne de deux couleurs.

Ce qui précède est le contenu de jQuery+CSS pour implémenter un menu de navigation coulissant code_jquery Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Code jQuery pour implémenter menu_jquery à trois niveauxArticle suivant：Code jQuery pour implémenter menu_jquery à trois niveaux

Articles Liés

Voir plus