7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)
  • Q:
    Bijdrager
    Horrid Crow

    CSS Uitklap menu

    Hallo,

    Ik ben bezig met een website voor een drukkerij en hierbij heb ik een uitklap menu (code van internet en aanpassingen gemaakt).
    Nu ziet het er allemaal leuk en aardig uit, maar doe ik dit niet zo vaak en nu blijkt dat de parent knop (dus de hoofdknop) niet ‘ingedrukt’ blijft als ik er van af zweef met m’n muis.

    Weet iemand een manier om css om te zeggen dat zodra ik over een knop in dat uitklap menu zweef dat de parent knop dan ook ingedrukt blijft?

    Ik heb mijn knoppen als 1 geheel gemaakt met een background-position wijziging als je eroverheen zweeft.
    Alvast bedankt voor een antwoord.

    Moderator
    Night

    Dan zou het handig zijn als je de gebruikte code hier even post.

    Bijdrager
    Horrid Crow

    Excuses.

    De CSS voor het uitklapmenu:

    #nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }

    #nav li {
    float: left;
    width: 128px;
    }

    #nav ul {
    position: absolute;
    width: 128px;
    left: -1000px;
    }

    #nav li:hover ul, #nav li.ie_does_hover ul {
    left: auto;
    background-position: 0 0;
    margin-top: 27px;
    }

    #nav a {
    display: block;
    }

    CSS voorbeeld van hoe ik mijn knoppen opmaak:

    #home {
    display: block;
    width: 128px;
    height: 27px;
    background-image: url(../beelden/knopHome.jpg);
    float: left;
    }

    #home:hover {
    background-position: 0 -27px;
    }

    Hoop dat dit voldoende is.

    Bijdrager
    lord anubis
    Horrid op 31 januari 2011

    Hoop dat dit voldoende is.

    Bijna, heb je minimaal html page gemaakt met alleen een knop en de CSS code?
    Zo kan je makkelijk testen, zonder te verdwalen in de code.

    Misschien onbekend, klik rechts op de bedoelde ‘knop’ en kies ‘inspecteer element’ om te kijken wat de stijl en de berekende stijl is.

    Of laat hier wat html code zien, om even te kunnen kijken wat de stijl hiërarchie is.

    Bijdrager
    Horrid Crow

    Sorry voor de ietwat latere reactie.
    Hier de code van hoe het menu in html is opgebouwd:

    <br />
    <div id="menu"><br />
        <a href="index.html"></a><br />
        <a href="bedrijfsprofiel.html"></a><br />
        <a href="historie.html"></a></p>
    <p>    <ul id="nav"></p>
    <li><a href="team.html"></a>
    <ul>
    <li><a href="team_directie.html"></a></li>
    <li><a href="team_verkoop.html"></a></li>
    <li><a href="team_bedrijfsbureau.html"></a></li>
    <li><a href="team_prepress.html"></a></li>
    <li><a href="team_press.html"></a></li>
    <li><a href="team_afterpress.html"></a></li>
    <li><a href="team_logistiek.html"></a></li>
    <li><a href="team_administratie.html"></a></li>
    </ul>
    </li>
    <p>    <a href="portfolio.html"></a><br />
        <a href="vacatures.html"></a><br />
        <a href="contact.html"></a><br />
    </div><br />
     

    EDIT: Krijg de code niet helemaal duidelijk in code tags. En als ik het zonder tags doe zie je de helft ervan niet. Excuses hiervoor.

    Bijdrager
    arri

    ik heb er niet heel grondig naar gekeken (code) maar volgens mij is de oplossing voor je probleem gewoon gebruik te maken van een hierarchische structuur.

    op het moment dat je dan hovert over een ‘sub’-menu item, is de muis ook nog steeds IN het parent menu dus zal dat ook nogsteeds in hover-state weergegeven worden.

    dat zou er bv. zo kunnen uitzien.
    hieronder is een super eenvoudig menu, met maar 1 item, wat een sub-menu is, met maar 1 item,,

    <br />
    <ul class='menu'><br />
        <li class='item'><br />
            <a>menutitle</a><br />
            <ul class='menu'><br />
                <li class='item'><br />
                    <a>menutitle</a><br />
                    <!-- enz.. --></p>
    <p>

    je kent hopelijk het principe van css descendant-selectors?

    om bijvoorbeeld alleen de < a > – tags te stylen van het tweede level (is hierboven ook het diepste) zou je dergelijke css kunnen schrijven (let op de ‘>’ operator)

    ul.menu>li.item>ul.menu>li.item>a.link { /* css text hiero */ }

    of (in dit geval) kan ook kort:

    ul>li>ul>li>a { /* css text hiero */ }

    Bijdrager
    arri

    jemig. die \[code\] tag werkt echt voor geen meter
    (lekker in een forum als dit)

    maar het had er ongeveer zo moeten uitzien:

7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.