Hors des sentiers battus Navigation avec jQuery

À peu près tous les sites Web utilisent les concepts de navigation habituels auxquels nous sommes tous habitués. Après un certain temps, cela peut devenir assez ennuyeux, en particulier pour les concepteurs qui aiment la créativité. Tandis que imitant le dock OS X et les piles ne sont pas nouvelles, ce n'est certainement pas commun.

Il y a quelques jours, Jeffrey a publié un article sur un concours potentiel «hors des sentiers battus» sur ThemeForest pour encourager les auteurs à mettre leurs chapeaux de créativité et à concevoir des modèles utilisables avec des créations «hors des sentiers battus».. Dans ce didacticiel, je vais vous expliquer comment faire cela avec les docks et piles de style OS X..

Sources et Crédits

Avant de commencer, je tiens à féliciter quelques personnes qui sont venues à la rescousse après avoir entendu mon appel à l'aide sur Twitter. Steve a mis à jour le script stacks de Harley en utilisant jQuery 1.2.6 pour utiliser la version 1.3.2 actuelle et Rey Bango de l'équipe jQuery m'a aidé à corriger un bogue. Ils ont tous deux sauté sur la tâche quelques minutes après mon appel à l'aide via Twitter. Merci beaucoup les gars! *Tonnerre d'applaudissement* :-RÉ

Sources originales

• "Ajout à notre bureau Leopard avec jQuery" par Harley via Net.tutsplus.com
• Interface: Menu Fisheye
• jqDock v1.2
• Exemple de modèle (Internet Encyclopedia) de Luka Cvrk

Notes rapides

Ces scripts reposent sur jQuery 1.3.2. Les exemples présentés sont compatibles avec tous les principaux navigateurs, y compris IE6, et permettent de garantir une dégradation progressive si JavaScript est désactivé ou désactivé..

Dock jQuery OS X n ° 1 (horizontal)

Le premier dock que nous construirons utilise le plugin jQuery Fisheye Menu mentionné ci-dessus. C'est assez léger (~ 7kb avec dépendances) mais la principale raison pour laquelle j'ai voulu utiliser celui-ci était parce que c'était incroyablement lisse, pas de bégaiement. Voir la démo.

Comme vous pouvez le constater dans la démo, le logiciel est incroyablement fluide et réactif. L'inconvénient est que vous ne pouvez pas utiliser le positionnement fixe si la page doit défiler car elle se casserait. Si vous n'en avez pas besoin dans la fenêtre du navigateur, cela fonctionne très bien.

C’est un excellent exemple de concepts «hors des sentiers battus» dans les sites Web et offre une interface interactive et amusante.

