K3HLIM

Hallo,

ich habe mir ein aufklappbares Menü gebaut, welches aufklappt, wenn die Maus drüber ist und wieder zu, wenn man die Maus entfernt (nach unten).

Das Auf- und Zuklappen funktioniert auch, nur werden beim Aufklappen der oberen Menüpunkte die unteren überdeckt. Ich möchte nun gerne wissen, was ich machen muss, damit die unteren Menüpunkte mit nach unten verschoben werden und wenn sich der obere Menüpunkt schließt, die anderen wieder nach oben gehen.

Das müsste doch eigentlich in dem Teil des Codes stehen, oder?

<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: visible;
padding: 0px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

.menu
{
position: absolute;
z-index: 3;
top: 10px;
}

.menu li
{
width: 140px;
float: bottom;
}

.menu a
{
border: 1px solid #888;
background-color: #fff;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: 0px 2px;
display: block;
height: 20px;
color: #000;
}

.menu a:hover
{
background-color: #ccc;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
font-size: 12px;
display: none;
width: 140px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
font-weight: normal;
padding-top: 2px;
border-top: 0px;
cursor: pointer;
}
//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>

Ich hoffe, ihr könnt mir helfen.

Oder kann man so ein Menü mit CSS erstellen? Habe da aber absolut gar nichts finden können, deshalb hab ich es erstmal mit Javascript versucht.

Viele Grüße
K3HLIM

Mister Ad

Manko10

Bitte benutze [code]-Tags, um deinen Code zu formatieren.
Ich würde so ein Menü jedoch nicht mit JavaScript, sondern mit CSS realisieren. Google mal nach CSS-Navigation, CSS-Dropdown (bzw. Flyout für Flyout-Menüs). Bei SelfHTML gibt es auch eine Anleitung.

__________________
Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

brian johnson

meine lieblingsliste dazu:

Stu Nicholls | CSSplay | CSS only menus

__________________
PHP4?!?>>>Aktuelle PHP Version: 5.2.11 || 5.3.0
Suse 11.2 *vorfreude*

K3HLIM

Hallo,

habe mir mal so ein paar Menüs angeschaut.

Gefallen würden mir von der Art her die zwei hier:
Stu Nicholls | CSSplay | Cross browser flyout menu examples using only css
Stu Nicholls | CSSplay | A cross browser vertical sliding menu using only css

Was mir noch nicht so ganz gefällt ist, dass die Größe immer die gleiche ist. Kann man die Menüs so bauen, dass sich die Größe an die Anzahl der Links anpasst, also wenn ich drei Links hab ist die Fläche kleiner als wenn ich 5 oder so hab. Im Moment ist die Fläche ja immer gleich groß, egal wie viele Links unter dem Punkt stehen.

Viele Grüße
K3HLIM

nikosch

Ich denke das ist deshalb, weil Du sonst im totalen Chaos endest. Wären die Submenüs unterschiedlich groß, würden die weiteren Hauptpunkte anfangen, vertikal zu springen. Im dümmsten Fall auch unter den Mauszeiger, was dann wieder das Menü öffnen würde.... Das ist schon alles durchdacht.

__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--