Foldout Menu - Navigation - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Foldout Menu - Navigation

Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Foldout Menu - Navigation

Pages: [1]

geschrieben von Undead-Revenge am 14.04.2004 - 17:26

Habe folgende Navigation:

HTML-Datei:
Code:
<script type="text/javascript">

</script>
<table cellpadding="0" cellspacing="0" bordeR="0" height="103">
<tr>
<td valign="top">
<div class="menu">
<ul><li><a onmouseover="montre('smenu1');on('image1')" onmouseout="cache('smenu1');off('image1')" href=""><img src="buttons/home.jpg" border="0" name="image1"></a>
<ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href=""><font color="#FFFFFF">Home</font></a></li>
<li><a href="index.html"><font color="#FFFFFF">Enterpage</font></a></li>
<li><a href=""><font color="#FFFFFF">Join the Team</font></a></li>
<li><a href="index.html"><font color="#FFFFFF">The Team</font></a></li>
</ul></li>
</div>
</td>
<td valign="top">
<div class="menu">
<a onmouseover="montre('smenu2');on('image2')" onmouseout="cache('smenu2');off('image2')" href=""><img src="buttons/wallpaper.jpg" border="0" name="image2"></a>
<ul style="display: none;" id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href=""><font color="#FFFFFF">Wallpaper Pakete</font></a></li>
<li><a href=""><font color="#FFFFFF">A-Z</font></a></li>
</ul></li>
</div>
</td>
<td valign="top">
<div class="menu">
<a onmouseover="montre('smenu3');on('image3')" onmouseout="cache('smenu3');off('image3')" href=""><img src="buttons/webtemplates.jpg" border="0" name="image3"></a>
<ul style="display: none;" id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href=""><font color="#FFFFFF">Games</font></a></li>
<li><a href=""><font color="#FFFFFF">Natural</font></a></li>
<li><a href=""><font color="#FFFFFF">Others</font></a></li>
</ul></li>
</td>
</div>
<td valign="top">
<div class="menu">
<a onmouseover="montre('smenu4');on('image4')" onmouseout="cache('smenu4');off('image4')" href=""><img src="buttons/links.jpg" border="0" name="image4"></a>
<ul style="display: none;" id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href=""><font color="#FFFFFF">Partner</font></a></li>
<li><a href=""><font color="#FFFFFF">Sponsors</font></a></li>
</ul></li>
</div>
</td>
</table>

CSS-Datei:
Code:
body {
margin-left:2px;
margin-right:2px;
}

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

div.menu {

top: 10px;
z-index: 3;
}
div.menu li {
float: left;
width: 115px;
}

div.menu a {
margin: 0 0px;
height: 20px;
display: block;
text-align: center;

text-decoration: none;
color: #000;
background: #000;
}

div.menu a:hover {
background: #000;

}

#smenu1, #smenu2, #smenu3, #smenu4 {
display: none;
float: left;
width: 115px;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a {
border-top: 0 none;
}
.site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #000;

}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #FFF;
background-color: #000;
}
a {
text-decoration: none;
color: #FFFFFF;
}

So nun 2 Fragen:
1. Ist es möglich das diese Navi nach oben aufklappt?
2. Wie ihr seht habe ich das Menü in eine Tabelle tun müssen denn sonst hätte ich die Knöpfe nicht nebeneinander tun können sondern nur untereinander. Wenn jetzt ein Menü aufklappt wird auch die Tabelle größer und die ganze untere Seite verschiebt sich :/ Kann ich es so machen das das Menü sozusagen als eine Ebene über der Seite liegt und somit nicht die Seite ausweitet wenn ich es aufklappe?

Ich danke jetzt schonmal für eure Hilfe.
MfG Scavenger

geschrieben von starleos am 14.04.2004 - 17:33

So nun 2 Fragen:
1. Ist es möglich das diese Navi nach oben aufklappt?

------ Nicht das ich wüßte

2. Wie ihr seht habe ich das Menü in eine Tabelle tun müssen denn sonst hätte ich die Knöpfe nicht nebeneinander tun können sondern nur untereinander.

-------- so wie das Menü im Original dargestellt wird ist es nebeneinander

Wenn jetzt ein Menü aufklappt wird auch die Tabelle größer und die ganze untere Seite verschiebt sich :/ Kann ich es so machen das das Menü sozusagen als eine Ebene über der Seite liegt und somit nicht die Seite ausweitet wenn ich es aufklappe?

------------ ja, stelle das menü ins einen div hinein und definiere es mit position:absolute.

<div style="position:absolute;width:.....; height:.....; left:.....;
top.........usw">
Menu
<div>

geschrieben von Undead-Revenge am 14.04.2004 - 17:41

Wie du siehst habe ich das menü abgeändert indem ich bilder eingefügt habe und du kansnt mir glauben das es ohne tabelle nicht mehr nebeneinander funktioniert ohne tabelle. Ich habe in 3 Foren um hilfe gebeten und alle wussten nur eine Antwort dann musst dus in eine Tabelle tun.

geschrieben von starleos am 14.04.2004 - 17:43

dann verändere die Werte der menudivs, oder sind deine Bilder nicht alle gleich groß?

geschrieben von Undead-Revenge am 14.04.2004 - 17:46

doch sind sie welche menüdivs ich kenn mich mit css und divs kein bisschen aus html und php sind meine stärken

geschrieben von starleos am 15.04.2004 - 12:52

Wie groß sind die Grafiken?

Beispiel:

div.menu li {
float: left;
width: 115px; < ---------- Breite der Hauptkategorie
}

#smenu1, #smenu2, #smenu3, #smenu4 {
display: none;
float: left;
width: 115px; < ---------- Breite der Subkategorie
}

Verändere die Werte entsprechend der Grafiken.

geschrieben von Undead-Revenge am 15.04.2004 - 20:25

Das geht trotzdem nicht wenn ich das gesammtmenü dann 460px breit mache weil 4*115 460 ist dann ist hinter dem ersten button ein 460px breiter schwarzer kasten und darunter die anderen submenüs obwohl diese auf 115 eingestellt sind.

geschrieben von starleos am 16.04.2004 - 12:36

Sei so nett und poste mal den Quelltext so dass ich mir ein Bild machen kann.