Fichiers requis (j'ai combiné le plug-in Fisheye et iutil.js dans les fichiers de démonstration).

• jQuery 1.3.2
• Interface: plug-in Menu Fisheye
• Interface: iutil.js (dépendance)

Le HTML

Nous allons envelopper nos images et nos titres dans des liens et les placer dans un div contenant. Ensuite, nous allons tout emballer dans un autre div contenant pour qu'il fonctionne correctement.

 
 
 Exemple 1 Exemple 2 Exemple 3 Tous les exemples Vidéo L'histoire Calendrier Liens RSS RSS2 
 

Notez que j'ai placé les titres dans des balises span afin que nous puissions les styler et permettre au plugin de les masquer / afficher si nécessaire.

Le CSS

Avec CSS, nous positionnons le quai où nous le voulons sur la page. Nous ne pouvons pas utiliser le positionnement fixe avec ce plugin ou il ne fonctionnera pas correctement.

 .dock-container position: relative; en haut: -8px; hauteur: 50px; padding-left: 20px;  a.dock-item display: block; largeur: 50px; position: absolue; en bas: 0; text-align: center; texte-décoration: aucun; couleur: # 333;  .dock-item span display: none; padding-left: 20px;  .dock-item img border: 0; marge: 5px 10px 0px; largeur: 100%; 

J'ai également placé un peu de CSS supplémentaire dans l'en-tête de la page, en dessous du CSS inclus ci-dessus. Je l'ai enveloppé dans des balises noscript au cas où un visiteur n'a pas JavaScript activé ou disponible, ce sera toujours une navigation utilisable. Je dois signaler que cela ne sera pas validé car la balise noscript n'est pas valide dans la section head, même si cela fonctionne dans tous les navigateurs actuels. ;-)

 #dock top: -32px;  a.dock-item position: relative; float: gauche; marge droite: 10px;  .dock-item span display: block; 

Le javascript

Nous allons importer nos fichiers JavaScript à partir de jQuery 1.3.2. Le fichier fisheye-iutil.min.js est la combinaison du plug-in Fisheye et de son fichier iutil.js dépendant. Nous allons créer le dernier fichier et y mettre notre JavaScript nécessaire pour initialiser le dock.

Nous allons maintenant initialiser le dock une fois la page chargée. Vous pouvez utiliser plusieurs options de plug-in pour personnaliser le dock en fonction de vos besoins en termes de positionnement et de fonctionnalités. Vous pouvez consulter la documentation en visitant le site répertorié sous les sources du plug-in Fisheye..

 $ (function () // initialisation du dock $ ('# dock'). Fisheye (maxWidth: 30, éléments: 'a', itemsText: 'span', conteneur: '.dock-container', itemWidth: 50, proximité: 60, alignement: 'à gauche', valign: 'en bas', halign: 'au centre'););

C'est tout ce qu'on peut en dire! :-RÉ

Station d'accueil jQuery OS X n ° 2 (verticale)

Le quai horizontal était facile et certainement une bonne idée à utiliser sur les sites Web. Il s’agit probablement du type le plus utilisé actuellement sur le Web. Essayons donc quelque chose de différent. Nous pourrions obtenir un peu plus "en dehors de la boîte" si nous faisions une navigation verticale à quai.

Ce dock s'appuie sur le plugin jqDock jQuery. Il a une taille approximative de 10 Ko, il a donc une taille supérieure de quelques ko à celle de la version précédente, mais pas beaucoup. L'inconvénient de ce plugin est qu'il n'est pas aussi lisse que le dock du plug-in Fisheye, même s'il reste très fluide et certainement utilisable. Ce plugin n'a pas non plus de problèmes avec le positionnement fixe. Voir la démo.

Le HTML

Nous allons mettre nos images dans une liste non ordonnée et les emballer dans des liens. Comme avec le dernier plugin, nous allons tout emballer dans un div contenant. Lorsque nous initialiserons le plugin, nous utiliserons le "ul" ici.

Vous remarquerez sur ce quai que nous n'avons pas de titres enveloppés dans des balises span. Au lieu de cela, ce plugin examinera la balise "title" pour chaque image et créera les titres de cette façon (si activé dans les options du plugin). Cela simplifie un peu le balisage, mais rend également les titres un peu moins personnalisables..

Le CSS

Nous positionnons le quai sur le côté gauche (peut être l'un ou l'autre) en utilisant un positionnement fixe. Nous allons lui laisser un peu d’espace entre elle et le haut de la fenêtre du navigateur pour des raisons d’esthétique et pour que les icônes ne disparaissent pas à l’agrandissement..

 #dockContainer position: fixed; en haut: 60px; à gauche: 6px;  #jqDock position: relative; en bas: 48px;  .jqDockLabel background: # 333; couleur: #fff; rembourrage: 3px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; 

Pour styliser les titres, nous pouvons utiliser la classe ".jqDockLabel". De plus, nous n’aurons pas besoin d’inclure de styles supplémentaires pour qu’il reste utilisable avec JavaScript désactivé. Ce n'est peut-être pas très joli mais c'est fonctionnel.

Le javascript

Nous apporterons la bibliothèque jQuery comme le précédent dock, ainsi que le plugin.

Nous initialisons le quai et définissons quelques options pour le personnaliser. Vous pouvez lire la documentation sur ces paramètres en visitant le site répertorié sous sources au début du didacticiel sur jqDock. Ce que je veux souligner ici, c’est l’option de durée. C'est l'heure de l'animation d'agrandissement en millisecondes. C'est bien de pouvoir changer la vitesse de la durée, mais cela semble devenir un peu discret, ce que je déteste.

 $ (function () var jqDockOpts = aligner: 'gauche', durée: 200, libellés: 'tc', taille: 48, distance: 85; $ ('# jqDock'). jqDock (jqDockOpts);) ;

Vous pouvez facilement modifier le positionnement du dock et des étiquettes, ainsi que la taille initiale des icônes et quelques autres options. Ce que je n’ai pas aimé de ce plugin, c’est qu’il grossit à la taille de l’icône. Le plugin précédent vous donne la possibilité de changer la taille à laquelle il grossit. C'est tout ce qu'on peut en dire!

jQuery OS X Stack and Drop Stack

Ceci est probablement mon style de navigation préféré parmi les trois présentés dans ce tutoriel.. Il est ultra léger (~ 1 Ko) et constitue une méthode de navigation vraiment originale "hors des sentiers battus" pour un site web. Avoir la navigation en bas à droite ou à gauche de la fenêtre du navigateur peut sembler un peu gênant, mais ce serait certainement créatif et économiser beaucoup d’espace. Voir la démo.

En écrivant cela, j'ai réalisé qu'il y avait probablement beaucoup de gens qui n'aimeraient pas leur navigation au bas de la page, alors j'ai pris quelques minutes de plus et ajouté une pile de liste déroulante aux exemples de fichiers.. De cette façon, la navigation apparaît de haut en bas pour pouvoir être utilisée en haut des pages..
Voir la démo.

Le HTML

Le code HTML est aussi simple que les deux exemples de dock. Nous allons tout placer dans un div contenant et placer toutes nos images et titres, qui sont encapsulés dans des liens, dans une liste non ordonnée.

 
  
 
Ouverture
 
Tous les exemples
 
Exemple 3
 
Exemple 2
 
Exemple 1
 
 

 .pile position: fixe; en bas: 28px; à droite: 40px;  .stack> img position: relative; curseur: pointeur; rembourrage en haut: 35px; z-index: 2;  .stack ul list-style: none; position: absolue; en haut: 5px; curseur: pointeur; z-index: 1;  .stack ul li position: absolute;  .stack ul li img border: 0;  .stack ul li span display: none;  .stack .openStack li span font-family: "Lucida Grande", Lucida, Verdana, sans-serif; bloc de visualisation; hauteur: 14px; position: absolue; en haut: 17px; à droite: 60px; hauteur de ligne: 14px; bordure: 0; couleur de fond: # 000; rembourrage: 3px 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; couleur: #fcfcfc; text-align: center; text-shadow: # 000 1px 1px 1px; opacité: 0,85; filtre: alpha (opacité = 85);  / * IE Corrige * / .stack _position: absolute;  .stack ul _z-index: -1; _top: -15px;  .stack ul li * right: 5px; 

 $ (function () // initialisation de la pile var openspeed = 300; var closespeed = 300; $ ('. stack> img'). toggle (function () var vertical = 0; var horizontal = 0; var $ el = $ (this); $ el.next (). children (). each (function () $ (this) .animate (top: '-' + vertical + 'px', gauche: horizontal + 'px' , openspeed); vertical = vertical + 55; horizontal = (horizontal + .75) * 2;); $ el.next (). animate (top: '-50px', à gauche: '10px', openspeed). addClass ('openStack') .find ('li a> img'). animate (width: '50px', marginLeft: '9px', openspeed); $ el.animate (paddingTop: '0'); , function () // inverse ci-dessus var $ el = $ (this); $ el.next (). removeClass ('openStack'). children ('li'). animate (top: '55px', gauche : '-10px', closespeed); $ el.next (). Find ('li a> img'). Animate (width: '79px', marginLeft: '0', closespeed); $ el.animate (paddingTop: '35';); // Empile une animation supplémentaire $ ('. stack li a'). hover (function () $ ("img", this) .animate (width: '56px ', 100); $ ("span", this) .animate (marginRight:' 30px ');, function () $ ("img", this) .an imate (width: '50px', 100); $ ("span", this) .animate (marginRight: '0'); ); );