Share
L'animation et les commentaires visuels sont d'excellents moyens d'aider un utilisateur à naviguer et à interagir avec un site Web. Alors que, traditionnellement, le flash d’Adobe était l’atout principal pour tout ce qui était animé, ces jours-ci, avec la magie du javascript, nous pouvons totalement éviter Flash. Aujourd'hui, nous allons créer un menu de navigation animé vraiment cool en utilisant uniquement CSS et jQuery.
Le menu que nous élaborons est visible dans la capture d'écran ci-dessous. Vous pouvez également voir la version de travail finale ici.
Je vais diviser ce tutoriel en cinq sections comme suit:
Tout d’abord, voyons ce que nous devons faire ici.
Alors voici une idée approximative de ce que nous devrions faire:
Maintenant, la plupart du temps, nous utilisons
Donc pour résumer
maisonsurprestations de servicesolutionscontact
Cela pourrait aider de montrer la structure de répertoire que je suis. La structure de répertoire est la suivante:
Je suppose que vous avez des connaissances de base sur Photoshop, je ne donnerai donc pas trop d'instructions détaillées sur la création de ressources..
Il y a plusieurs choses que nous devons créer.
Notez que si vous souhaitez ignorer cette étape, vous pouvez télécharger le fichier zip complet à la fin du didacticiel et extraire mes copies.!
Ok, créons le fond de l'en-tête. Ouvrez Photoshop et créez un canevas 1x181 px, ou vous pouvez le créer plus grand puis rogner l'image..
Créez un calque et attribuez-lui un dégradé linéaire avec un préréglage de Premier plan à arrière-plan de 171 pixels, ce sera le dégradé principal.
Créez un autre calque et attribuez-lui un dégradé linéaire avec une préconfiguration Avant-plan sur Transparent d'environ 10 pixels au bas du premier calque pour obtenir un effet d'ombre..
Voici à quoi cela devrait ressembler, c’est 100x181 px que je recadrerai plus tard à 1x181 px.
Enregistrer ceci sous 'hdr-bkg.png' dans notre 'img' dossier.
Ensuite, nous allons créer le titre du contenu. Encore une fois, ouvrez Photoshop et créez 934x284 px.
Créez un rectangle arrondi à l'aide de l'outil approprié, sélectionnez la forme créée, créez un nouveau calque, ajoutez un dégradé et donnez-lui une ombre portée..
Ensuite, nous aurons quelque chose comme ceci:
Enregistrer ceci sous 'content-title.png' dans 'img' dossier.
Créons maintenant les ressources nécessaires à la navigation. Nous avons besoin de deux ensembles de navigation et d'une boîte blanche.
La boîte blanche est simple. Créez simplement un rectangle arrondi d’environ 98px x 58px et peignez-le en blanc. S'assurer que le fond est transparent.
Enregistrer ceci sous 'white.jpg' dans 'img' dossier.
Pour l'élément de navigation, ouvrez votre Photoshop et créez un document de 490px x 58px.
Créez un rectangle arrondi avec environ 98px x 58px et mettez-y du texte. Nous aurons besoin de deux copies de chaque texte.
J'ai appliqué une petite ombre portée sur chaque texte, ce qui est bien sûr facultatif. Vous pouvez choisir vos propres couleurs à mettre ici.
Maintenant, dupliquez simplement ce calque le long de la ligne horizontale. Appliquer des couleurs et du texte différents.
Enregistrer ceci sous 'nav.jpg' dans 'img' dossier.
Enfin, pour la bande d’arrière-plan, j’ai simplement utilisé un outil en ligne appelé le générateur de bandes. La sortie ressemble à ceci:
Vous pouvez voir mes paramètres ici.
Bien sûr, vous pouvez simplement créer vous-même la bande dans Photoshop, mais pourquoi ne pas utiliser plutôt un petit outil Web soigné :-)
Maintenant, notons notre code HTML.
menu animé lisse maisonsurprestations de servicesolutionscontact
C’est prety beaucoup selon notre plan de jeu expliqué à l’étape 1.
J'ai ajouté un lien vers un fichier 'main.css' qui n'a pas encore été créé et
J'ai également ajouté des références à certains fichiers javascript. Puisque chaque article de navigation est unique, j'ai attribué à chaque article un identifiant..
Nous aurons toujours besoin d'un style commun à chacun des éléments de menu, cela nous facilitera la gestion du style à des stades ultérieurs..
Nous aurons également un cadre blanc au-dessus de chaque élément de navigation, lorsque nous survolons le menu ou lorsqu'un élément de menu est sélectionné, nous aurons donc besoin d'un autre
menu animé lisse maisonsurprestations de servicesolutionscontact
Enregistrer ceci sous 'index.html'. Jusqu'ici nous avons ceci comme page HTML:
Appliquons un style de base à la page Web. Nous allons commencer par définir l’arrière-plan et ajouter une zone d’en-tête..
body background: url (… /img/body-bkg.jpg) répéter le défilement; marge: 0; rembourrage: 0; .containe r margin: 0pt auto; largeur: 950px; #header background: url (… /img/hdr-bkg.jpg) repeat-x scroll; hauteur: 181px;
Enregistrer ceci sous 'main.css' dans 'css' dossier.
Maintenant, nous avons quelque chose qui ressemble à:
Ajoutons maintenant du style à chacun des éléments de menu. Rappelez-vous que nous voulons la boîte blanche en haut de chaque élément de menu,
la position doit donc être définie sur absolue. Ajoutez le style suivant dans notre fichier 'main.css'.
#navigation height: 60px; #home, #home div, #about, #about div, #services, #services div, #solutions, #solutions div, #contact, #contact div height: 80px; position: absolue; largeur: 97px; float: gauche; #home, #about, #services, #solutions, #contact background-image: url (… /img/nav.jpg); pièce jointe en arrière-plan: scroll; répétition de fond: non répétée; en haut: 171px; #home background-position: 0px -25px; marge gauche: 6px; #about background-position: -98px -25px; marge gauche: 105px; #services background-position: -196px -25px; marge gauche: 204px; #solutions background-position: -294px -25px; marge gauche: 303px; #contact background-position: -392px -25px; marge gauche: 402px; #home div, #about div, #services div, #solutions div, #contact div background-image: url (… /img/white.jpg); pièce jointe en arrière-plan: scroll; répétition de fond: non répétée; position d'arrière-plan: 0px -60px;
Maintenant nous avons :
Un problème, le lien apparaît en haut des éléments de menu, supprimons-le avec un énorme retrait de texte - en le retirant efficacement de l'écran..
Ajoutez ceci à notre feuille de style.
.pri-nav a display: block; texte-décoration: aucun; retrait du texte: -30000px;
Maintenant ça va ressembler à ça:
Nous avons toujours un problème, nous aimerions que le menu de navigation apparaisse sous l'ombre de l'en-tête. Nous pouvons y parvenir en modifiant notre style d'en-tête.
#header background: url (… /img/hdr-bkg.jpg) repeat-x scroll; hauteur: 181px; position: absolue; z-index: 100; / * Assurez-vous que l'en-tête se trouve en haut de la zone de navigation * / top: 0px; gauche: 0px; largeur: 100%;
Maintenant, parce que nous avons utilisé un fichier .png avec transparence, il devrait ressembler à ceci:
Parfait! Ajoutons le contenu afin que nous puissions accéder à notre script d'animation.
.content margin-top: 160px; # content-title background: url (… /img/content.jpg) no-repeat scroll; hauteur: 323px; position: absolue; largeur: 100%;
Commençons par télécharger le dernier script jQuery et le placer dans le dossier 'js' dossier.
L'animation est essentiellement une manipulation de style de position d'arrière-plan.
Malheureusement, jQuery a un bogue dans l'animation du style de position d'arrière-plan. Mais ne vous inquiétez pas! Alexander Farkas a créé un plugin qui résout ce problème.
Téléchargez le fichier et renommez-le en jquery-bp.js et le stocker dans le 'js' dossier.
Il y a quelque chose que nous devons comprendre avant de procéder. Je cite la documentation du plugin:
En raison de bugs dans le navigateur (Firefox, par exemple), vous devez définir votre position d'arrière-plan (initiale) en ligne:
- Bien sûr, vous pouvez y parvenir avec JavaScript (jQuery):
$ ('# background'). css (backgroundPosition: '10px 20px');
Bon, maintenant que nous comprenons cela, commençons. Nous allons définir le style de fond pour chaque élément au début de notre script..
// id pour chacun de nos éléments de menu var nav = ['#home', '#about', '#services', '#solutions', '#contact']; $ (document) .ready (function () setBkgPos ();); fonction setBkgPos () pour (i = 0; i < nav.length; i++ ) $(nav[i]).css(backgroundPosition: i*(-98) + 'px -25px'); $(nav[i] + ' div').css( backgroundPosition: '0px -60px');
Enregistrer ceci sous 'navigation.js' dans 'js' dossier.
Nous allons maintenant lier 3 événements à chacun des éléments de menu. Nous pouvons le faire en appelant la fonction bind.
$ (document) .ready (function () setBkgPos (); // lie l'événement à fonctionner ici pour (i = 0; i < nav.length; i++ ) $(nav[i]).bind( 'mouseover', mMouseOver ); $(nav[i]).bind( 'mouseout', mMouseOut ); $(nav[i]).bind( 'click', mClick ); );
Chaque fois qu'un utilisateur survole l'élément de navigation, notre script appelle la fonction 'mMouseOver'.
Lorsque l'utilisateur survole l'élément de navigation, notre script appelle la fonction 'mMouseOut'.
Et lorsque l'utilisateur clique sur l'élément de navigation, notre script appelle la fonction 'mClick'.
Créons un «story board» pour notre animation survolée de souris.
Sur 'Mouse Over':
Ok ajoutons ces fonctions sous le script précédent:
Accentsconagua
fonction _getHPos (id) pour (i = 0; i < nav.length; i++ ) if ( '#' + id == nav[i] ) return i*(-98); return 0; function mMouseOver(e) $(this) // stop any animation that took place before this .stop() // step 1. change the image file and change the cursor .css(backgroundImage: 'url('+site_url+'img/nav-over.jpg)',cursor: 'pointer') // step.2 move up the navigation item a bit .animate( backgroundPosition:'(' + _getHPos( this.id ) +'px -30px',"fast", // this section will be executed after the step.2 is done function() $(this) .children() // step. 3 move the white box down .animate(backgroundPosition:'(0px -40px)',20) // step 4. move the white box down .animate(backgroundPosition:'(0px -20px)',"fast"); $(this) // step 4. move the navigation item down .animate(backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)',"fast") // step 5. move the navigation item to its final position .animate(backgroundPosition:'(' + _getHPos( this.id ) +'px 25px)',"fast"); // store the parent element id for later usage var parent = this; $(this) .children() // step 5. move the white box to its final position .animate( backgroundPosition:'(0px -45px)',"fast", // this section will be executed after the step.2 is done function() // step.6 change the image to its original image $(parent).css(backgroundImage: 'url(img/nav.jpg)'); ); ); J'ai besoin d'expliquer plusieurs choses ici:
Maintenant c'est fait. Créons un "story board" pour l'événement "mouse out"
Sur la souris:
Le code:
function mMouseOut (e) $ (this) // arrête toute animation ayant eu lieu avant cette étape .stop () // step.1 déplace le point de navigation vers le bas .animate (backgroundPosition: '(' + _getHPos (this.id) + 'px 40px)', "fast", // cette section sera exécutée une fois l’étape 1 terminée. function () // step.2 la boîte blanche se déplace très rapidement $ (this) .children (). animate ( backgroundPosition: '(0px 70px)', "fast"); // étape 3. déplacer l'élément de navigation vers le haut $ (this) .animate (backgroundPosition: '(' + _getHPos (this.id) + 'px -40px ) ', "fast", // cette section sera exécutée une fois l’étape.3 effectuée. function () // étape 4. déplacez l’élément de navigation de sa position initiale $ (this) .animate (backgroundPosition:' ( '+ _getHPos (this.id) +' px -25px) ', "fast", // cette section sera exécutée une fois l'étape.4 terminée. function () // déplace le cadre blanc à sa position d'origine, prêt pour l'animation suivante $ (this) .children (). css (backgroundPosition: '0px -60px');)) .css (backgroundImage: 'url (img / nav.jpg)', curseur: "); Presque là! Nous devons maintenant gérer lorsqu'un utilisateur clique sur l'élément de navigation..
fonction mClick (e) location.href = this.id;
Bien sûr, vous pouvez indiquer l'endroit où vous le souhaitez ici. Cette fonction particulière dirigera votre navigateur vers [current_url] / [navigation_id]; ainsi, pour "home" ce sera "[current_url] / home", pour "à propos de" ce sera "[current_url] / à propos de" et ainsi de suite.
Bien sûr, nous avons besoin d’un indicateur lorsque nous sommes déjà sur une page. Pour cela nous avons besoin d'une autre classe CSS.
Nous appellerons cette classe 'active'. Par exemple, si nous sommes maintenant à la maison, le fichier HTML deviendra:
maison
Ou si nous en sommes à «propos», cela deviendra:
sur
etc.
Alors maintenant, l'idée est qu'après le chargement d'une page, notre script va vérifier quel élément de navigation a la classe 'active'.
Nous appliquons ensuite un effet d'animation. Et nous devons nous assurer que tout autre événement ('mouseover', 'mouseout', 'click') ne causera aucun effet d'animation sur cet élément 'actif'.
Pour cela, nous devons changer un peu notre code. Voici le code complet après les modifications:
var site_url = "; var nav = ['#home', '#about', '#services', '#solutions', '#contact']; $ (document) .ready (function () setBkgPos (); pour (i = 0; i < nav.length; i++ ) $(nav[i]).bind( 'mouseover', mMouseOver ); $(nav[i]).bind( 'mouseout', mMouseOut ); $(nav[i]).bind( 'click', mClick ); for ( i = 0; i < nav.length; i++ ) // element with 'active' class will start animation if ( $(nav[i]).get(0).className.indexOf('active') >= 0) $ (nav [i]) .animate (backgroundPosition: '(' + _getHPos (nav [i]) + 'px -30px', "rapide", fonction () $ (this). children () .animate (backgroundPosition: '(0px -40px)', 20) .animate (backgroundPosition: '(0px -20px)', "fast"); $ (ceci) .animate (backgroundPosition: '(' + _getHPos (nav [i]) + 'px 50px)', "rapide") .animate (backgroundPosition: '(' + _getHPos (nav [i]) + "px 25px) '," rapide "); var parent = this; $ (this) .children () .animate (backgroundPosition: '(0px -45px)'," fast ", function () $ (parent) .animate (backgroundPosition: ' ('+ _getHPos (parent.id) +' px 25px) ', "fast"); $ (parent) .css (backgroundImage:' url (img / nav.jpg) ');) ; Pause; ); Et avec cela, nous avons notre petit menu complet astucieux.
Télécharger un ZIP du site
Voir une démo!
