Coder un menu de navigation déroulant de style Web Magazine

Le développement Web frontend est devenu un créneau très populaire. Avec l'expansion de jQuery, de plus en plus de concepteurs de sites Web commencent à créer des animations et des effets de page fantastiques. Les possibilités sont illimitées!

Dans ce tutoriel, nous allons créer un menu de navigation déroulant de style magazine. Ceci sera créé avec quelques techniques CSS3 sophistiquées pour fonctionner dans des navigateurs conformes aux normes. Même si vous êtes instable avec jQuery, vous devriez être capable de suivre ce petit bout de code et éventuellement d’apprendre quelque chose de nouveau. Découvrez le script de démonstration en direct dans mon exemple.

Essaye le

Voir la démo en direct - Source de téléchargement

Structurer notre page HTML

Nous devrions commencer par construire la mise en page de base. J'ai fait cela en HTML avec une liste non ordonnée de liens de menus. Les styles CSS et la bibliothèque jQuery sont exclus de manière externe, ce qui économise un peu d’espace. Ajouté ci-dessous est la rubrique de notre code HTML.

Menu déroulant Style Magazine Sexy de StyleShack

La bibliothèque jQuery v1.6.2 est hébergée sur les serveurs de Google pour que les développeurs Web puissent l'utiliser. Cela peut souvent réduire la charge de vos propres serveurs. Les différences sont particulièrement évidentes si vous traitez des dizaines, voire des centaines de milliers de visiteurs par jour. J'ai également défini mon type de document sur HTML5, sans que cela affecte notre script.

En descendant un peu dans le code, examinons le contenu du corps interne. Ci-dessous, un copier / coller de tout ce qui se trouve à l'intérieur de la balise body. J'ai supprimé le code final jQuery puisque nous l'examinerons dans une section ultérieure.

<h1><img src="//lesptitesaffairesdemayl.be/img/images_1/code-a-web-magazine-style-dropdown-navigation-menu_2.jpg"></h1> <ul> <li>Page d'accueil</li> <li>À propos du mag <ul> <li>Entreprise</li> <li>Auteurs</li> <li>Écrire pour nous?</li> <li>La publicité</li> <li>Entrer en contact</li> </ul> </li> <li>Freebies <ul> <li>PSD</li> <li>Vecteurs AI</li> <li>Les motifs</li> <li>Les icônes</li> </ul> </li> <li>Tutoriels <ul> <li>HTML5</li> <li>CSS3</li> <li>jQuery</li> <li>PHP MySQL</li> <li>Rubis sur rails</li> </ul> </li> <li>Outils Web <ul> <li>Performance</li> <li>Test du navigateur</li> <li>Plugins CMS</li> <li>Feuilles de triche</li> </ul> </li> <li>Les originaux <ul> <li>Conception de site Web</li> <li>Mobile</li> <li>Interface utilisateur</li> <li>Pigiste</li> <li>Inspiration</li> </ul> </li> </ul>

Donc, cela devrait terminer notre structure HTML principale. Toutes les listes imbriquées utilisent des éléments ul qui sont positionnés dans un élément de liste parent. Pas trop difficile si vous maîtrisez les bases de la conception et du codage de sites Web. Passons donc tout de suite aux styles CSS.

Concevoir avec CSS

Je détaillerai chaque segment du petit fichier style.css joint au code de démonstration. Nous commençons par un bloc de groupe réinitialisant les marges / le remplissage pour l'ensemble du document. Une page d'homme simple, vraiment réinitialisée.

