Menu de navigation à porte coulissante divisée fabriqué à la main

Introduction : Cet article vous apprendra étape par étape comment créer un menu de navigation pour porte coulissante standard séparé à trois niveaux très cool. À partir des idées, des principes, des étapes et des méthodes, on peut dire que « tout est possible ». vous l'êtes, je pense que vous le ferez après avoir lu cet article , vous pourrez également créer votre propre très beau menu de navigation standard. Ce menu n'a pas de structure redondante et est propice à la sortie de données dynamiques. Il est très approprié pour une utilisation dans des projets ordinaires. Ce tutoriel parle des principes de base des portes coulissantes. Je pense qu'il sera utile à ces amis qui tâtonnent encore sur cette route ! Bien entendu, s’il y a des erreurs ou des problèmes, vous êtes invités à en discuter.

Les objectifs idéaux que ce menu de navigation souhaite atteindre sont :

1. Magnifique, avec de la personnalité.

2. La structure est claire, la sémantique est claire et il n'y a pas de balises redondantes.

3. Performance, structure et comportement sont séparés sur trois niveaux, sans aucune intrusion.

4. Propice à la sortie de données des programmes d’arrière-plan.

5. Le menu propose des changements d'effet à trois états.

6. Peut mettre en évidence et enregistrer les éléments de menu cliqués.

7. Largeur de texte adaptable. Lorsque la longueur du contenu du texte change, le bouton peut changer dans le temps.

8. Compatible avec tous les principaux navigateurs.

Mettons en œuvre ce menu idéal étape par étape !
Je vois souvent de nombreux amis créer des menus sur les forums, mais pour être honnête, soit ils sont structurellement redondants, soit ils ont une forme mais pas d'esprit, soit ils ont de l'esprit mais pas d'apparence. Et ce que nous voulons créer maintenant, c'est le meilleur menu. Que vous soyez débutant ou vétéran, vous devriez trouver quelque chose d'utile dans ce tutoriel.
La structure d'un menu idéal doit être propre, sans redondance et séparée. Cependant, pour diverses raisons, beaucoup de choses insignifiantes y seront ajoutées, et à la fin, elle sera de plus en plus éloignée du « propre ». . Par conséquent, avant d’élaborer un menu, certains principes doivent être gardés à l’esprit tout au long du processus de production et ne peuvent être entravés par aucune force extérieure.

Structure

Dans mon esprit, le menu standard idéal devrait avoir la structure suivante :

La structure originale du menu est maintenant disponible. Vous pouvez voir qu'il ne contient aucune étiquette dénuée de sens. Chaque étiquette a sa propre sémantique. Jetons un coup d'oeil dans le navigateur. Oh, c'est vraiment simple. C'est juste du texte original, comme, euh, c'est comme le menu que nous utilisons pour commander de la nourriture dans un restaurant. C'est probablement plus simple que ça, et il y a quelque chose devant chaque menu. .Un petit point ! Oh mon Dieu, nous sommes si loin de notre belle carte !

Style

D'accord, ce n'est qu'un squelette maintenant, embellissons-le un peu, ajoutons quelques styles simples, supprimons au moins les petits points et disposons-le horizontalement !

D'accord, ajoutons un peu de style !

Eh bien, regardez maintenant, nous avons atteint notre petit objectif.
Maintenant que le squelette est en place, l’étape suivante consiste à mettre de beaux vêtements sur chaque élément du menu.
Pour répondre à la première condition, il faut d’abord avoir un beau bouton et en dessiner un soi-même. Oh, je ne suis pas un artiste, c’est difficile ! Cependant, ne soyez pas trop impatient. Internet est si vaste qu’il y a de nombreuses merveilles à trouver. Peut-être que quelqu’un a déjà fait quelque chose de bien, je viens de chercher sur Google et j’en ai trouvé une. Merci ! (Les larmes arrivent...) Code source du bouton : http://bbs.blueidea.com/thread-2860891-1-1.html

Avec le code source du bouton conçu, il est idéal de sauvegarder la partie conception. Mais pour en faire un bouton à trois états, il faut modifier ce bouton. Avez-vous vu le septième objectif ? Nous créons un bouton adaptatif, nous devons donc effectuer un traitement sur ce bouton.

