Implementierungscode des universellen Infinitus-Dropdown-Menüs

Dieser Artikel stellt hauptsächlich den Implementierungscode des universellen Infinity-Dropdown-Menüs vor. Jetzt kann ich ihn mit Ihnen teilen.

Dropdown-Menüs Ich bin in meiner Entwicklung oft darauf gestoßen, aber jedes Projekt muss neu geschrieben werden, aber es ist sehr mühsam, die Menüs in meinem vorherigen Projekt zu sortieren Entwicklung und Schreiben einer gemeinsamen Version. Kein Grund zur Sorge.

Funktionen

Das heute zusammengestellte Menü wurde von jquery+css entwickelt und verfügt über die folgenden Funktionen:

1. Starke Vielseitigkeit

Es gab ein Problem mit einem Dropdown-Menü, das ich zuvor verwendet habe. Es erforderte separate Einstellungen für die Hauptnavigation und die Untermenüs. Das Menü der zweiten Ebene ist beispielsweise class="first_menu", das Menü der dritten Ebene ist class= „second_menu“ ... und so weiter. Ein Problem bei dieser Schreibweise besteht darin, dass es für Programmierer nicht förderlich ist, eine Schleifenausgabe durchzuführen. Dieses Menü muss jedoch nur einen CSS-Stil einführen und es ist nicht erforderlich, ihn zu definieren ein mehrstufiges Menü.

2. Schöner automatischer Aufruf von Dropdown-Anweisungen

In der Vergangenheit haben wir manuell eine Dropdown-Anzeigeklasse zum Dropdown-Menü hinzugefügt, aber jetzt , wir müssen nur das Dropdown-Menü im CSS-Effektstil definieren, der Code findet automatisch das Dropdown-Menü und fügt Anzeigepfeile hinzu

Der Programmierer gibt die Liste einfach aus und erfordert nicht viel Urteilsvermögen, sondern nur eine Rekursion. Rufen Sie einfach die Menüdaten auf.

Implementierung

1. HTML-Code

Zuerst geben wir die Menüdaten auf der Seite aus, die sich aus ul zusammensetzt und li Erstellen Sie eine Menüliste. Der spezifische Strukturcode lautet wie folgt:

<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>

Einige grundlegende HTML-Codes sind sehr einfach und es besteht keine Notwendigkeit, die Bedeutung des Codes zu erklären Die Codestruktur: Ob es sich um die zweite oder die dritte Ebene handelt. Das Menü ist hauptsächlich verschachtelt. Der Name des Stylesheets ist ebenfalls sehr einfach, und das Untermenü ist der Stil „sub_menu“. Sehr förderlich für den Schleifenaufruf des Programmcodes.

2. CSS-Stil

Der spezifische Code ist wie folgt:

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;}

Hier betone ich nur zwei Punkte:

1. Der Unterschied zwischen absoluter und relativer Position

absolut: absolute Positionierung, CSS-Schreiben Bei der Methode „position: absolute;“ ist die Positionierung wie folgt in zwei Situationen unterteilt: des Inhaltsbereichs“ als Originalpunkt.

B. Es gibt Fälle, in denen Oben, Rechts, Unten und Links festgelegt sind. Es gibt zwei Fälle wie folgt:

(1) Das übergeordnete Element hat kein Positionsattribut Die obere linke Ecke des Browsers (d. h. Körper) wird als „ursprünglicher Koordinatenpunkt“ positioniert und die Position wird durch die Attribute „Oben“, „Rechts“, „Unten“ und „Links“ bestimmt.

(2) Das übergeordnete Element verfügt über ein Positionsattribut und der „ursprüngliche Koordinatenpunkt“ des übergeordneten Elements ist der ursprüngliche Punkt.

relative: Relative Positionierung, CSS-Schreibmethode „position: relative;“, beziehen Sie sich auf den „ursprünglichen Punkt des Inhaltsbereichs“ des übergeordneten Elements als ursprünglichen Punkt. Wenn kein übergeordnetes Element vorhanden ist, verwenden Sie „original“. „Punkt des Inhaltsbereichs“ des Körpers als ursprünglicher Punkt. Die Position wird durch die Attribute „Oben“, „Rechts“, „Unten“ und „Links“ bestimmt und hat die Funktion „Erweitern oder Besetzen der Höhe“.

Die beiden oben genannten Unterschiede sind sehr wichtig und eine sehr häufige Technik. Aufgrund dieser beiden Eigenschaften habe ich viel Zeit damit verschwendet, während der Entwicklung nach Problemen zu suchen.

2. Verwendung der Hintergrundposition

Um die Website-Geschwindigkeit zu verbessern und die Website-Verwaltung zu erleichtern, fügen wir häufig einige häufig verwendete kleine Bilder zur Verschönerung in ein großes Bild ein und benötigen CSS Diese Methode kann bei der Verwendung von Bildern verwendet werden. Solange Sie verstehen, was sie bedeutet, ist es sehr praktisch, sie aufzurufen. Der klare Sinn dieser Methode ist die Bildabfangfunktion. Die Verwendung wird wie folgt beschrieben:

Hintergrundposition: Länge ||

Hintergrundposition: Position ||. Position

Wert:

Länge: Prozent|.

Position :oben |. unten |. Zuerst muss das Attribut „Hintergrundbild“ angegeben werden. Diese Eigenschaftspositionierung wird durch die Abstandseinstellung des Objekts nicht beeinflusst. Der Standardwert ist: 0 % 0 %. Zu diesem Zeitpunkt wird das Hintergrundbild ohne Polsterung in der oberen linken Ecke des Inhaltsbereichs des Objekts positioniert. Wenn nur ein Wert angegeben ist, wird dieser Wert für die Abszisse verwendet. Die Ordinate wird standardmäßig auf 50 % eingestellt. Werden zwei Werte angegeben, wird der zweite Wert für die Ordinate verwendet. Wenn der Einstellungswert rechts zentriert ist, wird das Hintergrundbild rechts positioniert, da der Abszissenwert rechts den Mittelwert überschreibt. Hier sind einige Gleichungen

oben links, links oben entspricht 0 % 0 %.

oben, oben in der Mitte, Mitte oben entspricht 50 % 0 %.

rechts oben, oben rechts entspricht 100 % 0 %.

links, links Mitte, Mitte links entspricht 0 % 50 %.

Mitte, Mitte Mitte entspricht 50 % 50 %.

rechts, rechts in der Mitte, Mitte rechts entspricht 100 % 50 %.
unten links, links unten entspricht 0 % 100 %.

unten, unten Mitte, Mitte unten entspricht 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>

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

Das obige ist der detaillierte Inhalt vonImplementierungscode des universellen Infinitus-Dropdown-Menüs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!