[HaBo]

Dawen · 28.03.10, 19:25

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

Inliferty · 28.03.10, 22:13

Hallo!

Da ich gerade bei meinem Projekt sowas ähnliches brauche kann ich dir vielleicht helfen.
Hoffe der Code hilft dir weiter:

HTML-Code:

<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

Anzeige

- Anzeige -

Oi!Alex · 29.03.10, 09:00

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

Anzeige

- Anzeige -

28.03.10, 19:25	#1 (permalink)
Dawen Registriert seit: 19.08.04 Likes: 1	Aufklappbares Menü Anzeige 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

29.03.10, 09:00	#3 (permalink)
Oi!Alex Registriert seit: 17.01.06 Likes: 7	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).

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

[HaBo]

Aufklappbares Menü