Nous montrons ces trois boutons sous trois états : lorsque la souris est éloignée, après avoir cliqué, et lorsque la souris est déplacée vers le haut. Pour créer un menu à porte coulissante, vous devez couper un bouton au milieu. placé à gauche, et l'image de droite est Placez-le sur le côté droit. Pour s'adapter à l'allongement du texte, la largeur de ce calque doit être un peu étirée. Cependant, cette image a un effet d'ombre très complexe et ne peut pas être étirée avec désinvolture, sinon l'effet ne sera pas le même. Ouvrons-le au milieu et étirons le côté gauche de l'image sur la droite vers l'avant. Nous l'avons donc d'abord découpé en six morceaux comme indiqué sur l'image, puis nous avons fusionné ces six images ensemble. Pourquoi est-ce ainsi ? Jetez un œil au principe des sprites CSS ! Je n'entrerai pas dans les détails ici. Vous pouvez lire mon autre article "Création d'une série de cartes de poker 1 --- Technologie d'optimisation de l'arrière-plan des images de sprites CSS"

Dans l'image ci-dessus, les première et deuxième images forment le style de menu normal (style par défaut), les troisième et quatrième images forment le style de défilement et les cinquième et sixième images forment le style d'élément de menu cliqué.
Nous avons spécifiquement extrait l'image de l'ombre et créé une petite image d'arrière-plan.

