Code d'implémentation du menu déroulant universel Infinis-js tutoriel-php.cn

Cet article présente principalement le code d'implémentation du menu déroulant universel Infinity. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. sont souvent utilisés dans mon développement, je l'ai rencontré, mais chaque projet doit être réécrit. Bien qu'il soit simple à modifier, c'est encore relativement paresseux, j'ai le temps aujourd'hui de trier les menus de mon projet précédent. développement et écrire une version commune. Pas besoin de s'embêter.

Caractéristiques

Le menu compilé aujourd'hui a été développé par jquery+css et présente les fonctionnalités suivantes :

1. Forte polyvalence

Il y a eu un problème avec un menu déroulant que j'utilisais auparavant. Il nécessitait des paramètres séparés pour la navigation principale et les sous-menus. 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. Un problème avec cette façon d'écrire est qu'elle n'est pas propice aux programmeurs pour effectuer une sortie en boucle. Cependant, ce menu n'a besoin que d'introduire un style CSS, et il n'est pas nécessaire de le définir. un menu à plusieurs niveaux.

2. Bel appel automatique des instructions déroulantes

Dans le passé, nous ajoutions manuellement une classe d'affichage déroulante au menu déroulant, mais maintenant , il suffit de définir le menu déroulant dans le style CSS Effect, le code trouvera automatiquement le menu déroulant et ajoutera des flèches indicatrices

3. 🎜>Le programmeur affiche la liste simplement et ne nécessite pas beaucoup de jugement, juste une récursion. Appelez simplement les données du menu.

Implémentation

1. Code HTML

Nous affichons d'abord les données du menu sur la page, qui est composée de ul et li Créez une liste de menus. Le code de structure spécifique est le suivant :

Certains codes HTML de base sont très simples. Il n'est pas nécessaire d'expliquer la signification du code. J'insiste sur la structure du code : qu'il s'agisse du deuxième niveau. Que le menu à trois niveaux ou à plusieurs niveaux soit principalement imbriqué ul ; le nom de la feuille de style est également très simple et le sous-menu est le style "sub_menu", ce qui est très propice. pour programmer des appels de boucle de code.

<ul class="Menue">

 <li class="Menue_li"><a href="#">首页</a></li>

 <li class="Menue_li"><a href="#">菜单一</a>

  <ul class="sub_menu">

   <li><a href="#">过山车</a></li>

   <li><a href="#">火山爆发</a></li>

   <li><a href="#">小小鸟</a></li>

  </ul>

 </li>

 <li class="Menue_li"><a href="#">菜单二</a>

  <ul class="sub_menu">

   <li><a href="#">关于我们</a>

    <ul class="sub_menu">

     <li><a href="#">山高地缘</a>

      <ul class="sub_menu">

       <li><a href="#">飞鸽传书</a></li>

       <li><a href="#">生生世世</a></li>

       <li><a href="#">飞黄腾达</a></li>

      </ul>

     </li>

     <li><a href="#">数据库</a>

      <ul class="sub_menu">

       <li><a href="#">数据库表</a></li>

       <li><a href="#">数据加密</a></li>

       <li><a href="#">数据建模</a></li>

      </ul>

     </li>

     <li><a href="#">C摄像头</a></li>

    </ul>

   </li>

   <li><a href="#">测试产品</a></li>

  </ul>

 </li>

</ul>

Copier après la connexion

2. Style CSS

Le code de style CSS est également très simple. Le code spécifique est le suivant : <. 🎜>

Ici, je souligne seulement deux points d'attention :

1. La différence entre absolu et relatif en position

a { text-decoration:none; }

ul, li { list-style:none; margin:0; padding:0; }

/*定义菜单*/

