DIV-Dropdown-Menü (2)
Autor:Eve Cole
Aktualisierungszeit:2009-06-20 17:00:56
Sie können dieses Programm zwischen den <head></head>-Tags oder an einer beliebigen Stelle auf der Webseite platzieren.
Als nächstes müssen wir unsere eigentlichen Menüelemente definieren. Hier müssen wir jedem Menüelement ein Mausbewegungsereignis (OnMouseOver) hinzufügen und dieses Ereignis die oben definierte Show-Funktion aufrufen lassen. Mit anderen Worten: Sobald die Maus unseren Menüpunkt betritt, beginnt die Ausführung unserer Show-Funktion. Hier müssen wir auch eine ID-Nummer für jeden unserer Menüpunkte definieren und den ID-Namen seiner Dropdown-Menüspalte an die Funktion „Anzeigen“ übergeben. Dies ist für uns von entscheidender Bedeutung, um die Dropdown-Menüspalte unten I zu steuern Geben Sie den ID-Namen des Menüelements an. HTML-Syntaxbeschreibung:
<table border=0>
<tr>
<td ID="d1" onmouseover="show(this,ds1);" class="menu">Magazine Technology Site</td>
<td ID="d2" onmouseover="show(this,ds2);" class="menu">Portal</td>
<td ID="d3" onmouseover="show(this,ds3);" class="menu">Persönliche Lieblingsseite</td>
</tr>
</table>
Zum Schluss müssen wir noch unsere Dropdown-Menüspalte definieren. Für jede Dropdown-Menüspalte müssen wir ihr das CSS-Attribut „Submenu“ und einen ID-Namen zuweisen, damit unsere Show-Funktion sie steuern kann. Schließlich setzen wir ihren Standardanzeigemodus auf „Keine“, was bedeutet, dass dies nicht der Fall ist angezeigt. Dies wird erreicht, indem dem Anzeigestil „none“ zugewiesen wird. Unten habe ich eine HTML-Syntaxbeschreibung für eine Dropdown-Menüspalte gegeben:
<DIV ID="ds1" CLASS="submenu" STYLE="display:none">
<BR><A HREF="http:\www.yesky.com">tianji.com Yesky.com</A>
<BR><A HREF="http:\www.cbinews.com">Computer-Geschäftsinformationen</A>
<BR><A HREF="http:\www.newsoft.com.cn">Neue Modeelektronik</A>
<BR>
</DIV>
<DIV ID="ds2" CLASS="submenu" STYLE="display:none">
<BR><A HREF="http:\www.sina.com.cn">Sina Sina</A>
<BR><A HREF="http:\www.sohu.com.cn">SohuSohu</A>
<BR><A HREF="http:\www.163.com">Netease</A>
<BR>
</DIV>
<DIV ID="ds3" CLASS="submenu" STYLE="display:none">
<BR><A HREF="http:\haoel.yeah.net">Maus-Netzwerk-Programmierstation</A>
<BR><A HREF="http:\www.5460.net">Chinesische Klassenkameraden</A>
<BR><A HREF="http:\www.csdn.net">China Software Development Network</A>
<BR>
</DIV>
Dies ist der gesamte Prozess. Mit den oben genannten vier Schritten können Sie ein Menü auf jeden Fall auf Ihrer Webseite platzieren. Natürlich können Sie auch versuchen, die Eigenschaften des Menüs selbst zu ändern, um es einem Menü ähnlicher zu machen.