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

MySQL-Sortierung mittels Index-Scan

Inhaltsverzeichnis Installieren Sie Sakila Index-...

Tutorials der MySQL-Reihe für Anfänger

Inhaltsverzeichnis 1. Grundkonzepte und Grundbefe...

Eine kurze Diskussion über die Semantik von HTML und einige einfache Optimierungen

1. Was ist Semantisierung? Erklärung zum Bing-Wör...

Tutorial zur Docker-Installation in einer Linux-Umgebung

1. Installationsumgebung Docker unterstützt die f...

So legen Sie eine feste IP-Adresse in einer virtuellen CentOS7-Maschine fest

Da meine Entwicklungsumgebung darin besteht, Cent...

Lernen Sie die Ausführungsreihenfolge von SQL-Abfragen von Grund auf

Die Ausführungsreihenfolge der SQL-Abfrageanweisu...

Teilen Sie 9 Linux Shell Scripting Tipps für die Praxis und Interviews

Vorsichtsmaßnahmen 1) Interpreter am Anfang hinzu...

Win10 MySQL 5.6.35 Winx64 kostenlose Installationsversion Konfigurations-Tutorial

Tutorial zur kostenlosen Konfiguration der mysql ...

Beispiel für reines CSS zum Ändern des Bildlaufleistenstils des Browsers

Verwenden Sie CSS, um den Stil der Bildlaufleiste...

Die vollständige Verwendung von Setup, Ref und Reactive in der Vue3-Kombinations-API

1. Erste Schritte mit setUp Stellen Sie kurz die ...

So verwenden Sie den Linux-Befehl md5sum

01. Befehlsübersicht md5sum - MD5-Prüfcode berech...

So machen Sie Formulareingaben und andere Textfelder in HTML schreibgeschützt und nicht bearbeitbar

Manchmal möchten wir, dass die Textfelder im Formu...

Ein unvollständiger Leitfaden zur JavaScript-Toolchain

Inhaltsverzeichnis Überblick Statische Typprüfung...

Vue implementiert eine Komponente zur dynamischen Abfrageregelgenerierung

1. Dynamische Abfrageregeln Die dynamischen Abfra...

Implementierungsbeispiel zum Schließen der Browserabmeldung in Vue

Inhaltsverzeichnis 1. beforeunload-Ereignis 2. Er...