J’ai été assez occupé ces derniers temps et je ne m’occupe pas de mon blog depuis plusieurs mois. Je vais maintenant trier un exemple de menu récemment créé dans le projet et le partager.
La mise en page la plus couramment utilisée dans le système backend ou OA est souvent une mise en page plein écran, qui est généralement une mise en page avec trois lignes et deux colonnes en haut, au milieu et en bas, avec un en-tête, un pied de page, un menu de gauche et un cadre ifame. page à droite. Par conséquent, le menu secondaire pliable est souvent utilisé. Cet exemple vise à implémenter un tel menu pliable de tampon secondaire plus général, entièrement compatible et pouvant être mis en surbrillance.
Caractéristiques :
lacune :
Parlons brièvement de quelques idées simples et des problèmes rencontrés lors de la création d’un tel menu.
Généralement, lors de la création d'un effet, mon processus de production consiste d'abord à dessiner le contenu de la couche de structure HTML, puis à écrire le style, puis à ajouter de la cerise sur le gâteau des effets, tels que des effets spéciaux JS, etc. Je ne sais pas quel modèle de processus ont les experts.
Couche structurelle :
L'idée de la couche structurelle est généralement basée sur une compréhension perceptuelle, généralement avec un rendu, et sur la base de ce rendu, la structure HTML la plus concise est construite. Comme le montre l'image ci-dessus, la première impression qui apparaît est d'utiliser une liste non ordonnée d'UL, mais... il s'agit d'une liste imbriquée à deux niveaux. C'est le premier problème que nous devons considérer.
La structure devrait donc ressembler à ceci :
Lorsqu'il y a un menu de deuxième niveau, il s'agit d'une structure UL imbriquée. Lorsqu'il n'y a pas de menu de deuxième niveau, cela se présente comme suit :
<ul class="menu">
<li><a href="#none">Éléments de menu de premier niveau</a></li>
</ul>
Bien entendu, vous pouvez également utiliser la méthode de liste ordonnée dl-dt-dd pour créer cette structure imbriquée, en fonction de votre situation réelle.
Avec la couche structurelle la plus originale, vous devez ajouter quelques hooks nécessaires pour CSS et JS pour contrôler les styles et les effets. J'ai toujours été opposé à la méthode consistant à ajouter beaucoup de noms de classes, ce qui augmentera la taille de la page, donc le plus. rationalisé L'approche consiste à appliquer un ou deux noms de classe nécessaires au conteneur parent, puis à utiliser le sélecteur enfant (groupe) pour définir divers paramètres personnalisés dans la feuille de style. Dans la structure ci-dessus, combien de noms de classes pensez-vous utiliser pour définir tous les styles ?
Mon approche consiste à utiliser seulement trois noms de classe pour contrôler tous les affichages de style. L'un est l'UL de niveau supérieur, défini comme class="menu", l'autre est le conteneur du menu de deuxième niveau, c'est-à-dire que l'UL imbriqué définit une classe="level2", et enfin l'élément de menu de premier niveau. li définit un class="level1" , avec ces trois hooks, vous pouvez manipuler le style de la structure entière.
Couche de présentation :
Le paramétrage de la feuille de style est très simple. La seule chose à noter est que afin de permettre à JS de contrôler l'affichage et la masquage du menu secondaire et d'enregistrer l'état de surbrillance de l'élément actuellement sélectionné, je n'utilise pas le pseudo de survol. -class pour obtenir l'effet coulissant d'entrée et de sortie de la souris et utilisez JS pour le simuler. Les codes clés pour contrôler les styles à l'aide de JS sont les suivants :
Style de menu de premier niveau
/*Style à trois états du menu de premier niveau, pour les appels JS*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px;font-size:12px;color:#fff;background:url(../images/menubg.gif ) pas de répétition en haut à gauche ;}
.menu li.level1 a.hove{background-position:left -31px;}
.menu li.level1 a.cur{background-position:left -62px;}
Style de menu secondaire
/*Style à trois états du menu secondaire pour les appels JS*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px;font-size:12px;color:#fff;background:url(../images/menubg.gif ) pas de répétition en haut à gauche ;}
.menu li.level1 a.hove{background-position:left -31px;}
.menu li.level1 a.cur{background-position:left -62px;}
Couche comportementale :
Comme mentionné précédemment, nous n'avons pas défini l'effet à trois états du menu dans la feuille de style, nous devons donc lier les événements onmouseover, onmouseout et onclick à chaque élément de menu pour simuler cet effet. Dans la couche structure, nous n'avons pas défini l'ID de ce conteneur total, mais avons seulement défini un nom de classe, nous avons donc ajouté une méthode getElementsByClassName() étendue en JS (merci à mon ami Situ Zhengmei) pour obtenir cet objet en fonction de la classe nom. Utilisez des fermetures de boucle pour lier ces trois événements.
Je n'expliquerai pas le code détaillé un par un. Les commentaires dans la démo sont très clairs. Veuillez le télécharger sur votre ordinateur local pour le parcourir.
Si vous avez des questions, veuillez poster et discuter sur ce blog, je vous souhaite une bonne utilisation !
<li><a href="#none">Éléments de menu de premier niveau</a>
<ul>
<li><a href="#none">Éléments de menu de deuxième niveau</a></li>
</ul>
</li>