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

Maison

interface Web

js tutoriel

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

PHP中文网

May 16, 2016 am 09:00 AM

css jquery

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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 de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

<🎜>: Dead Rails - Comment relever chaque défi

4 Il y a quelques semaines By DDD

Guide de l'atomfall: emplacements des articles, guides de quête et conseils

4 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7666

Tutoriel CakePHP

1393

Tutoriel C#

1205

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

Afficher plus

Related knowledge

Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Comment écrire des lignes fendues sur bootstrap Apr 07, 2025 pm 03:12 PM

Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.

Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Comment utiliser le bouton bootstrap Apr 07, 2025 pm 03:09 PM

Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton

Comment redimensionner le bootstrap Apr 07, 2025 pm 03:18 PM

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Comment configurer le cadre de bootstrap Apr 07, 2025 pm 03:27 PM

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.

Comment insérer des photos sur bootstrap Apr 07, 2025 pm 03:30 PM

Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.

See all articles