vertikale navigation, die zeigt, ausgeblendet im Untermenü klicken Sie mit JQuery
Ich versuche, ein Menü, das funktioniert wie das auf dieser flash-site:
Wenn ich auf "portfolio", nur dann auf die Unternavigation links offenbaren sich. Jetzt habe ich nur geschafft, eine typische vertikale "zeigen Unternavigation auf der hover-Menü" arbeiten.
Was erforderlich ist, ist, dass, sobald der entsprechende Menüpunkt ist es cicked, das Untermenü zeigt. Das Untermenü bleibt, enthüllt, wie die untermenüelemente schwebte über ausgewählt dann. Wenn der Untermenüpunkt aktiviert ist, zeigt der Inhalt, und sowohl die Menü-und Untermenü sichtbar bleiben (der ausgewählte Menü-und Untermenü-Element erhält eine eindeutige Farbe zu zeigen, die Navigations-Pfad). Uff.
Hier ist mein html:
<div id="nav">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">testimonials</a>
<ul>
<li><a href="#">testimonial1</a></li>
<li><a href="#">testimonial2</a></li>
<li><a href="#">testimonial3</a></li>
<li><a href="#">testimonial4</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">services1</a></li>
<li><a href="#">services2</a></li>
<li><a href="#">services3</a></li>
<li><a href="#">services4</a></li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--end #nav-->
und hier ist mein css:
#nav {
width:160px;
position: relative;
top: 250px;
left: 20px;
}
#nav ul {
margin:0px;
padding:0px;
}
#nav ul li {
line-height:24px;
list-style:none;
}
#nav a {
text-decoration: none;
color: #9d9fa2;
}
#nav ul li a:hover {
position:relative;
color: #00aeef;
}
#nav ul ul {
display:none;
position:absolute;
left:160px;
top:4px;
}
#nav ul li:hover ul {
display:block;
color: #00aeef;
}
#nav ul ul li {
width:160px;
float:left;
display:inline;
line-height:16px;
}
.selected {
color: #00aeef !important;
}
Sollte ich geben die Untermenüs einer Klasse, so dass ich verstecken können, dann zeigen Sie Ihnen? Und wo wäre der Klasse angewendet werden? Der ul? könnte ich die gleiche Klasse für beide Untermenüs? Bin ich falsch, wie beantrage ich das display:none Werte für diesen Zweck?
Vielen Dank an all die klugen Leute hier.
InformationsquelleAutor heathwaller | 2010-06-02
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wollen Sie zeigen/ausblenden, Untermenüs durch klicken auf den Artikel der main-Menü mit JQuery? Wenn es so ist, sollten Sie beinhalten jquery.js Datei und ein Skript schreiben, wie:
Dann sollten Sie rufen Sie die Funktion Zeigen auf klicken Sie auf link für Menü:
Sollten Sie die ausschlussregel von unhidding von css für schwebten li:
Und ich empfehle die Verwendung der Regel die Entwürfe für links:
Nun Untermenü wird langsam erscheinen und verschwinden durch einen Klick auf das Element des Hauptmenüs. Es gibt viele Funktionen für Animationen in JQuery. Sie können lernen, Ihre hier
InformationsquelleAutor greatromul