Zwei einfache Beispiele für Menünavigationsleisten

Zwei einfache Beispiele für Menünavigationsleisten

Menüleiste Beispiel 1:


Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<Kopf>
<script Typ="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script</a> Typ="text/javascript">
$(Funktion() {
$("#container .menu1 ul li").klick(function() {
var index = $("#container .menu1 ul li").index(dies);
$(diese).addClass("bg").geschwister().removeClass();
$("#container .menu2 ul li ul").eq(index).show().parent().siblings("li").children("ul").hide();
})
})
</script><style type="text/css">
Körper
{
Rand: 0;
Polsterung: 0;
Schriftfamilie: „Schriftfamilie“;
Schriftgröße: 9pt;
Farbe: #FFFFFF;
Schriftstärke: fett;
}
#Container
{
Breite: 100 %; /* 1200px; */
Höhe: automatisch;
Rand: 0 automatisch;
/* Rahmen: 1px #1025c0 durchgezogen; */
/* veröffentlicht am 19.10.2011 */
/* Rand: 0; */
Polsterung: 0px;
Schriftfamilie: „Schriftfamilie“;
Schriftgröße: 9pt;
Farbe: #FFFFFF;
Schriftstärke: fett;
}
#container .menü1
{
Breite: 684px;
Höhe: 34px;
Rand: keiner;
Hintergrund: URL (/images/cnblogs_com/xugang/sadasd_09.png) keine Wiederholung;
/*Hintergrund: URL (<a href="http://www.webdm.cn/images/20101213/2/menu1.gif">http://www.webdm.cn/images/20101213/2/menu1.gif</a>) keine Wiederholung;
Hintergrundfarbe: #1B5582;*/
}
#container .menu1 ul
{
Rand: 0;
/* Polsterung: 0; */
Polsterung links: 0px;
Polsterung rechts: 0px;
Polsterung unten: 0px;
Polsterung oben: 4px;
Position: relativ;
Rand links: 4px; /* xugang-Stil für Menüauswahlelemente der ersten Ebene*/
}
#container .menu1 ul li
{ /*Rand: 1px #1025c0 durchgezogen; Test*/
schweben: links;
Höhe: 25px;
Breite: 110px;
Zeilenhöhe: 25px;
Listenstil: keiner;
Textausrichtung: zentriert;
Cursor: Zeiger;
/* Farbe: #fffff; */
padding-left: 2px; /* xugang Menüauswahlelement der ersten Ebene*/
/* margin-left: 1px; xugang Das Menüauswahlelement der ersten Ebene kann das Menü der ersten Ebene problemlos dynamisch nach rechts verschieben */
}
#container .menu2
{
Breite: 100 %; /* 1000px; */
Höhe: 25px;
Rand: keiner;
Farbe: #000000;
Schriftstärke: normal;
Hintergrundfarbe: #C9DEFA; /* #DFF0FF Untermenüfarbe*/
Polsterung links: 0px; /* xugang */
Polsterung oben: 0px; /* xugang */
Rand links: 0px; /* xugang */
}
#container .menu2 ul
{
Rand: 0; /* ursprünglicher Rand von xugang: 0; */
Polsterung: 0;
}
#container .menu2 ul li
{
Höhe: 30px;
Zeilenhöhe: 30px;
Listenstil: keiner;
schweben: links;
Cursor: Zeiger;
}
#container .menu2 ul li ul li
{ /* Rahmen: 1px #1025c0 durchgezogen; Test*/
schweben: links;
Polsterung oben: 0px;
Polsterung unten: 0px;
Polsterung links: 40px;
Polsterung rechts: 30px; /* xugang */
Höhe: 25px;
Zeilenhöhe: 25px;
Listenstil: keiner;
}
.bg
{
Schriftgröße: 12pt;
/* Schriftstärke: normal;*/
/* Textdekoration: unterstreichen; blinken */
Hintergrundfarbe: #1B5582; /* #1B5582 Hintergrund für Menüauswahl der ersten Ebene*/
}
.verstecken
{
Anzeige: keine;
}
.menu_a1{ Anzeige: Block; Farbe: #ffffff; Textdekoration: keine !wichtig; }
.menu_a2{ Anzeige: Block; Farbe: #000000; Textdekoration: keine !wichtig; }
</Stil>
</Kopf>
<Text>
<div id="Behälter">
<div Klasse="Menü1">
<ul>
<li class="bg"><a href="#" class="menu_a1">Erste Spalte</a></li>
<li><a href="#" class="menu_a1">Zweite Spalte</a></li>
<li><a href="#" class="menu_a1">Dritte Spalte</a></li>
<li><a href="#" class="menu_a1">Vierte Spalte</a></li>
<li><a href="#" class="menu_a1">Fünfte Spalte</a></li>
<li><a href="#" class="menu_a1">Sechste Spalte</a></li>
</ul>
</div>
<div Klasse="Menü2">
<ul>
<li>
<ul>
<li><a href="#" class="menu_a2">Erste Spalte</a></li>
<li><a href="#" class="menu_a2">Erste Spalte</a></li>
<li><a href="#" class="menu_a2">Erste Spalte</a></li>
</ul>
</li>
<li>
<ul Klasse="ausblenden">
<li>Zweite Spalte</li><li>Zweite Spalte</li><li>Zweite Spalte</li>
</ul>
</li>
<li>
<ul Klasse="ausblenden">
<li>Dritte Spalte</li><li>Dritte Spalte</li><li>Dritte Spalte</li>
</ul>
</li>
<li>
<ul Klasse="ausblenden">
<li>Vierte Spalte</li><li>Vierte Spalte</li><li>Vierte Spalte</li>
</ul>
</li>
<li>
<ul Klasse="ausblenden">
<li>Fünfte Spalte</li><li>Fünfte Spalte</li><li>Fünfte Spalte</li>
</ul>
</li>
<li>
<ul Klasse="ausblenden">
<li>Sechste Spalte</li><li>Sechste Spalte</li><li>Sechste Spalte</li>
</ul>
</li>
</ul>
</div>
</div>
<div Stil="Breite:400px; Höhe:300px; Hintergrundfarbe:rot;"></div>

</body>
</html>


Menüleiste Beispiel 2:




Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<title>Regionenliste der Gelben Seiten</title>
<style type="text/css">
body {Hintergrund:#ccc;Farbe:#000;Schriftart: normal normal normal 12px/180% Tahoma, Arial, Helvetica, serifenlos, "宋体";Textausrichtung:zentriert;}
.nav {Position: relativ;Hintergrund: URL(/images/cnblogs_com/xugang/nav_bg.png) keine Wiederholung 0 -36px;Breite:960px;Höhe:36px;}
.navinner {Hintergrund: URL (/images/cnblogs_com/xugang/nav_bg.png) keine Wiederholung 100 % -72px;}
.navlist {Höhe: 36px;Zeilenhöhe: 36px;Überlauf: ausgeblendet;Rand: 0 10px;Hintergrund: URL (/images/cnblogs_com/xugang/nav_bg.png) repeat-x 0 0;}
.nav li {float: left;display: inline;margin: 0 0 0 -2px;padding: 0 4px 0 6px;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -108px;}
.nav a {Anzeige: Block;Breite: 102px;Textausrichtung: Mitte;Schriftgröße: 120 %; Textdekoration: keine;}
.nav a:link, .nav a:besucht {color: #fff;text-decoration:none;}
.nav a:hover, .nav a:active {color: #fff;font-weight: bold;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 50% -144px;text-decoration:none;}
</Stil>
</Kopf>
<Text>
<div Klasse="nav">
<div Klasse="navinner">
<ul Klasse="Navigationsliste">
<li><a href="https://www.jb51.net/">https://www.jb51.net/</a>" title="Startseite">Startseite</a></li>
<li><a href="<a href="https://www.jb51.net/cat.html">https://www.jb51.net/cat.html</a>" title="Kategorienliste" rel="nofollow">Kategorienliste</a></li>
<li><a href="<a href="https://www.jb51.net/loc.html">https://www.jb51.net/loc.html</a>" title="Regionenliste" rel="nofollow">Regionenliste</a></li>
<li><a href="<a href="https://www.jb51.net/trade.html">https://www.jb51.net/trade.html</a>" title="Angebots- und Nachfragemöglichkeiten" rel="nofollow">Angebots- und Nachfragemöglichkeiten</a></li>
<li><a href="<a href="https://www.jb51.net/news.html">https://www.jb51.net/news.html</a>" title="Branchennachrichten" rel="nofollow">Branchennachrichten</a></li>
<li><a href="<a href="https://www.jb51.net/submit.html">https://www.jb51.net/submit.html</a>" title="Unternehmen übermitteln" rel="nofollow">Unternehmen übermitteln</a></li>
<li><a href="<a href="https://www.jb51.net/join.html">https://www.jb51.net/join.html</a>" title="Geschäftsmöglichkeiten veröffentlichen" rel="nofollow">Geschäftsmöglichkeiten veröffentlichen</a></li>
<li><a href="<a href="https://www.jb51.net/find.html">https://www.jb51.net/find.html</a>" title="Erweiterte Suche" rel="nofollow">Erweiterte Suche</a></li>
</ul>
</div>
</div>
</body>
</html>

<<:  Lösen Sie das Fehlerproblem von Warnungen, die möglicherweise mit der Option „--fix“ behoben werden können, wenn Sie ein Vue-Projekt ausführen

>>:  Analyse des Produktstatus im interaktiven Design, der im Design nicht ignoriert werden kann

Artikel empfehlen

Verwenden Sie nginx, um Bildgrößen dynamisch zu konvertieren und Miniaturansichten zu generieren

Mit dem Nginx-Modul ngx_http_image_filter_module ...

Verstehen Sie alle Aspekte von HTTP-Headern mit Bildern und Text

Was sind HTTP-Header HTTP ist eine Abkürzung für ...

Erste Schritte beim Erstellen einer Website für Anfänger ③ Alias-Einträge (CNAME) und URL-Weiterleitung

①. So verwenden Sie den Alias-Eintrag (CNAME): Be...

Empfehlen Sie einen coolen blinkenden Alarmknopf

Die Wirkung ist wie folgt: Der Code lautet wie fo...

Verstehen Sie einfach die Schreib- und Ausführungsreihenfolge von MySQL-Anweisungen

Es gibt einen großen Unterschied zwischen der Sch...

Html+css, um reinen Text und Schaltflächen mit Symbolen zu erreichen

Dieser Artikel fasst die Implementierungsmethoden...

Ein kurzer Vortrag über die parasitäre Kompositionsvererbung in JavaScript

Vererbung von Kompositionen Kombinationsvererbung...

Eine detaillierte Einführung in die Verwendung von Blockkommentaren in HTML

Allgemeine Kommentare in HTML: <!--XXXXXXXX--&g...

MySQL Series 10 MySQL-Transaktionsisolierung zur Implementierung der Parallelitätskontrolle

Inhaltsverzeichnis 1. Gleichzeitige Zugriffskontr...

Lernhinweise zum WeChat-Applet: Seitenkonfiguration und -routing

Ich habe kürzlich die Entwicklung kleiner Program...

Verwendung von VNode in Vue.js

Was ist VNode In vue.js gibt es eine VNode-Klasse...

JavaScript-Implementierung des Verifizierungscode-Falls

In diesem Artikel wird der spezifische Code für J...

Zusammenfassung einiger gängiger Methoden des JavaScript-Arrays

Inhaltsverzeichnis 1. So erstellen Sie ein Array ...

Grundkenntnisse im Website-Design: Neulinge lesen bitte dies

Heutzutage beginnen viele Leute damit, Websites z...

Flussdiagramm für den Webserverzugriff auf HTTP und HTTP-Zusammenarbeit

Ein Webserver kann mehrere Websites mit unabhängi...