Wie man ein Drop-Down-Menü mit zwei Spalten
Drop-Down-Menüs sind ein Grundnahrungsmittel in Web-Design, einen ordentlich Weg, große Mengen an Navigationsoptionen auf kleinstem Raum horizontale oder vertikale präsentieren geworden. Es gibt mehrere Gründe, warum Sie Ihre Dropdown-Listen in mehrere Spalten aufteilen wollen. Wenn Ihr Linklisten zu lang wachsen und andere Designelemente verdeckt oder wenn Sie Bilder oder Unterkategorie Überschriften hinzufügen möchten, sind mehrere Spalten eine perfekte Lösung. Diese Technik kann ohne die Verwendung von zusätzlichen Skripten implementiert werden, aber es erfordert ein grundlegendes Verständnis von HTML und CSS.
Anweisungen
1 Erstellen eines Containers für Ihr Menü mit einem DIV und ihm eine besondere Klasse. Zum Beispiel:
< Div Class = "Menü" ><!--UL geht hier-->< / Div >
Die Klasse der "Menü" wird die Anzeige Steuern der Container und die ungeordnete Liste Stil die nächste erstellte verwendet.
2 Legen Sie eine ungeordnete Liste (UL) zwischen den DIV-tags wo "<!--UL geht hier-->" wird im letzten Beispiel gezeigt. Die Liste enthält die wichtigsten Navigation verbindet, die, wenn geklickt haben, wird die Dropdown Menüs zu produzieren. Zum Beispiel:
< Div Class = "Menü" >< Ul >
<li><a href="link1.html" target="_self">Main Link 1</a></li> <li><a href="link2.html" target="_self">Main Link 2</a> <!-- Sub menu goes here --> </li> <li><a href="#" target="_self" >Main Item 1</a></li>
</ul >< / Div >
Beachten Sie, dass das zweite Listenelement (LI) enthält einen Kommentar, der angibt, wo Ihre Untermenü eingefügt werden soll. Das Untermenü Liste in Ihren Hauptlink Artikel Liste-Tag können Sie ihre Sichtbarkeit zu steuern und in Spalten aufzuteilen.
3 Ersetzen Sie die "<!--Untermenü geht hier-->" Kommentar mit einer ungeordneten Liste mit Ihrem Untermenü Links. Zum Beispiel:
< Div Class = "Menü" >< Ul >
<li><a href="link1.html" target="_self">Main Link 1</a></li> <li><a href="link2.html" target="_self">Main Link 2</a> <ul> <li><a href="sub1.html" target="_self">Sub Link 1</a></li> <li><a href="sub2.html" target="_self">Sub Link 2</a></li> <li><a href="sub3.html" target="_self">Sub Link 3</a></li> <li><a href="sub4.html" target="_self">Sub Link 4</a></li> <li><a href="sub5.html" target="_self">Sub Link 5</a></li> <li><a href="sub6.html" target="_self">Sub Link 6</a></li> </ul> </li> <li><a href="#" target="_self" >Main Item 1</a></li>
</ul >< / Div >
4 Das Stylesheet für die Klasse "Menü" Stile hinzufügen, oder sie in Ihrem Dokument-Kopf mit "< Stil >" Tags einfügen. Ihre erste Stil sollte das allgemeine Aussehen Ihrer Navigationsleiste und Schriftart definieren. Zum Beispiel:
.Menu {}
border:none; border:0px; margin:0px; padding:0px; font-family: 'Arial', sans-serif; font-size:16px; font-weight:bold;
}
5 Geben Sie Ihre "Ul" Formatvorlage "List-Style" None eine horizontale Leiste erstellen. Sie müssen außerdem eine Höhe definieren:.Menu Ul {}
height:35px; list-style:none;
}
Geben Sie jedem Haupt "li" linken Float:.Menu li {}
float:left;
}
Haben Sie Stile für Ihre Hauptnavigationsleiste durch Hinzufügen einer Verknüpfung Definition hinzufügen abgeschlossen. Zumindest sollte Ihre Eigenschaften von Datenverknüpfung Folgendes beinhalten:
.Menu li {ein}
line-height: 35px; display:block; padding:0px 25px; text-align:center; text-decoration:none;
}
Die Line-Height-Eigenschaft zentriert den Text vertikal in der Bar, während die Polsterung ausreichend Platz zwischen jeder Link erstellt wird. Die Display-Eigenschaft von "Block" verwandelt "anklickbaren" Teil des Links in einen rechteckigen Raum für bessere User Experience.
6 Erstellen Sie eine Formatvorlage für das Untermenü "Ul", und geben sie die folgenden Eigenschaften:
.Menu li Ul {}
display:none; height:auto; padding:0px; margin:0px; position:absolute; width:450px; z-index:200;
}
Die absolute Position und Z-Index sind wesentlich dafür, dass das Untermenü unterhalb der Hauptnavigation und über der Oberseite von anderen Design-Elemente angezeigt werden. Definieren Sie eine Breite, halten Sie das Menü von dessen Inhalt zu ersticken.
7 Fügen Sie Stile für das Untermenü "li", enthält jedes Untermenü-Link. Definieren Sie eine Breite von "50 %" um Listenelemente zu fließen in zwei Spalten zu ermöglichen. Denken Sie daran, jeder macht eine Anzeigeeigenschaft von "Block", also die gesamte Zeile kann, anstatt nur den Text geklickt werden.
.Menu {} li li
display:block; float:left; margin:0px; padding:0px; width:50%;
}
Beenden Sie durch Hinzufügen einer Formatvorlage für Ihre Untermenü Liste definieren Sie Schriftart, Größe, Farbe, Hover-Verhalten und eine Anzeige der "Block."
Tipps & Warnungen
- Ihr Menü mithilfe ein jQuery Menü Skript hinzufügen anmutige Verzögerungen und hover Effekte zu Ihrem Menü zu verbessern.