* {marge: 0; rembourrage: 0; } body {font-family: Arial, Tahoma, sans-serif; taille de police: 11px; couleur: # 232323; } / * Structure @group * / #head {background: # e1ecf6; hauteur: 100px; rembourrage en haut: 15px; border-bottom: 1px solid # d5dce8; } .wrap {width: 800px; marge: 0 auto; }

Le contenu principal contiendra un petit logo graphique créé dans Photoshop. J'ai utilisé .wrap en tant que classe afin que nous puissions réutiliser les mêmes styles avec notre menu de navigation. Ce wrapper crée une div de contenu 800px et le centre sur la page.

Le groupe suivant est un peu plus grand, fournissant des styles pour le menu de navigation racine et ses éléments de liste. Noter la #nav Le sélecteur est sur notre élément de liste non ordonné d'origine, nous pouvons donc l'utiliser pour sélectionner tous les éléments sub-ul plus tard.

/ * @groupe menu de navigation de base * / #nav {margin: 0; rembourrage: 0; style de liste: aucun; border-left: 1px solid # d5dce8; border-right: 1px solid # d5dce8; border-bottom: 1px solid # d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bas-rayon-gauche: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bas-rayon-droit: 4px; hauteur: 50px; padding-left: 15px; padding-right: 15px; arrière-plan: # edf3f7; } #nav li {float: left; bloc de visualisation; fond: aucun; position: relative; z-index: 999; marge: 0 1px; } #nav li a {display: block; rembourrage: 0; poids de police: 700; hauteur de ligne: 50px; texte-décoration: aucun; couleur: # 818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solide transparent; remplissage: 0px 12px; } #nav li a: survolez, #nav li a.hov {background-color: #fff; border-left: 1px solid # d5dce8; border-right: 1px solid # d5dce8; couleur: # 576482; }

Sur la racine UL, j'ai ajouté 3 bordures solides: gauche, droite et inférieure. La bordure supérieure couvre tout le site Web et est ajoutée dans la zone d'en-tête. J'ai également arrondi les coins en bas à gauche et à droite. Cette technique est réalisée en CSS3 à l'aide de -moz, -webkit et des propriétés standard border-radius.

Les éléments de la liste reçoivent un z-index de 999 pour apparaître au-dessus de tous les autres éléments. Ainsi, de cette manière, nous survolerions l'original sur notre subnav et perdrions la fenêtre contextuelle. Au lieu de cela, l'élément li se développe pour occuper toute la hauteur de notre nouveau menu coulissant et reste au top lorsque nous survolons les liens. Également position: relative; est ajouté pour utiliser correctement le positionnement absolu sur la liste interne.

Les liens d'ancrage ne sont pas trop intéressants en eux-mêmes. Ils se distinguent par un fond blanc en survol avec deux bordures supplémentaires à gauche et à droite. Sur le sélecteur de survol final, j'ai ajouté une autre classe .hov être utilisé par jQuery. Ainsi, lorsque vous déplacez le curseur de la souris sur les liens de sous-menu, le lien de navigation d'origine reste survolé! Génial.

Styles de menu de sous-navigation

Ce dernier code CSS stylisera nos liens de sous-menu. Nous utilisons le positionnement absolu pour déplacer notre élément sub-ul directement vers le haut de son conteneur. Également un excellent effet d’ombre portée utilisant de nouvelles propriétés CSS3.

/ * @group subnav * / #nav ul {position: absolute; à gauche: 1px; affichage: aucun; marge: 0; rembourrage: 0; style de liste: aucun; -moz-box-shadow: 0 1px 3px rgba (0,0,0,0,2); -o-box-shadow: 0 1px 3px rgba (0,0,0,0,2); box-shadow: 0 1px 3px rgba (0,0,0,0,2); -webkit-box-shadow: 0 1px 3px rgba (0,0,0,0,2); rembourrage en bas: 3px; } #nav ul li {width: 180px; float: gauche; border-top: 1px solid #fff; text-align: left; } #nav ul li: hover {border-left: 0px solid transparent; border-right: 0px solid transparent; }

Les propriétés individuelles que j'ai utilisées et les navigateurs correspondants peuvent être un peu déroutants. Vous trouverez ci-dessous un petit guide de traduction.

• -moz-box-shadow - Firefox / Mozilla Engine
• -o-box-shadow - Opéra
• -webkit-box-shadow - Navigateurs WebKit standard, Google Chrome ou Safari
• box-shadow - La plupart des autres, y compris Microsoft Internet Explorer

Chaque élément de liste de sous-navigation a une largeur de 180px. Ceci définit la taille maximale de notre menu. Si vous transférez le code, modifiez-le pour l'adapter aux tailles de votre propre modèle.

#nav ul a {display: block; hauteur: 20px; hauteur de ligne: 20px; rembourrage: 8px 5px; couleur: # 666; bordure-bas: 1px solide transparent; text-transform: majuscule; couleur: # 797979; poids de la police: normal; } #nav ul a: hover {text-decoration: none; border-right-color: transparent; border-left-color: transparent; fond: transparent; couleur: # 4e4e4e; } * html #nav ul {margin: 0 0 0 -2px; }

Chaque ancre de sous-menu est définie sur une hauteur et une hauteur de ligne de 20px. Ceci maintiendra le texte du menu centré verticalement dans chaque bloc de menu. En vol stationnaire, j'ai caché les frontières héritées des liens de navigation parent. Tout cela est assez simple avec les styles CSS, et maintenant le dernier bit de JavaScript à reconstituer.

jQuery Show / Hide Sub Menu

Directement après la finale .emballage div notre zone de contenu se termine. Donc ici, j'ai ajouté une nouvelle balise de script et placé tout le code jQuery à l'intérieur. Cela facilite beaucoup l'édition et notre code est assez petit de toute façon.

$ (document) .ready (fonction () {$ ('# nav li'). hover (fonction () {$ ('ul', this) .slideDown (200); $ (this) .children ('a: premier '). addClass ("hov");}, function () {$ (' ul ', this) .slideUp (100); $ (this) .children (' a: premier '). removeClass ("hov" );});});

Démarrez le script en vérifiant si le chargement du document de page est terminé. Nous voulons déclencher notre première fonction après que l'utilisateur survole un élément de la liste dans la racine #nav ul. Le premier bloc de code de fonction est composé de deux lignes.

Il cible notre élément ul interne et ajoute un effet de glissement vers le bas en 200 millisecondes. Deuxièmement, nous devons ajouter le .hov classe sur le lien d'ancrage sélectionné. Cela permet de conserver l’effet survolé dans le lien principal même lorsque vous vous déplacez sur des liens de sous-navigation. La deuxième fonction est notre paramètre de rappel pour le .flotter() méthode qui se passe sur la souris off.

Ceci est également composé de 2 simples lignes de code. Celles-ci ne font que renverser ce que nous avons fait dans le premier domaine. L'UL interne est forcé de glisser vers le haut dans une animation plus rapide (100 millisecondes) et nous supprimons également la classe de survol.

Voir la démo en direct - Source de téléchargement

Conclusion

J'ai laissé le menu assez basique pour que d'autres concepteurs puissent ajuster le modèle pour l'adapter à leur propre site Web. C'est assez impressionnant ce qui est possible avec seulement quelques lignes dans jQuery! Si vous avez implémenté quelque chose de similaire sur votre propre site, veuillez nous le faire savoir. Et n'oubliez pas de télécharger et de jouer avec le code source de la démo.