Share
Comme vous le savez, il existe de nombreuses bibliothèques javascript concurrentes de nos jours. Bien que je préfère jQuery, j'ai toujours aimé le fonctionnement du menu sur MooTools. Donc, dans ce tutoriel, nous allons recréer le même effet… mais nous le ferons dans jQuery!
Commençons par écrire le code HTML nécessaire pour créer une navigation verticale simple. Comme vous l’auriez peut-être deviné, nous utiliserons une liste non ordonnée. avec le nom de l'ID "navigation coulissante". Aussi, nous allons ajouter des liens et donner à chaque élément de la liste le nom de la classe "élément coulissant".
Je vais aussi ajouter un élément de titre. C’est une chose utile car beaucoup de blogs WordPress, par exemple, ont des éléments de titre dans leur barre de navigation latérale (par exemple, "Archives"). Cela ressemblerait à quelque chose comme ça:
Maintenant, créons un document HTML où nous pourrons mettre le travail que nous venons de faire. Créez un nouveau fichier HTML et appelez-le demo.html. Puis ouvrez ce fichier avec votre éditeur de texte préféré et insérez le code suivant:
Effet de navigation à l'aide de jQuery
Titre de navigation
- Lien 1
- Lien 2
- Lien 3
- Lien 4
- Lien 5
Il y a quelques choses à noter ici:
Maintenant que notre fichier HTML est étiqueté et fonctionne, ajoutons quelques styles. Rappelez-vous que notre document HTML pointe vers un fichier CSS appelé styles.css. Commençons donc par créer un fichier appelé styles.css et en l’enregistrant dans le même répertoire que notre document HTML. Comme nous l'avons fait à l'étape précédente, ouvrez ce fichier avec votre éditeur de texte préféré et insérez le code suivant:
corps marge: 0; rembourrage: 0; arrière-plan: # 1d1d1d; font-family: "Lucida Grande", Verdana, sans-serif; taille de police: 100%; ul # slide-navigation list-style: none; taille de police: .75em; marge: 30px 0; ul # glissement-navigation li.sliding-élément h3, ul # glissement-navigation li.sliding-élément a display: block; largeur: 150px; rembourrage: 5px 15px; marge: 0; marge inférieure: 5px; ul # slide-navigation li.sliding-element h3 color: #fff; arrière-plan: # 333; bordure: 1px solide # 1a1a1a; poids de police: normal; ul # slide-navigation li.sliding-element a color: # 999; arrière-plan: # 222; bordure: 1px solide # 1a1a1a; texte-décoration: aucun; ul # slide-navigation li.sliding-element a: hover color: # ffff66;
À ce stade, votre page demo.html devrait ressembler à ceci:
Alors, il est enfin temps de commencer à utiliser jQuery. Mais avant de pouvoir commencer, nous devons faire quelques choses:
Ceci est ce que votre fichier HTML
devrait ressembler à maintenant:Effet de navigation à l'aide de jQuery
Maintenant, nous allons créer la fonction qui fera tout le travail "lourd" pour que l’effet glissant fonctionne. Cette fonction prendra cinq paramètres (navigation_id, pad_out, pad_in, time et multiplier) et les utilisera comme suit:
Alors, ouvrez votre fichier slide_effect.js et insérez le code suivant:
function slide (navigation_id, pad_out, pad_in, time, multiplier) // crée les chemins cibles var_liste_liste = ID_de_la_chaude + "li.sliding-element"; var link_elements = list_elements + "a"; // lance le minuteur utilisé pour l'animation glissante var timer = 0; // crée l'animation de la diapositive pour tous les éléments de la liste $ (liste_éléments) .each (fonction (i) // marge de gauche = - ([largeur de l'élément] + [remplissage vertical total de l'élément]) $ (this) .css ( "margin-left", "- 180px"); // met à jour le temporisateur = (minuteur * multiplicateur + temps); $ (this) .animate (marginLeft: "0", timer); $ (this) .animate (marginLeft: "15px", timer); $ (this) .animate (marginLeft: "0", timer);); // crée l'effet hover-slide pour tous les éléments de lien $ (link_elements) .each (function (i) $ (this) .hover (function () $ (this) .animate (paddingLeft: pad_out, 150) ;, function () $ (this) .animate (paddingLeft: pad_in, 150);););
Pour déclencher le script, il suffit d’appeler la fonction une fois la page chargée. Il y a deux endroits pour mettre l'extrait de code suivant. Il peut être écrit dans le fichier glissement_effect.js (j'ai choisi cette option pour ce tutoriel) ou appelé dans le code HTML à l'aide d'un
Par Bedrich Rios
Notez que j'ai ajouté l'image à l'intérieur de l'élément "navigation-block" et lui donnez un identifiant appelé "hide". J'ai également ajouté un élément d'en-tête et un sous-titre. Maintenant, nous ajoutons un peu de CSS supplémentaire à notre fichier styles.css comme suit:
h2 color: # 999; marge inférieure: 0; marge gauche: 13px; fond: url (navigation.jpg) no-repeat; hauteur: 40px; h2 span display: none; p color: # ffff66; marge supérieure: .5em; taille de police: .75em; padding-left: 15px; # navigation-block position: relative; en haut: 200px; à gauche: 200px; #hide position: absolute; en haut: 30px; à gauche: -190px;
Alors d'abord dans le
Notez également que l'élément "navigation-block" a maintenant une position relative, de sorte que nous pouvons déplacer l'image "cacher" vers la gauche. Cela fera apparaître les onglets en dessous.
Enfin, pour donner un peu de finition à nos onglets, j'ai ajouté une image d'arrière-plan subtile qui ressemble à un ombrage semblable à celui-ci:
ul # glissement-navigation li.sliding-element h3 color: #fff; background: # 333 url (heading_bg.jpg) repeat-y; poids de police: normal;
Et nous avons fini!
Voir l'effet final
Télécharger le HTML / Images / JS
Accentsconagua