Share
Dans ce tutoriel, nous allons voir et voir ce que nous pouvons réaliser avec HTML5 et CSS3 en ce qui concerne l'agrafe des sites Web actuels: le menu de navigation déroulant. Nous utiliserons également jQuery pour gérer les effets et nous apporter la touche finale..
HTML5 apporte à la spec un dédié Elément devant être utilisé comme conteneur pour toute structure de navigation principale, telle que les principaux menus de navigation verticale ou horizontale du site, ou une table des matières sur la page, par exemple. Malheureusement, IE ne prend pas encore en charge ce nouvel élément, mais nous pouvons utiliser une solution simple dont vous êtes certainement au courant..
En utilisant CSS3, nous pouvons nous passer de ce qui aurait nécessité l’utilisation de plusieurs images d’arrière-plan et éventuellement d’un ou deux conteneurs d’emballage supplémentaires et s’appuyer (presque) uniquement sur certaines des nouvelles propriétés de style, telles que les coins arrondis et les ombres portées, par exemple. qui sont disponibles pour les navigateurs compatibles. Encore une fois, tous les navigateurs (toux, IE!) Ne prennent pas en charge ces nouvelles règles, mais nous pouvons très facilement fournir des solutions de secours aux navigateurs qui ne peuvent pas gérer nos styles..
À propos, Envato Market propose une vaste sélection de menus CSS stylés parmi lesquels choisir, tels que PickArt, une solution simple, épurée et élégante, prête à être utilisée et installée à seulement 4 $..
PickArt sur le marché EnvatoVous pouvez également essayer l’un des prestataires de services experts sur Envato Studio. Par exemple, Lukasz Czerwinski créera un tout nouveau plug-in jQuery selon vos spécifications pour 115 $ dans les sept jours, avec un taux de satisfaction de 100%. Ses offres comprennent des menus déroulants, des galeries multimédia intégrées avec vos services sociaux, des curseurs, et bien plus encore..
Si vous ne trouvez pas ce dont vous avez besoin, ou si vous préférez le faire vous-même, poursuivez votre lecture pour savoir comment.
Nous aurons besoin d'une copie de la dernière version de jQuery, la version 1.4.2 au moment de la rédaction, ainsi que d'une copie de la version actuelle (1.1) de l'excellente bibliothèque Modernizr, que nous utiliserons pour cibler les navigateurs compatibles. avec le CSS3 on utilise.
Créez un dossier de projet pour les fichiers que nous allons créer quelque part sur votre ordinateur et appelez-le. nav, Dans ce dossier, créez trois nouveaux dossiers. un appelé js, un appelé css et un appelé se retirer. Assurez-vous que les copies de jQuery et Modernizr sont enregistrées dans le répertoire. js dossier.
Commencez le codage en créant la page suivante dans votre éditeur de code préféré:
Menu de navigation HTML5, CSS3 et jQuery
Enregistrer ceci sous nav.html dans le nav dossier. Nous commençons avec le doctype HTML5 minimal, qui nous permet de spécifier le type de document dans un quart du code que nous utilisions auparavant. Nous spécifions également la langue par défaut et le codage des caractères; Bien que le document puisse toujours être validé sans ces deux éléments, il est recommandé de les inclure et la page déclenchera des avertissements du validateur si la langue par défaut n'est pas spécifiée. Nous établissons ensuite un lien vers une feuille de style (nous créerons cette section ensuite) et utilisons un commentaire conditionnel qui cible IE pour charger l'excellent html5.js script si nécessaire.
Dans le corps de la page, nous avons le element en tant que conteneur pour une liste traditionnelle de liens, et nous avons également ajouté un sous-menu. L'élément ne crée pas comme par magie de menu de navigation pour nous, et il n'inclut pas de nouveaux éléments d'élément de menu ni quoi que ce soit de ce type. Une liste non ordonnée est toujours un choix approprié. le élément est juste un conteneur sémantique pour notre menu, qui décrit sa fonction dans le document, pour remplacer le générique À la fin du corps, nous établissons un lien vers nos fichiers de script jQuery et Modernizr. Nous utiliserons jQuery un peu plus tard lorsque nous ajouterons le comportement du menu, mais Modernizr le fera tout de suite, en détectant les capacités du navigateur utilisé et en ajoutant une série de noms de classes à l'élément HTML, qui nous pouvons utiliser pour ajouter notre CSS3 afin qu'il ne soit appliqué qu'aux navigateurs qui peuvent en faire usage. Nous avons également ajouté le nom de la classe non-js au de la page; nous le supprimerons plus tard si JavaScript est activé afin que nous puissions également l'utiliser pour ajouter des styles qui ne devraient être appliqués que si JavaScript est désactivé. Ajoutons maintenant un style de base; créez la feuille de style suivante: Ensuite, nous pouvons ajouter notre CSS3: En utilisant les classes ajoutées à la element by Modernizr nous pouvons facilement et en toute sécurité ajouter les styles CSS3 que nous souhaitons. Nous utilisons le rayon de la frontière style pour donner le éléments arrondis; Nous devons donner à Mozilla et à Webkit des déclarations de style avec le préfixe, ainsi que les rayon de la frontière styles pour les navigateurs qui les prennent en charge, tels que Opera. Nous devons faire cela avec la plupart de nos styles CSS3. Ainsi que l’arrondi des coins du nous lui donnons également un dégradé et une ombre portée. Les styles de dégradé sont assez complexes et diffèrent pour les navigateurs basés sur Mozilla et Webkit, qui sont les seuls navigateurs qui les implémentent actuellement. Les deux navigateurs utilisent le image de fond propriété. Dans Firefox, nous utilisons -moz-linear-gradient ajouter un dégradé linéaire. Cela nécessite des valeurs qui correspondent au point de départ du dégradé (0%), au point de fusion de la première couleur dans la deuxième couleur (22px), à l'angle de l'axe du dégradé (90deg), à la première couleur (# 999). et la deuxième couleur (# 222). Nous pouvons obtenir le même dégradé dans Safari ou Chrome en utilisant -webkit-gradient et la syntaxe est légèrement différente. nous spécifions que cela devrait être un linéaire dégradé, puis indiquez deux points indiquant au navigateur où le dégradé doit commencer et se terminer. Les valeurs de l'exemple correspondent aux valeurs gauche, supérieure et droite de 0% et 70% pour le bas, ce qui nous donne le même style que celui utilisé dans Firefox. Enfin nous spécifions les couleurs du dégradé. Lorsque nous appliquons l'ombre portée, nous l'associons à la classe Modernizr pour RGBA ainsi qu'à boxshadow afin que notre ombre puisse être transparente. Les propriétés de Mozilla et de Webkit sont identiques. Nous fournissons également les boîte ombre propriété pour supporter les navigateurs. Les valeurs que nous spécifions pour cette règle sont le décalage gauche (2px), le décalage supérieur (2px), la quantité de flou (2px) et enfin la couleur de l'ombre (0,0,0). La couleur est l'endroit où nous utilisons RGBA, ce qui nous permet de régler l'opacité à 75% (.75). Un autre style intéressant que nous utilisons est transformer faire pivoter du texte de 180 degrés; Lorsque nous écrivons le script dans un instant, vous verrez que nous ajoutons un indicateur de sous-menu sous la forme d'un signe d'insertion à tout élément de la liste contenant un sous-menu - ce style fera pivoter le caractère de sorte qu'il pointe vers le bas. signifie que, dans le support des navigateurs, nous n'avons même pas besoin d'utiliser une image pour cette fonctionnalité. Les règles restantes définissent différents dégradés, bords arrondis, opacité avec RGBA et ombres portées sur d’autres éléments de la menu, comme de jolis coins arrondis dans le bas et une ombre portée sur le sous-menu, ainsi que l’inversion du dégradé pour un état de survol attrayant. Maintenant, notre menu de navigation devrait ressembler à ceci dans un navigateur supporté: En prenant en charge les navigateurs, nous pouvons rendre nos éléments assez chauds sans utiliser une seule image, ce qui signifie que nos pages se chargeront beaucoup plus rapidement avec beaucoup moins de requêtes HTTP. Cependant, tous les navigateurs ne prendront pas en charge le style CSS3, notamment toutes les versions d'IE, nous avons donc encore besoin de définir nos styles de secours. Ajoutez le code suivant à la feuille de style: Modernizr ajoutera également des noms de classe indiquant quelles fonctionnalités CSS3 ne sont pas disponibles pour le navigateur. Ainsi, nous pouvons facilement fournir des règles alternatives, qui utilisent des solutions de repli basées sur des images pour lesquelles les fonctionnalités ne sont pas prises en charge, ainsi que les styles éventuellement nécessaires en utilisant les images. Vous remarquerez que nous utilisons également des sélecteurs qui ciblent nos non-js classe ici aussi; En effet, lorsque JavaScript est désactivé, Modernizr ne s'exécutera pas et n'ajoutera pas les noms de classe dont nous avons besoin au document. Par conséquent, nos solutions de secours non CSS3 deviennent également nos solutions de secours non Js.. Ajoutons maintenant un script. La première chose à faire est de supprimer le non-js classe du corps de la page lorsque JavaScript n'est pas désactivé. Nous voulons faire cela dès que possible dans le processus de rendu de page pour éviter un scintillement lorsque les styles sont modifiés. Directement après la balise d'ouverture, ajoutez le code suivant: Tout ce que nous faisons, c'est obtenir le élément par nom de balise et définissez sa propriété className sur une chaîne vide. Normalement, nous utiliserions jQuery pour le faire pour nous, mais comme jQuery n’a pas été chargé lors de l’exécution de ce script, nous ne pouvons pas l’utiliser. Nous pourrions charger jQuery avant cela bien sûr, mais nous aurions alors un énorme impact sur les performances. Notre script ne contient que 2 lignes de code, ce qui ne causera pas de retard important, et parce qu'il sera exécuté avant même que le navigateur ait traité la balise pour le élément, il n'y aura pas d'éclair de contenu non-stylé. Maintenant que la classe a été retirée du corps, nos sous-menus CSS ne fonctionneront plus. Nous pouvons donc ajouter ce comportement à jQuery et l'améliorer un peu en même temps. À la fin du document, directement après la référence du script pour Modernizr, ajoutez le code suivant: Le script est relativement simple; nous encapsulons notre code dans une fermeture et passons l'objet jQuery en toute sécurité nom-espacé par le signe dollar, juste au cas où une autre bibliothèque serait utilisée lors de la mise en production du code. Nous mettons ensuite en cache une référence à la élément afin que nous puissions y faire référence sans le sélectionner à plusieurs reprises dans le document. Nous traitons ensuite chaque élément de la liste dans le menu. Pour chaque élément correspondant, nous vérifions s'il contient des éléments imbriqués. À ce stade, nous devrions être assez bien placés pour la plupart des situations. quel que soit le navigateur prenant en charge HTML5, notre menu doit être relativement similaire, que CSS3 soit pris en charge ou non, et que les scripts soient activés ou non. Cependant, IE nous présente un problème; lorsque JS est activé, le htmlshiv.js le script permet à IE de comprendre le element et nos styles non css3 sont repris et mis en oeuvre - tout va bien (nous avons encore quelques problemes avec IE7, comme entre autres notre nettoyage automatique :après les règles ne sont pas comprises ou appliquées, mais nous y reviendrons dans peu de temps). Cependant, les problèmes commencent lorsque IE est utilisé avec le script désactivé - dans ce cas, le html5shiv.js le script n'est pas exécuté et IE ne comprend pas la élément. Aucun de nos sélecteurs incluant la navigation ne sera implémenté! Ce n'est pas la fin du monde cependant; nous pouvons fournir une feuille de style alternative qui n'est utilisée que lorsque le navigateur a JS désactivé et est IE. Directement après le script qui supprime le non-js classe de la élément ajouter ce qui suit: Une solution simple en effet. Nous devons maintenant créer la nouvelle feuille de styles; ajoutez les règles suivantes à un nouveau document dans votre éditeur de code: Enregistrez ceci dans le dossier css sous ie.css. Comme vous pouvez le constater, nous ne ciblons pas le élément du tout dans cette feuille de style; certains des styles que nous avons donnés à la élément plus tôt ont été ajoutés à la Nous avons dû utiliser quelques images supplémentaires pour ce scénario car nous n’avons plus le élément à suspendre à l'arrière-plan pour le dégradé principal. Il s’agit donc de tous les navigateurs modernes, avec JS activé et désactivé, fonctionnant comme prévu - en utilisant CS3 dans la mesure du possible et en appliquant des solutions de rechange. Même si les scripts sont activés, IE7 continue de nous poser problème, mais nous pouvons le résoudre assez facilement en utilisant un autre commentaire conditionnel pour cibler spécifiquement IE7 et en fournissant une nouvelle feuille de style destinée à IE7, qui résout les problèmes de mise en page. quelque chose comme ceci est tout ce dont nous avons besoin: Enregistrer ceci dans le css dossier en tant que ie7.css et ajouter un nouveau commentaire conditionnel à la Nous y allons un menu de navigation construit et stylé avec les derniers éléments et styles avec des replis et des corrections pour les navigateurs plus anciens.
Étape 3. Quelques styles de base
/ * JS styles désactivés * / .no-js nav li: hover ul display: block; / * styles de navigation de base * / nav display: block; marge: 0 auto 20px; bordure: 1px solide # 222; position: relative; couleur de fond: # 6a6a6a; police: 16px Tahoma, Sans-serif; nav ul padding: 0; marge: 0; nav li position: relative; float: gauche; type de style de liste: aucun; nav ul: after content: "."; bloc de visualisation; hauteur: 0; clarifier les deux; visibilité: cachée; nav li a display: block; rembourrage: 10px 20px; border-left: 1px solid # 999; border-right: 1px solide # 222; couleur: #eee; texte-décoration: aucun; nav li a: focus contour: aucun; texte-décoration: souligné; nav li: premier enfant a border-left: none; nav li.last a border-right: none; nav a span display: block; Flotter à droite; marge gauche: 5px; nav ul ul display: none; largeur: 100%; position: absolue; gauche: 0; arrière-plan: # 6a6a6a; nav ul ul li float: none; nav ul ul a padding: 5px 10px; frontière gauche: aucune; border-right: aucun; taille de police: 14px; nav ul ul a: hover background-color: # 555; Enregistrez ce fichier dans le répertoire css sous le nom de fichier nav.css. La première règle concerne uniquement les cas où JavaScript est désactivé et permet d'afficher le sous-menu masqué en survol uniquement avec CSS. Le reste du code définit un ensemble de styles de base qui mettent en forme le
Étape 4. CSS3
/ * CSS3 * / .borderradius nav -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; .cssgradients nav image d’arrière-plan: -moz-linear-gradient (0% 22px 90deg, # 222, # 999); background-image: -webkit-gradient (linéaire, 0% 0%, 0% 70%, de (# 999) à (# 222)); .boxshadow.rgba nav -moz-box-shadow: 2 pixels 2 pixels 2 pixels rgba (0,0,0, 0,75); -webkit-box-shadow: 2px 2px 2px rgba (0,0,0, 0,75); boîte-ombre: 2px 2px 2px rgba (0,0,0, 0,75); .cssgradients nav li: survol image d’arrière-plan: -moz-linear-gradient (0% 100px 90 °, n ° 999, n ° 222); background-image: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# 222) à (# 555)); .borderradius nav ul ul -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bas-rayon-gauche: 4px; -webkit-border-bas-rayon-droit: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; .boxshadow.rgba nav ul ul couleur d'arrière-plan: rgba (0,0,0,0,8); -moz-box-shadow: 2px 2px 2px rgba (0,0,0, 0,8); -webkit-box-shadow: 2px 2px 2px rgba (0,0,0, 0,8); encadré-ombre: 2px 2px 2px rgba (0,0,0, 0,8); .rgba nav ul ul li frontière gauche: 1px solide rgba (0,0,0,0,1); bordure droite: 1px solid rgba (0,0,0,0,1); .rgba nav ul ul a: survol couleur d'arrière-plan: rgba (85,85,85, .9); .borderradius.rgba nav ul ul li.last bordure gauche: 1px solid rgba (0,0,0,0,1); bordure inférieure: 1px solide Rgba (0,0,0,0,1); -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bas-rayon-gauche: 4px; -webkit-border-bas-rayon-droit: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; .csstransforms ul a span -moz-transform: rotation (-180deg); - webkit-transform: rotation (-180deg);
/ * retombées * / .no-cssgradients nav, .no-js nav padding-bottom: 4px; bordure: aucune; fond: url (… /fallback/navBG.gif) repeat-x 0 0; .no-borderradius nav ul, .no-js nav ul arrière-plan: url (… /fallback/navRight.gif) no-repeat 100% 0; .no-borderradius nav ul ul, .no-js nav ul ul arrière-plan: néant; .no-borderradius nav li, .no-js nav li hauteur: 44px; .no-cssgradients nav li: survol, .no-js nav li: survol background: url (… /fallback/navOverBG.gif) repeat-x 0 0; .no-borderradius nav li li, .no-js nav li li hauteur: auto; largeur: 98%; à gauche: -2px; .no-borderradius nav li: premier enfant, .no-js nav li: premier enfant background: url (… /fallback/navLeft.gif) no-repeat 0 0; .no-borderradius nav li: premier enfant: survol, .no-js nav li: premier enfant: hover background: url (… /fallback/navOverLeft.gif) non répétée 0 0; .no-borderradius nav li li: premier enfant, .no-js nav li li: premier enfant background: none; .no-rgba nav ul ul, .no-js nav ul ul left: 1px; padding-left: 2px; fond: url (… /fallback/subnavBG.png) no-repeat 100% 100%; .no-rgba nav ul ul a, .no-js nav ul ul a left: 3px; .no-rgba nav ul ul a: hover background: url (… /fallback/subOverBG.png) repeat 0 0; .no-csstransforms ul a span height: 7px; largeur: 12px; marge supérieure: 8px; retrait du texte: -5000px; débordement caché; fond: url (… /fallback/indicator.png) no-repeat 0 0; .no-borderradius ul ul li.last margin-bottom: 10px; .no-cssgradients.boxshadow nav box-shadow: none;
Étape 5. Ajout du script
éléments et si on ajoute une nouvelle élément de l'élément de la liste. Cela deviendra notre indicateur de sous-menu. Quand un sous-menu est trouvé, nous attachons aussi mouseenter () et mouseleave () des assistants d’événement à l’élément de la liste contenant le menu. Tous ces assistants font afficher et masquer le sous-menu en le glissant vers le bas ou vers le haut. Notez l'utilisation de la Arrêtez() méthode qui aide à empêcher les animations d'ouverture et de fermeture de se mettre en file d'attente si le pointeur de la souris est déplacé de façon répétée sur les éléments de la liste cible.
/ * ie styles pour quand js désactivé * / ul display: block; rembourrage: 0; marge: 0; arrière-plan: url (… /fallback/navRightIE.gif) no-repeat 100% 0; police: 16px Tahoma, Sans-serif; ul: after content: "."; bloc de visualisation; hauteur: 0; clarifier les deux; visibilité: cachée; li hauteur: 44px; position: relative; float: gauche; type de style de liste: aucun; fond: url (… /fallback/navBG.gif) repeat-x 0 0; li.last a border-right: none; li: hover background: url (… /fallback/navOverBG.gif) repeat-x 0 0; li: premier-enfant background: url (… /fallback/navLeftIE.gif) no-repeat 0 0; li: premier enfant a border-left: none; li: premier-enfant: survol background: url (… /fallback/navOverLeft.gif) no-repeat 0 0; li a display: block; rembourrage: 10px 20px; border-left: 1px solid # 999; border-right: 1px solide # 222; couleur: #eee; texte-décoration: aucun; li li width: auto; clair: gauche; li li: premier enfant background: none; li li: survoler background-image: none; ul li li a: survol border-right: none; ul ul display: none; padding-left: 2px; position: absolue; à gauche: 2px; fond: url (… /fallback/subnavBG.png) no-repeat 100% 100%; ul li: hover ul display: block; li li hauteur: auto; largeur: 98%; à gauche: -2px; ul ul a: hover background: url (… /fallback/subOverBG.png) repeat 0 0; ul a span height: 7px; largeur: 12px; marge supérieure: 8px; retrait du texte: -5000px; débordement caché; fond: url (… /fallback/indicator.png) no-repeat 0 0; ul ul li background: none; ul ul li.last marge-bottom: 10px; ul ul li a padding: 5px 10px; frontière gauche: 0; à gauche: 3px; taille de police: 14px; espace blanc: pré;
élément à la place, et quelques nouveaux styles doivent être inclus spécifiquement pour ce scénario. Cependant, la feuille de style crée le même effet qu'auparavant, donc IE8 avec JS désactivé devrait toujours apparaître ainsi:
* styles pour corriger IE7 * / ul display: inline-block; ul li a span position: absolute; à droite: 5px; en haut: 10 px; ul ul li a border-right: none; rembourrage: 5px 10px; .content clear: both;
Accentsconagua