Antworten zum Thema „[CSS] flyout-Menü“

[caga]

Hallo,

ich würde gern für eine Website ein Flyout-Menü erstellen. Das ist ja an sich kein Problem, da man tonnenweise Material dazu findet, ABER:
Das CMS das ich nutze erstellt Menüs in folgender Form

<div class="mainmenu">
    <ul class="mainmenu">
        <li class="mainmenu">
            <a href="index.php?cat=00" class="menuactive">Kategorie01</a>
        </li>
        <li class="mainmenu_submenu">
            <ul class="detailmenu">
                <li class="detailmenu">
                    <a href="index.php?cat=00&amp;page=10" class="submenuactive">Seite01</a>
                </li>
                <li class="detailmenu">
                    <a href="index.php?cat=00&amp;page=20" class="submenu">Seite02</a>
                </li>
            </ul>
        </li>
        <li class="mainmenu">
            <a href="index.php?cat=01" class="menu">Kategorie02</a>
        </li>
        <li class="mainmenu">
            <a href="index.php?cat=03" class="menu">Kategorie03</a>
        </li>
    </ul>
</div>

Mein Problem ist nun, dass ich nicht weiß, wie ich die Liste "detailmenu", beziehungsweise den Listenpunkt "mainmenu_submenu" sichtbar mache, sobald ich mich mit der Maus über einen der "Hauptmenüpunkte" bewege.

Ich hoffe ihr wisst, was gemeint ist und könnt mir weiterhelfen!

Gruß
caga

 

[Gackoo_duz]

AW: [CSS] flyout-Menü

Die Sichtbarkeit wird wahrscheinlich im CSS geregelt. Durch eine einfache Java Ein-Ausblendung ist das recht einfach lösbar.
Wäre gut wenn du auch die CSS Datei posten würdest

 

[caga]

AW: [CSS] flyout-Menü

Hallo,

hier also noch der CSS-Part dazu

div.mainmenu, div.mainmenu ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

div.mainmenu a {
    display: block;
    width: 10em;
}

div.mainmenu li {
    float: left;
    width: 10em;
}

div.mainmenu li ul {
    position: absolute;
    left: -999em;
    width: 10em;
}

div.mainmenu li:hover ul, div.mainmenu li.sfhover ul {
    left: auto;
}

Ich habe mich an die Anleitung von Son of Suckerfish Dropdowns | HTML Dog gehalten, wenn das noch weiterhilft.
Ich denke, das Problem liegt daran, dass sich in den Beispielen in dem Listenpunkt, in dem das Untermenü definiert wird immer noch ein Link befindet, welcher sozusagen erfasst, ob man gerade darüber hovert (und dementsprechend das Menü einblendet) oder eben nicht. Deshalb habe ich oben das vorgegeben "Menü-Design" gepostet.

 

[tombeat]

AW: [CSS] flyout-Menü

Das hier sollte helfen


Funktioniert in allen gängigen Browsern, sogar IE6