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.
Le but idéal de ce menu de navigation est
Mettons en œuvre ce menu idéal étape par étape !
Je vois souvent beaucoup d'amis créer des menus sur les forums, mais pour être honnête, soit la structure est redondante, soit elle a une forme mais pas d'esprit, soit elle a 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 :
À mon avis, 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 balise dénuée de sens. Chaque balise 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 :
Eh bien, ce n'est qu'un squelette maintenant. Embellissons-le un peu et ajoutons quelques styles simples, nous devrions au moins supprimer les petits points et le disposer 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, la prochaine étape 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 existe de nombreuses merveilles. 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. (Les larmes arrivent...) Code source du bouton : http://bbs.blueidea.com/thread-2860891-1-1.html
Avec le code source du bouton conçu, cela enregistre la partie conception, ce qui est génial. Mais pour en faire un bouton à trois états, il faut modifier ce bouton. Avez-vous vu le septième objectif ? Nous allons créer 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. Comme le montre la figure 2
Image 1
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"
Figure 2
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 en avons fait une petite image d’arrière-plan.
Les graphiques requis dans
la figure 3
sont tous 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 dans une complaisance envers moi-même...
Ne soyez pas occupé, oh, mon Dieu, si j'installe des images de cette façon, comment puis-je réaliser le 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 ici que la structure commence à changer. Même si j'ai toujours voulu éviter que cela se produise, il semble que cette balise doive être ajoutée pour répondre aux exigences.)
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 avec une 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 : organiser automatiquement les éléments d'étiquette 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 que nous n'avons pas d'autre choix que de faire.
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)
Nous comprenons tous le principe des
« Attributs de bloc en ligne pour simuler la compatibilité » (Yi Fei).
Nous pouvons créer 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.
Nous définissons d'abord display:inline-block, puis nous utilisons padding pour étendre la distance des côtés. donnez-lui un peu 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 sur. soutenez-le. Ouvrez sa largeur et sa hauteur.
puis remettez-les en mode inline inline, 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.
Ensuite vient l'effet après le clic de la souris.
ok, il semble que vous ayez terminé. Vérifiez-le dans différents navigateurs. , il semble pouvoir obtenir des résultats satisfaisants. Ci-dessous une capture d'écran :
Figure 4
La version CSS pure du menu de la porte coulissante est fondamentalement prête.