Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag10.05.2009 um 18:24 (UTC)    
Titel: CSS / JavaScript: Vertikales Foldoutmenü

Hey,

Da ich für einen User ein vertikales Foldoutmenü erstellen sollte, möchte ich den Code hier der Öffentlichkeit zeigen.
Zunächst ein Screenshot, wie sich die Menüounkte nach rechts ausklappen:


Zitat:

<style type="text/css">
<!--

/*Allgemeine Einstellungen */

body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

/* Listenpunke werden nicht angezeigt */

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

/* Position des Menüs */

#menu
{
position: absolute;
z-index: 3;
top: 20px;
left: 10px;
width: 150px;
height: 28px;
}

/* Größe der Oberkategorien */

.menu
{
width: 150px;
height: 28px;
position: relative; /* NICHT ENTFERNEN! */
}

/* Aussehen der Oberkategorie */

.menu a
{
border: 1px solid #888;
background-color: #fff;
background-image:url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
padding-top: 4px;
margin: 0px 2px;
display: block;
height: 24px;
color: #000;
}

.menu a:hover

{
background-image:url(URL);
}

/* Größe der Unterkategorien */

#smenu1, #smenu2, #smenu3, #smenu4
{
font-size: 12px;
display: none;
width: 140px;
left: 145px; /* Dies muss etwa die Breite der Hauptkategorie sein - Variiert manchmal, einfach ausprobieren*/
top: 0px; /* NICHT ENTFERNEN ! */
position: absolute;
}

/* Aussehen der Unterlinks */

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
font-weight: normal;
padding-top: 2px;
height: 23px;
cursor: pointer;
background-color: #fff;
background-image:url(URL);
}
//-->
</style>

<!-- Anpassung an Internet Explorer -->
<!--[if IE]>
<style type="text/css">
.menu a:hover
{
margin-bottom: -14px !important; /* Nur die Zahl verändern, nichts Anderes (für IE)*/
}
</style>

<!-- Beginn des Codes - NICHTS VERÄNDERN -->

<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>

<!-- Ende des Codes -->

<div>

<!-- Beginn der Navigation -->

<ul class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menu 1</a>

<!-- Menu 1 = Überschrift
Subkategorie 1.1 und Subkategorie 1.2 = Untermenüpunkte
Es können weitere Untermenüpunkte hinzugefügt werden:

<li><a href="link.htm">Subkategorie 1.3</a></li>

-->


<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="#">Subkategorie 1.1</a></li>
<li><a href="#">Subkategorie 1.2</a></li>
<li><a href="#">Subkategorie 1.3</a></li>
</ul>

</ul>

<!-- Hier können weitere Menüs eingefügt werden, einfach den oberen Teil kopieren und anpassen
'smenu1' muss dann entsprechend hochgezählt werden (4x)

<ul class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menu 2</a>

<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="">Subkategorie 2.1</a></li>
<li><a href="">Subkategorie 2.2</a></li>
</ul>

</ul>

-->

</div>


Ich hoffe das wurde von Allen verstanden. Ein Beispiel für eine solche Navigation findet ihr hier:
FoldOut - Vertikal

Mfg
______________
THE JOY OF NOT BEING SOLD ANYTHING


Zuletzt bearbeitet von ig444 am 02.08.2009, 19:17, insgesamt 6-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de