Mit der Maus über drop-down-Menüs mit CSS und PHP
Ich versuche ein Menü zu erstellen, dass eine Maus über drop-down wählen Sie ein sub-Menü. Ich habe derzeit das gemeinsame Menü arbeiten, aber ich kann nicht herausfinden, der beste Weg zu gehen über die sub-Menüs angezeigt, die unter Ihren entsprechenden Kategorien.
Den Menüs aktuell Strecke der Tabelle zu verzerrten Proportionen. Ich möchte die aktuelle Tabelle zu halten, seine Größe und nur fallen Sie unter die Kategorie-Titel, ohne den Kategorie-Titel-Tabelle. Soll ich erstellen eine andere Tabelle, um anzuzeigen, dass oder was? Ich bin nicht vertraut mit web-Programmierung.
Mein zweites problem ist wahrscheinlich sehr einfach. Ich bin nur nicht sicher, was die Antwort ist. Ich habe versucht mein Glück mit Google keinen Erfolg. Was muss ich einstellen, "onMouseOut" - display gleich um die Menüs gefüllt. Das Untermenü derzeit verschwinden, wenn ich versuche, klicken Sie auf eine der sub-links.
<td>
<STYLE TYPE="text/css">
#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
A:link {color:blue; text-decoration:none}
A:hover {color:blue; text-decoration:underline}
</STYLE>
<div id="menu">
<table border="0" cellspacing="0" cellpadding="2" align="center">
<tbody>
<tr>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="top-center" onclick="window.location.href='index2.php?page=files'"> <a href="index2.php?page=files">Files</a></td>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center">
<SPAN onMouseOver="document.all.menu2.style.display = 'block'"onMouseOut="document.all.menu2.style.display = 'none'">
Configuration<BR>
</SPAN>
<SPAN ID="menu2" onClick="document.all.menu1.style.display = 'none'">
<a href="index2.php?page=SysConfig">System Configuration</a><BR>
<a href="index2.php?page=FileConfig">File Configuration</a><BR>
<a href="index2.php?page=NetworkConfig">Network Configuration</a><BR>
</SPAN>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center" onclick="window.location.href='index2.php?page=Maintenance'"> <a href="index2.php?page=Maintenance">Maintenance Mode</a></td>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center" onclick="window.location.href='index2.php?page=IETM'"> <a href="index2.php?page=IETM">IETM</a></td>
<td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';"onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center">
<SPAN onMouseOver="document.all.menu3.style.display = 'block'"onMouseOut="document.all.menu3.style.display = 'none'">
Power Options<BR>
</SPAN>
<SPAN ID="menu3" onClick="document.all.menu1.style.display = 'none'">
<A href="index2.php?page=Shutdown">Shutdown</A><BR>
<A href="index2.php?page=Reboot">Reboot</A><BR>
</SPAN>
</td>
</td>
</tr>
</tbody>
</table>
</div>
</TABLE>
- Check-out Superfish: Benutzer.tpg.com.au/j_birch/plugins/superfish
- Verwenden
div
en, HTML5, setzen Sie Ihre Stile in derhead
Abschnitt, und verwenden Sie CSS:hover
. Haben Sie einen Blick auf das Menü: Pure CSS3-Farbverlauf-Dropdown-Menü.
Du musst angemeldet sein, um einen Kommentar abzugeben.
zunächst verwenden Sie keine Tabellen, Sie werden Kalken Ihr Optionen in vielerlei Hinsicht. Sie können divs statt oder in deinem speziellen Beispiel(für Menü), die Sie nutzen könnten html-Listen.
andere Sache, über Ihre Konzerte problem ist, wenn Sie javaScript verwenden (zur Vereinfachung der Dinge ein wenig) und dann könnte man sagen:
mit entsprechenden css-ofcourse, und auf dieses javaScript verwenden, um ad - /ausblenden Funktionen:
});
:hover
anstelle von JavaScript wäre gut.#menu li .dropdown { display: none }
Hover-code:#menu li:hover .dropdown { display: block }