Le menu déroulant est souvent rencontré dans mon développement, mais aucun projet ne doit être réécrit. Bien qu'il soit simple mais très difficile de le modifier, je suis toujours relativement paresseux. Aujourd'hui, j'ai le temps d'organiser les menus dans mon développement de projet précédent et d'écrire une version générale. Je n'aurai pas besoin d'être si gênant à l'avenir.
Caractéristiques
Le menu compilé aujourd'hui est développé par JQuery + CSS avec les caractéristiques suivantes:
1. Volyvalerie forte
Il y avait un problème avec un menu déroulant que j'ai utilisé auparavant, et la navigation principale et le sous-menu doivent être définis séparément. Par exemple, le menu de deuxième niveau est class = "first_menu", le menu de troisième niveau est class = "second_menu" ... et ainsi de suite. Il y a un problème avec cette méthode d'écriture, à savoir qu'il n'est pas propice à des programmeurs effectuant une sortie de boucle. Ce menu n'a besoin que d'introduire un style CSS, sans avoir besoin de définir un menu à plusieurs niveaux.
2. Beau instructions de traction d'appel automatique
Dans le passé, nous ajoutions manuellement une classe déroulante au menu déroulant. Maintenant, nous n'avons qu'à définir le style de l'effet déroulant dans le CSS, et le code recherchera automatiquement le menu déroulant et ajoutera des flèches d'indicateur;
3. Appel simple
La liste de sorties du programmeur est simple et ne nécessite pas beaucoup de jugement, appelez simplement les données du menu récursivement.
accomplir
1. Code HTML
Tout d'abord, nous publions des données de menu sur la page, qui se compose d'UL et de Li pour former une liste de menu. Le code de structure spécifique est le suivant:
<ul> <li> <a href = "#"> Accueil </a> </li> <li> <a href = "#"> menu un </a> <ul> <li> <a href = "#"> rock coaster </a> </li> <li> <a href = "#"> Volcanic Erution </a> </li> <li> <a href = "" " Oiseau </a> </li> </li> </li> <li> <a href = "#"> menu deux </a> <ul> <li> <a href = "#"> À propos de nous </a> <ul> <li> <a href = "#"> Geographical Geo </a> <ul> <li> <a href = "#"> Flying Pigon </a> href = "#"> naissance et éternel </a> </li> <li> <a href = "#"> href = "#"> réussi </a> </li> </li> </li> <li> <a href = "#"> Database </a> <ul> <li> <a href = "#"> TABLEAU DE DATABASE </a> href = "#"> Encryption de données </a> </li> <li> <a href = "#"> Modélisation des données </a> </li> </li> </li> <li> <a href = "#"> C Camera </a> </li> </li> </li> </li> <li> <a href = "#" "
Certains codes HTML de base sont simples et n'ont pas besoin d'expliquer la signification du code. Ils mettent l'accent sur la structure du code: si le deuxième niveau, le troisième niveau ou plusieurs menus de niveau sont principalement imbriqués UL; Le nom de la feuille de style est également très célibataire, et le sous-menu est le style "Sub_menu", qui est très propice aux appels de boucle de code de programme.
2. Style CSS
Le code de style CSS est également très simple, le code spécifique est le suivant:
a {text-décoration: aucun; } ul, li {list-style: Aucun; marge: 0; rembourrage: 0; } / * Menu de définition * /. Menue li {background: # 111; Couleur: #FFF; hauteur: 30px; hauteur de ligne: 30px; Position: relative; flottant: à gauche; marge droite: 5px; Largeur: 100px; Texte-aligne: Centre; Font-Family: Arial, Helvetica, Sans-Serif; } .Mue li a {couleur: #fff; taille de police: 14px; Affichage: bloc; } / * Style de menu déroulant * / ul.sub_menu {position: absolu; largeur: 100px; Affichage: aucun; Z-Index: 999; } .Mue li ul.sub_menu li {fond: aucun; Couleur: # 555; taille de police: 12px; Border-Bottom: 1px # 333 solide; Position: relative; Largeur: 100px; hauteur: 30px; } .Mue li ul.sub_menu li.last {border-bottom: aucun; } / * js ajoutera cette classe au dernier Li, supprimez l'effet de bordure de bordure * /. Menue li ul.sub_menu li a {background: # 222; Couleur: # 888; Affichage: bloc; hauteur: 30px; } .Mue li ul.sub_menu li a: hover, .mue li ul.sub_menu li a.now {background: # f90; couleur: #fff;}. Menue li.now, .mue li.current {background: # f60; couleur: #fff;} / * s'il y a une classe ajoutée par le menu de drop-down * /. Contexte: URL (arrow.png) sans répétition à droite; Padding-droite: 15px;} / * La flèche de navigation principale est en panne * /. Menue li a.hasmenu {Background: URL (arrow.png) sans répétition droite; Padding-droite: 15px; position d'arrière-plan: droite -30px;} / * la flèche de menu déroulant est correcte * /. Menue li ul.sub_menu li a.hasmenu {background: # 222 url (arrow.png) sans repaire NO-REPEAT RORGET TOP;}. Menue Li ul.sub_menu Li A.Hasmenu: Hover {Background: # F90 URL (Arrow.png) sans répétition de droite; couleur: #ffff;}Ici, je ne soulignerai que deux précautions:
1. La différence entre absolu et relatif en position
Absolu: Positionnement absolu, CSS est écrit comme «position: absolue», et son positionnement est divisé en deux situations, comme suit:
A. Si le haut, la droite, le bas et la gauche ne sont pas définis, la valeur par défaut est au point d'origine basé sur le "point d'origine de la zone de contenu" du parent.
B. Il y a des cas où le haut, la droite, le bas et la gauche sont définis. Il y a deux situations comme suit:
(1). Le parent n'a pas d'attribut de position et le coin supérieur gauche du navigateur (c'est-à-dire le corps) est positionné comme le "point de coordonnée d'origine". La position est déterminée par les attributs supérieurs, droits, inférieurs et gauche.
(2). Le parent a un attribut de position, et le "point d'origine" de coordonnées du parent "est le point d'origine.
Relatif: positionnement relatif, CSS est écrit comme "position: relative;", se référant au "point d'origine de la zone de contenu" du parent comme le point d'origine, et sans parent, le "point d'origine de la zone de contenu du corps" comme point d'origine. La position est déterminée par les attributs supérieurs, droits, inférieurs et gauche, et il a la fonction de «hauteur d'étirement ou d'occupation».
Les deux différences ci-dessus sont très importantes et sont une technique très courante. Vous devez les distinguer. J'ai perdu beaucoup de temps dans le développement et j'ai trouvé des problèmes. En fait, il est causé par ces deux attributs.
2. Utilisez la position d'arrière-plan
Parfois, afin d'améliorer la vitesse du site Web et de faciliter la gestion du site Web, nous placons souvent des petites images couramment utilisées sur une grande image. Lorsque CSS a besoin de petites images correspondantes, elle peut être réalisée grâce à cette méthode. Tant que nous comprenons ce que cela signifie, il est très pratique d'appeler. Cette méthode explique que le point blanc est la fonction d'interception de l'image et que les détails d'utilisation sont les suivants:
grammaire:
Position d'arrière-plan: longueur || longueur
Position d'arrière-plan: position || position
Valeur:
Longueur: pourcentage | La valeur de longueur constituée de nombres de points flottants et d'identifiants unitaires.
Position: haut | Centre | Bas | Gauche | Centre | droite
illustrer:
Définit ou récupère l'emplacement de l'image d'arrière-plan de l'objet. La propriété d'image d'arrière-plan doit être spécifiée en premier. Ce positionnement d'attribut n'est pas affecté par les paramètres d'attribut de patch de l'objet (rembourrage). La valeur par défaut est: 0% 0%. À l'heure actuelle, l'image d'arrière-plan sera positionnée dans le coin supérieur gauche de la zone de contenu où l'objet n'inclut pas les correctifs (rembourrage). Si une seule valeur est spécifiée, la valeur sera utilisée pour les coordonnées horizontales. L'ordonnée sera par défaut à 50%. Si deux valeurs sont spécifiées, la deuxième valeur est utilisée pour l'ordonnée. Si la valeur est définie sur le centre de droite, car à droite, car la valeur de l'axe horizontal remplacera la valeur centrale, l'image d'arrière-plan sera positionnée vers la droite. Voici quelques équations
En haut à gauche, le haut gauche équivaut à 0% 0%.
Top, haut en haut, haut central est équivalent à 50% 0%.
En haut à droite, en haut à droite équivaut à 100% 0%.
Gauche, centre gauche, centre à gauche équivaut à 0% 50%.
Centre et centre central équivaut à 50% 50%.
Droite, centre droit, centre à droite équivaut à 100% 50%.
En bas à gauche, le bas gauche équivaut à 0% à 100%.
En bas, en bas au centre, en bas du bas équivalent à 50% 100%.
En bas à droite, le bas à droite équivaut à 100% 100%
3. Code js
Ce menu est basé sur jQuery, donc vous devez d'abord présenter la base de code jQuery, puis écrire le code JS suivant pour implémenter le menu déroulant.
<script src = "js / jquery.min.js"> </ script> <cript> $ (document) .ready (function () {// Définir la mise en évidence par défaut pour la navigation n'a rien à voir avec ce menu $ ("ul.Menue li.muense_li: eq (0)"). AddClass ("Current") Menu pour le menu * / // Ajouter le style pour le dernier li du Submenu pour RQuery start * / // Ajouter le style pour le dernier li du Submenu pour REVORY START * / // dernier souligner $ (". sub_menu"). trouver ("li: dernier-enfant"). addClass ("dernier") // transf tout le LI pour déterminer si le sous-menu est inclus. if ($ (this) .find ("ul"). length! = 0) {$ (this) .find ("a: premier"). addClass ("Hasmeu")}}) // $ (". menue li"). hover (function () {$ (this) .addclass ("maintenant"); var menu = $ (this); menu.find (ul.sub_menu: d'abord "). SubMenu.css ({Left: "100px", en haut: "0px"}) $ (". sub_menu li"). hover (function () {$ (this) .find ("a: premier"). addclass ("maintenant") $ (this) .find ("ul: premier"). show ();}, function () { $ (this) .find ("A: First"). RemoveClass ("Now") $ (this) .find ("ul: premier"). Hide ()}); / * jQuery menu end * /}) </ script>Grâce aux étapes ci-dessus, un menu à plusieurs niveaux général est réalisé. Le code ci-dessus est l'accumulation de mon développement quotidien. En raison de mon niveau limité, il peut y avoir de nombreuses erreurs. J'espère que mes collègues critiqueront et corrigeront ou proposeront des codes plus optimisés pour ma référence. Merci.
Le code d'implémentation ci-dessus du menu déroulant Universal Infinitus est tout le contenu que j'ai partagé avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.