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

Grundprinzipien des skalierbaren MySQL-Designs

Inhaltsverzeichnis Vorwort 1. Was ist Skalierbark...

So stellen Sie Dienste in Windows Server 2016 bereit (Grafisches Tutorial)

Einführung Wenn eine große Anzahl an Systemen ins...

So implementieren Sie das MySQL-Umschalten des Datenspeicherverzeichnisses

So implementieren Sie das MySQL-Umschalten des Da...

Installieren Sie mysql5.7 unter Ubuntu 18.04

Ubuntu 18.04 installiert MySQL 5.7 zu Ihrer Infor...

Grafisches Tutorial zur Installations- und Konfigurationsmethode für die Dekomprimierungsversion von MySQL 5.7.21 (Win10)

Die Installations- und Konfigurationsmethode der ...

DHTML-Objekte (gemeinsame Eigenschaften verschiedener HTML-Objekte)

!DOCTYPE Gibt die Document Type Definition (DTD) ...

MySQL Deep Paging (wie man schnell Millionen von Daten paginiert)

Inhaltsverzeichnis Vorwort Fall Optimierung Zusam...

Vue realisiert Web-Online-Chat-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

7 coole dynamische Website-Designs zur Inspiration

Im Bereich Design gibt es jedes Jahr unterschiedl...

Design Association: Warum haben Sie am falschen Ort gesucht?

Ich bin vor ein paar Tagen mit dem Bus zur Arbeit...

So setzen Sie Ihr Linux-Passwort zurück, wenn Sie es verloren haben

1. Das Startmenü besteht darin, den Cursor in die...

503 Dienst nicht verfügbar Fehlerlösungserklärung

1. Beim Öffnen der Webseite wird die Meldung „503...

Awk-Befehlszeile oder Skript, das Ihnen beim Sortieren von Textdateien hilft (empfohlen)

Awk ist ein leistungsfähiges Tool, das einige Auf...

JavaScript-Ereigniserfassungs-Blubbern und Erfassungsdetails

Inhaltsverzeichnis 1. Ereignisablauf 1. Konzept 2...

Detaillierte Darstellung des MySQL 5.7.33-Installationsprozesses

Inhaltsverzeichnis Download des Installationspake...