Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

submenu

h4xX0r
4 antwoorden
  • Hoi,

    Na vele sites bezocht te hebben en a.d.h. daarvan veel dingen uitgeprobeerd te hebben, post ik uiteindelijk hier een topic. Ik heb aan de rechterkant de navigatiebalk. Dit gedeelte is gelukt. Daarin wil ik nu submenuus maken. Dus onder de link 'Geef geld' wil ik bijvoorbeeld het submenu (d.m.v. een hoverfunctie, waardoor dit menu dan uitklapt) met de link 'gift' en 'speciaal' maken. Hieronder volgt het gehele css document. Daaronder staat het relevante navigatie-gedeelte. Hoe kan ik een submenu liefst d.m.v. een hoverfunctie realiseren. Wie o wie kan mij helpen? Blijkbaar ben ik zeker nog niet genoeg onderlegd in css, want ik 'loop' hierop vast.

    M.vr.gr., Dalertje



    [code:1:ebaac79d84]
    /* CSS Document */

    a:link {color:#479DD6;}
    a:visited {color:#CC0000;}
    a:hover {color: #479DD6;}


    html, body
    {
    height: 100%;
    background: #FFFFFF;
    color: #000000;
    }

    body
    {
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 500;
    }

    #wrap
    {
    position: relative;
    height: 100%;
    width: 45em;
    }

    #middle
    {
    position: relative;
    height: auto;
    border-right: 8.6em solid #479DD6; /* width en background van de navigatie */
    width: 45em;
    background: #FFFFFF;
    }

    #header
    {
    position: absolute;
    top: 0;
    left: 0;
    height: 10em;
    width: 100%;
    overflow: hidden;
    background: #FFFFFF;
    z-index: 3;
    }
    #search span
    {
    font-size: 14px;
    }

    #nav
    {
    position: relative;
    display:block;
    float: right;
    width: 15em;
    margin-right: -14.8em;
    }

    #nav ul li
    {
    text-align: left;
    list-style-type: none;
    display: block;
    padding-top: 4px;
    margin-top: 4px;
    padding-left: -25px;
    margin-left: -25px;
    }


    * html #nav, * html #content
    {
    overflow:hidden;
    }

    #nav a
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #0033FF;
    width: 9em;
    padding: .5em .9em;
    text-decoration: none;
    }

    #nav a:hover {
    color: #333333;
    background-position: right;
    background-image: url(../Knoppen ed/triangle.gif);
    background-repeat: no-repeat;
    }

    #active a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 600;
    display: block;
    width: 6.5em;
    padding: .2em .2em;
    }


    /* content styles */

    .big {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight:bold;
    color: #479DD6;
    }

    .xbig {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #479DD6;
    }

    .style3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    }


    #content
    {
    position: relative;
    float: left;
    width: 45.8em;
    margin-left: 2px;
    margin-right: 2px;
    }

    /* Kop van de content geplaatst in de header */

    .testclass
    {
    color: #0033FF;
    font: 28px arial,helvetica;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    z-index: 10;
    }

    #test
    {
    position: absolute;
    top: 105px;
    left: 461px;
    width: 270px;
    text-align: left;
    }


    #lijst
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight: 500;
    line-height: 22px;
    position:relative; left: 20px;
    text-align: left;
    }

    /* Opmaak m.b.t. de links om terug te gaan naar het begin van het anker. */


    #backlink1 {
    font-family: "MS Sans Serif";
    font-size: 14px;
    font-weight: 500;
    position: relative; left: 98%; top: -15px;
    }

    /* Termen */

    #termen
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 500;
    color: #479DD6;
    line-height: 22px;
    }

    /* positionering tekst wanneer pull-down menu aanwezig is */

    #uitleg
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    position: relative; left: 0px; top: -14px;
    }

    [/code:1:ebaac79d84]



    [code:1:ebaac79d84]
    <div id="nav">
    <ul>
    <li id="active"><a href="Geef geld.htm" title="Geef geld">Geef geld</a></li>
    <li id="active"><a href="Geef tijd.htm" title="Geef tijd">Geef tijd</a></li>
    <li id="active"><a href="Geef als bedrijf.htm" title="Geef als bedrijf">Geef als bedrijf</a></li>
    <li id="active"><a href="Acties.htm" title="Acties">Acties</a></li>
    <li id="active"><a href="Projecten.htm" title="Projecten">Projecten</a></li>
    <li id="active"><a href="De stichting.htm" title="De stichting">De stichting</a></li>
    <li id="active"><a href="Nieuwsbrief.htm" title="Nieuwsbrief">Nieuwsbrief</a></li>
    </ul>
    [/code:1:ebaac79d84]
  • Zelf wat proberen lukt zelden als je net begint met CSS, maar zoeken met Google werkt bijna altijd, in dit geval zeker.
  • Hoi,

    Je zult het ongetwijfeld goed bedoeld hebben, maar d.m.v. zoeken met Google ben ik op die betreffende sites gekomen, maar dat leverde niets op.
    Het lukt me niet om een hover submenu te maken.

    M.vr.gr, Dalertje
  • Op de eerste site die je vindt via de Google-link staat een link naar een goede uitleg (ik geef geen link zonder het zelf eerst te checken). In een ander topic op dit forum is het medeforummer Fly laatst ook gelukt m.b.v. die info een menu te bouwen met submenu. Het staat er stap voor stap uitgelegd.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.