.Menue li { background:#111; color:#fff; height:30px; line-height:30px; position:relative; float:left; margin-right:5px; width:100px; text-align:center; font-family:Arial, Helvetica, sans-serif; }

.Menue li a { color:#fff; font-size:14px; display:block; }

/*下拉菜单样式*/

ul.sub_menu { position:absolute;width:100px; display:none; z-index:999; }

.Menue li ul.sub_menu li { background:none; color:#555; font-size:12px; border-bottom:1px #333 solid; position:relative; width:100px; height:30px; }

.Menue li ul.sub_menu li.last { border-bottom:none; } /*js会对最后一个li添加该class，去掉border-bottom效果*/

.Menue li ul.sub_menu li a { background:#222; color:#888; display:block;height:30px; }

.Menue li ul.sub_menu li a:hover, .Menue li ul.sub_menu li a.now { background:#f90;color:#fff;}

.Menue li.now,.Menue li.current { background:#f60;color:#fff;}

/*如果有下拉菜单添加的class*/

.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;}/*主导航箭头向下*/

.Menue li a.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;background-position:right -30px;}/*下拉菜单箭头向右*/

.Menue li ul.sub_menu li a.hasmenu { background:#222 url(arrow.png) no-repeat right top;}

.Menue li ul.sub_menu li a.hasmenu:hover { background:#f90 url(arrow.png) no-repeat right top; color:#fff;}

Copier après la connexion

absolu : positionnement absolu, Méthode d'écriture CSS "position: absolue ; ", son positionnement est divisé en deux situations, comme suit :

A Lorsque Top, Right, Bottom et Left ne sont pas définis, la valeur par défaut est basée sur le parent ". point d'origine de la zone de contenu" comme point d'origine.

B. Il existe des cas où Top, Right, Bottom et Left sont définis. Il existe deux cas comme suit :

(1) Le parent n'a pas d'attribut de position et le supérieur. Le coin gauche du navigateur (c'est-à-dire le corps) est positionné comme le "point de coordonnées d'origine" et la position est déterminée par les attributs Haut, Droite, Bas et Gauche.

(2). Le parent a un attribut de position, et le "point de coordonnées d'origine" du parent est le point d'origine.

relatif : positionnement relatif, méthode d'écriture CSS "position : relative ;", faites référence au "point d'origine de la zone de contenu" du parent comme point d'origine, s'il n'y a pas de parent, utilisez le "point d'origine point de la zone de contenu" du Body comme point d'origine, la position est déterminée par les attributs Top, Right, Bottom et Left et a la fonction de "s'étendre ou d'occuper la hauteur".

Les deux différences ci-dessus sont très importantes et constituent une technique très courante. Il faut les distinguer. J'ai perdu beaucoup de temps à chercher des problèmes lors du développement à cause de ces deux attributs.

2. Utilisation de background-position

Parfois, afin d'améliorer la vitesse du site Web et de faciliter la gestion du site Web, nous mettons souvent de petites images couramment utilisées pour l'embellissement sur une grande image, et les besoins en CSS pour être proportionnellement petit. Cette méthode peut être utilisée lors de l'utilisation d'images. Tant que vous comprenez ce que cela signifie, il est très pratique de l'appeler. Le point clair de cette méthode est la fonction d'interception d'image. L'utilisation est détaillée comme suit :

Syntaxe :

background-position: length ||

background -position : position || position

Value:

length : Pourcent| Une valeur de longueur composée d'un nombre à virgule flottante et d'un identifiant d'unité.

position : haut | centre | bas | gauche | centre droit

Description :

Définir ou récupérer la position de l'image d'arrière-plan de l'objet. L'attribut background-image doit être spécifié en premier. Le positionnement de cette propriété n'est pas affecté par le paramètre de remplissage de l'objet. La valeur par défaut est : 0% 0%. À ce stade, l'image d'arrière-plan sera positionnée dans le coin supérieur gauche de la zone de contenu de l'objet hors remplissage. Si une seule valeur est spécifiée, cette valeur sera utilisée pour l'abscisse. L'ordonnée sera par défaut de 50 %. Si deux valeurs sont précisées, la deuxième valeur sera utilisée pour l'ordonnée. Si la valeur de réglage est au centre droit, car à droite comme la valeur de l'abscisse remplacera la valeur centrale, l'image d'arrière-plan sera positionnée à droite. Voici quelques équations

en haut à gauche, en haut à gauche équivaut à 0% 0%.

en haut, en haut au centre, au centre en haut équivaut à 50% 0%.

en haut à droite, en haut à droite équivaut à 100% 0%.
gauche, centre gauche, centre gauche équivaut à 0% 50%.

centre, centre centre équivaut à 50% 50 %.

droite, centre droit, centre droit équivaut à 100% 50%.

en bas à gauche, bas gauche équivaut à 0% 100%.

en bas, en bas au centre, le centre en bas équivaut à 50% 100%.

bottom right, right bottom 等价于 100% 100%

三、JS代码

本菜单是以jquery为基础的所以首先必须引入jquery代码库，然后编写如下JS代码实现下拉菜单。

<script src="js/jquery.min.js"></script>

<script>

$(document).ready(function(){

 //为导航设置默认高亮 与本菜单无关

 $("ul.Menue li.Menue_li:eq(0)").addClass("current")

 /*jquery menu 开始*/

 //为子菜单的最后一个li添加样式，适合为li添加下划线时去除最后一个的下划线

 $(".sub_menu").find("li:last-child").addClass("last")

 //遍历全部li，判断是否包含子菜单，如果包含则为其添加箭头指示状态

 $(".Menue li").each(function(){

 if($(this).find("ul").length!=0){$(this).find("a:first").addClass("hasmenu")}

 })

 

 //

 $(".Menue li").hover(function(){

 $(this).addClass("now");

 var menu = $(this);

  menu.find("ul.sub_menu:first").show();

 },function(){

 $(this).removeClass("now");

 $(this).find("ul.sub_menu:first").hide();

 });

 

 var submenu = $(".sub_menu").find(".sub_menu")

 submenu.css({left:"100px",top:"0px"})

 $(".sub_menu li").hover(function(){

 $(this).find("a:first").addClass("now")

 $(this).find("ul:first").show();

 },function(){

 $(this).find("a:first").removeClass("now")

 $(this).find("ul:first").hide()

 });

/*jquery menu 结束*/

})

</script>

Copier après la connexion

通过以上步骤就实现了一个通用的多级菜单，上面代码是本人日常开发中的积累，由于本人水平有限可能存在着许多错误希望同僚们批评指正或提出更优化的代码供本人参考，谢谢。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!