NemProgrammering.dk logo

Simpel drop-down menu

  Skrevet af: Daniel     14-11-2012     Skrevet i: CSS og CSS3, HTML + HTML5, JQuery

kursuscsI dette blog indlæg vil jeg fremvise en nem og simpel drop-down menu, som minder en smule om den NemProgrammering.dk bruger. Menuen er lavet ud fra nogle få HTML elementer, et simpelt layout via CSS, og en meget simpel jQuery funktion.

 

HTML kode (opsætningen af menuen):

 

<nav id="menu">
    <span class="menu" onclick="slowtoggle('1', 'underlink')">Link 1</span>
    <div class="underlink" id="1">
        <a class="menu" href="#">Underlink 1</a>
        <a class="menu" href="#">Underlink 2</a>
    </div>
    <span class="menu" onclick="slowtoggle('2', 'underlink')">Link 2</span>
    <div class="underlink" id="2">
        <a class="menu" href="#">Underlink 1</a>
        <a class="menu" href="#">Underlink 2</a>
    </div>
    <span class="menu" onclick="slowtoggle('3', 'underlink')">Link 3</span>
    <div class="underlink" id="3">
        <a class="menu" href="#">Underlink 1</a>
        <a class="menu" href="#">Underlink 2</a>
    </div>
</nav>

Det første parameter jQuery funktionen tager, er det unikke id div’en (efter span element) har, det andet parameter er den class alle div elementerne har.

CSS kode (opsætning af layout):

 

.underlink {
    display: none;
}
.menu {
    height: 50px;
    width: 200px;
    display: block;
    background-color: gray;
    color: black;
    font-family: verdena;
    font-size: 20px;
    text-align: center;
    padding-top: 25px;
    cursor: default;
}
a.menu:link {
    height: 50px;
    width: 200px;
    display: block;
    background-color: gray;
    color: black;
    font-family: verdena;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    padding-top: 25px;
    cursor: pointer;
}
a.menu:visited {
    height: 50px;
    width: 200px;
    display: block;
    background-color: gray;
    color: black;
    font-family: verdena;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    padding-top: 25px;
    cursor: pointer;
}

jQuery kode (opsætning af funktionen):

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    function slowtoggle(vis, gem) {

    if($("#" + vis).is(':visible')) {   
        $("." + gem).hide('slow');
    } else {
        $("." + gem).hide('slow');
        $("#" +  vis).toggle('slow');
    }
}
</script>

 

CSS koderne er kun vejledende, man kan frit vælge at ændre i layoutet af menuen uden den store betydning for det sammenhængende script.

Eksempel: Drop-down menu
Kilde: Kodet selv

Spørgsmål og kommentarer

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.