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

Detaillierte Erläuterung der Nginx-Prozessverwaltungs- und Neuladeprinzipien

Prozessstrukturdiagramm Nginx ist eine Multiproze...

Index-Skip-Scan in MySQL 8.0

Vorwort MySQL 8.0.13 unterstützt nun den Index-Sk...

Analyse von MySQL-Parallelitätsproblemen und -Lösungen

Inhaltsverzeichnis 1. Hintergrund 2. Langsame Abf...

Beispielcode zur Implementierung der bidirektionalen Authentifizierung mit Nginx+SSL

Erstellen Sie zunächst ein Verzeichnis cd /etc/ng...

Top 10 Js Bildverarbeitungsbibliotheken

Inhaltsverzeichnis einführen 1. Pica 2. Lena.js 3...

Details zu Linux-Dateideskriptoren, Dateizeigern und Inodes

Inhaltsverzeichnis Linux - Dateideskriptor, Datei...

10 Aspekte, die beim Entwurf und Aufbau einer umfangreichen Website-Architektur berücksichtigt werden müssen

Wir diskutieren hier nicht über PHP-, JSP- oder ....

Analyse und Lösung der Gründe, warum HTML-externe Referenz-CSS-Dateien nicht effektiv sind

Als Frontend-Neuling habe ich einige Tage am Front...

Detailliertes Tutorial zur Installation und Bereitstellung von Nginx Linux

1. Einführung in Nginx Nginx ist ein Webserver, d...

CSS3-Kategoriemenüeffekt

Die CSS3-Kategoriemenüeffekte sind wie folgt: HTM...

Detaillierte Erklärung der neuen Funktionen von ES9: Asynchrone Iteration

Inhaltsverzeichnis Asynchrones Durchlaufen Asynch...

So installieren und konfigurieren Sie den Postfix-Mailserver unter CentOS 8

Postfix ist ein kostenloser und quelloffener MTA ...

JavaScript-Canvas zum Erzielen von Regentropfeneffekten

In diesem Artikelbeispiel wird der spezifische Co...

Lösung für das Problem, dass „order by“ in MySQL-Unterabfragen nicht wirksam ist

Durch Zufall entdeckte ich, dass eine SQL-Anweisu...

Detaillierte Erklärung von MySQL Explain

Bei unserer täglichen Arbeit führen wir manchmal ...