Les graphiques requis sont prêts. Ensuite, ajoutons cette image à l'élément de menu. Un bouton nécessite l'affichage de deux images. Tout le monde sur terre sait qu'une balise html ne peut contenir qu'une seule image (si vous constatez qu'une balise peut contenir deux images, dites-le-moi à temps et je vous offrirai un dîner !). Oh! Chaque élément de ma structure de menu a exactement deux balises, l'une est li et il y a une balise A, qui peut être utilisée pour contenir les images de gauche et de droite. Li est utilisé pour tenir l’image de gauche et A est utilisé pour tenir l’image de droite. Je m'admire vraiment, je peux trouver de si bonnes idées et je suis tellement complaisant avec moi-même...

Ne soyez pas occupé, oh mon Dieu, si j'installe des images comme celle-ci, comment puis-je atteindre mes trois états de défilement de la souris ? Nous devrions tous savoir qu'à l'exception de ce foutu IE6, d'autres navigateurs prennent actuellement en charge la pseudo-classe li:hover. Cependant, pour être compatible avec tous les principaux navigateurs (c’est notre 8ème objectif, ne l’oubliez pas !), cette méthode ne fonctionne pas. IE6 ne peut appliquer la pseudo-classe de survol que sur la balise A, et il ignore les autres balises !

Étant donné qu'IE6 ne peut appliquer la pseudo-classe de survol que sur la balise A, alors si nous voulons créer un menu de porte coulissante adaptatif, nous devons apporter quelques modifications structurelles. Il semble que nous ne puissions ajouter qu'une autre balise à la balise A, donc. la structure du menu Cela ressemblera à ceci. (Remarque : c'est là que la structure commence à changer. Même si j'ai toujours voulu éviter que cela se produise, il semble que pour répondre aux exigences, cette étiquette doit être ajoutée.)

Nous avons ajouté un conteneur span à la balise A, qui inclut le contenu du texte. Il y a maintenant deux étiquettes pouvant contenir deux images. Nous plaçons l'image de droite en arrière-plan de la balise A et l'alignons à droite, et plaçons l'image de gauche dans la balise SPAN et l'alignons à gauche. Cela affichera une forme complète de bouton.
Heureusement, même si une balise supplémentaire est ajoutée, elle n’est pas totalement dénuée de sémantique.

Bon, nos préparatifs sont presque terminés, il est temps de donner de nouveaux vêtements au menu.

Si nous voulons créer un menu à largeur adaptative, nous ne pouvons pas définir la valeur de largeur du menu, nous ne pouvons donc pas définir la largeur, puis la faire flotter vers la gauche comme nous le faisons habituellement lorsque nous créons un menu horizontal avec une largeur fixe. Si tel est le cas, lorsque la largeur de chaque élément de menu est différente, vous devez définir la largeur de chaque élément séparément, vous devez alors définir un ID ou une CLASSE pour chaque élément de menu, et cette méthode n'est pas propice à la boucle dynamique. sortie du programme d’arrière-plan.

Ce dont nous avons besoin, c'est d'organiser automatiquement chaque élément de menu dans une rangée de gauche à droite comme un élément en ligne. Ensuite, nous avons besoin que le menu soit affiché en ligne. OK, utilisons display:inline. C'est un attribut très utile : sa disposition analysée. peut répondre à nos exigences de base : les éléments d'étiquette sont automatiquement disposés de gauche à droite dans une rangée et la largeur de chaque élément peut être différente.

Si l'utilisation des attributs ci-dessus peut vraiment répondre à nos besoins, il n'y aura pas de contenu textuel comme celui-ci.
Bien que cet attribut puisse répondre aux besoins fondamentaux de notre projet, il présente une faiblesse très fatale : il ne peut pas définir les valeurs de largeur et de hauteur. Si vous n'y croyez pas, vous pouvez l'essayer. Il apparaît uniquement comme hauteur et largeur par défaut du texte. Il sera automatiquement masqué après avoir dépassé cette valeur de largeur et de hauteur. De cette façon, j'ai ici une image d'arrière-plan. Pour montrer l'effet de cette image, nous devons donner une largeur et une hauteur. Cela signifie que nous ne pouvons pas obtenir notre effet, ce qui est frustrant ! Heureusement, il existe un autre attribut : display:inline-block ; ses performances sont ce dont nous avons besoin.

Mais... cet attribut a aussi une faiblesse fatale, il ne peut être reconnu que par les navigateurs avancés tels que FF3. Les autres navigateurs ne peuvent que faire un détour. Oh-oh ! Par conséquent, combien il est important d’unifier les standards des navigateurs ! Il semble que HACK soit aussi un moyen de soulagement auquel nous devons faire face.

Heureusement, certains experts ont déjà trouvé une solution. Veuillez d’abord lire ces deux articles.

Tutoriels associés :
"Deux exemples d'application de display:inline-block" (Qin Ge)
"Attribut de bloc en ligne pour la compatibilité de la simulation" (Yi Fei)

Nous comprenons tous le principe, et nous pouvons réaliser un menu adaptatif basé sur les techniques fournies dans les deux articles ci-dessus.

Écrivons d'abord le style de l'image de droite, qui est appliqué à la balise du nœud enfant A de l'élément li.

li a{display:inline-block; padding-right:30px; padding-top:10px; /button.gif) pas de répétition à droite -36px ; décoration de texte : aucun ; taille de police : 12 px ; couleur :#fff;}

Nous définissons d'abord display:inline-block, puis nous utilisons le remplissage pour élargir ses marges afin qu'il dispose d'une certaine quantité d'espace pour remplir l'image. Notez que le chemin de l'image ici est remplacé par votre propre chemin. Définissez ensuite d'autres styles, tels que la suppression des soulignements, la couleur de la police, la taille de la police, etc. Réglez l'image pour qu'elle soit alignée à droite.

L'image sur le côté gauche du bouton est placée dans l'élément SPAN, alignez son image à gauche et définissez le remplissage pour étendre sa largeur et sa hauteur.

Remettez-les ensuite en mode en ligne, déclenchant la fonctionnalité haslayout d'IE.
Dans le code ci-dessus, nous voyons également une application HACK, *padding-bottom: 0; et *padding-top: 0;, qui sont utilisées pour résoudre les différents effets des navigateurs tels que IE et FF. Si vous ne me croyez pas, vous pouvez le supprimer et voir quel effet cela aura. Il y a un problème avec l'extension de hauteur sous IE.
Bon, il est maintenant temps d'écrire l'effet lorsque la souris est déplacée.

li a:hover{padding-right:30px;background:url(images/button.gif) no-repeat right -108px;}
li a:hover span{padding-left:30px;background:url(images/button.gif) no-repeat left -72px;font-weight:bold;}

Vient ensuite l'effet après le clic de la souris.

li a:active{padding-right:30px;background:url(images/button.gif) no-repeat right -180px;}
li a:active span{padding-left:30px;background:url(images/button.gif) no-repeat left -144px;font-weight:bold;}

ok, il semble que vous ayez terminé. Si vous le regardez dans différents navigateurs, il semble que vous puissiez obtenir des résultats satisfaisants.

La version CSS pure du menu de la porte coulissante est désormais pratiquement prête.