JavaScript Aufklappbares Menü

D

Dawen

0
Hi !

Ich habe schon gesucht, aber mich bringen die Sachen nicht weiter, weil oft nur ein Hover Effekt per CSS gemacht wird. Was ich z.B. habe ist


  • Team ( Menü Punkt )
    • Mister X ( Untermenü )
    • Mister Y ( Untermenü )
    • .....

Bei einem Klick auf Team soll das Untermenü erscheinen, mit Mister X, Mister Y. Es soll also ein richtiges aufklappbares Menü sein. Hat einer vielleicht bei sich auf der Platte ein funktionierendes Beispiel :)

Ich versorge erstmal meine Erkältung und bedanke mich im voraus :)
 
Hallo!

Da ich gerade bei meinem Projekt sowas ähnliches brauche kann ich dir vielleicht helfen.
Hoffe der Code hilft dir weiter:
HTML: 
<html>
<head>
<style type="text/css">
.menu
{
    float: left;
    background-color: #99cccc;
    border: 1px solid black;
    padding: 1% 0 1% 0;
    margin: 1%;
    width: 10%;
}

.menuheading
{
    padding: 0 0 0 10px;
}

.menuitem
{
    text-decoration: none;
    padding: 0 0 0 20px;
    display: block;
}

.menuitem:link
{
    color: #000000;
}

.menuitem:visited
{
    color: #000000;
}

.menuitem2
{
    text-decoration: none;
    padding: 0 0 0 30px;
    display: block;
}

.menuitem2:link
{
    color: #000000;
}

.menuitem2:visited
{
    color: #000000;
}

.submenu
{
    display: none;
}
</style>

<script type="text/javascript">
    function HoverIn(Feld)
    {
        Feld.style.backgroundColor = "#6677ff";
    }

    function HoverOut(Feld)
    {
        Feld.style.backgroundColor = "#99cccc";
    }

    function swap(Menu)
    {
        var ThisMenu = document.getElementById(Menu);

        if(ThisMenu.style.display == "block")
        {
            ThisMenu.style.display = "none";
        }
        else
        {
            ThisMenu.style.display = "block";
        }
    }
</script>
</head>
<body>
    <div class="menu">
        <div class="menuheading">Das Projekt</div>
        <a href=# class="menuitem" onMouseOver="HoverIn(this);" onMouseOut="HoverOut(this);">Menu1</a>
        <a href=# class="menuitem" onMouseOver="HoverIn(this);" onMouseOut="HoverOut(this);">Menu1</a>
        <a href=# class="menuitem" onMouseOver="HoverIn(this);" onMouseOut="HoverOut(this);">Menu1</a>
        <a href=# class="menuitem" onMouseOver="HoverIn(this);" onMouseOut="HoverOut(this);" onClick="swap('submenu1')">Menu2 öffnen</a>
        <div id="submenu1" class="submenu">
            <a href=# class="menuitem2" onMouseOver="HoverIn(this);" onMouseOut="HoverOut(this);">Menu2</a>
            <a href=# class="menuitem2" onMouseOver="HoverIn(this);" onMouseOut="HoverOut(this);">Menu2</a>
            <a href=# class="menuitem2" onMouseOver="HoverIn(this);" onMouseOut="HoverOut(this);">Menu2</a>
        </div>
        <a href=# class="menuitem" onMouseOver="HoverIn(this);" onMouseOut="HoverOut(this);" onClick="swap('submenu2')">Menu3 öffnen</a>
        <div id="submenu2" class="submenu">
            <a href=# class="menuitem2" onMouseOver="HoverIn(this);" onMouseOut="HoverOut(this);">Menu3</a>
            <a href=# class="menuitem2" onMouseOver="HoverIn(this);" onMouseOut="HoverOut(this);">Menu3</a>
            <a href=# class="menuitem2" onMouseOver="HoverIn(this);" onMouseOut="HoverOut(this);">Menu3</a>
        </div>
    </div>
</body>

Es gibt sicherlich Verbesserungen die man durchführen kann, nur habe ich nicht soviel Ahnung von Html / JavaScript / Css.

Eine Frage jedoch hätte ich:
Gibt es eine Möglichkeit sich die 2te Klasse "menuitem2" irgendwie zu ersparen? Der einzige Unterschied besteht im padding.
Ich kann jedoch nicht das padding in der Klasse "submenu" einfügen, da sonst der Hover-Effekt nicht bis zum linken Rand geht.

MfG
Inliferty
 
Also wenn es per Hover ist würde ich eine reine CSS Lösung vorschlagen, mit dem erst Menü aufklappen wenn geklickt wurde währe eine Ähnliche Lösung wie von Inliferty ganz passable, hier müßte allerdings statt
Code: 
onMouseOver="HoverIn(this);"
halt das onclick event benutzt werden.

Ansich halte ich aber aus persönlichen Vorlieben JQuery für besser da spart man sich onclick im Link-Tag und die Logik ist wesentlich einfacher (alle ausblenden und this einblenden).
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben