Lav en HTML dropdown menu plus CSS

Posted by on maj 24, 2012 in HTML guide | 0 comments

Hvordan man laver en drondown menu i HTML & CSS.

1) Eksemplet her forneden er menuen du ser øverst på dette website, du kan ændre "Font", "Color" "Margin" osv osv lige så det passer til din hjemmeside, du kan også vælge at lave en enklere menu, som ses i eksempel 2 lidt længere nede på siden.

<form id="menu" action="">
<select style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #FFFFFF; text-decoration: none; background-color: #bc0404; margin-bottom:0px; margin-top:0px; position:relative; margin:0px; margin-top: 2px;" onChange="window.open(this.options[this.selectedIndex].value,'_self')">
<option value="http://www.domain.dk/index.html">Forsiden</option>
<option value="http://www.domain.dk/underside1.html">Underside 1</option>
<option value="http://www.domain.dk/underside2.html">Underside 2</option>
<option value="http://www.domain.dk/underside3.html">Underside 3</option>
<option value="http://www.domain.dk/underside4.html">Underside 4</option>
<option value="http://www.domain.dk/underside5.html">Underside 5</option>
<option value="http://www.domain.dk/underside6.html">Underside 6</option>
<option value="http://www.domain.dk/underside7.html">Underside 7</option>
<option value="http://www.domain.dk/underside8.html">Underside 8</option>
</select>
</form>

2) Dette eksempel indeholder f.eks. ikke "margin" koderne. Ellers er det op til dig, hvor meget der skal kodes, menuen kan sagtens laves endnu mere simpel, hvis dette ønskes.

<form id="menu" action="">
<select style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #FFFFFF; text-decoration: none; background-color: #bc0404; onChange="window.open(this.options[this.selectedIndex].value,'_self')">
<option value="http://www.domain.dk/index.html">Forsiden</option>
<option value="http://www.domain.dk/underside1.html">Underside 1</option>
<option value="http://www.domain.dk/underside2.html">Underside 2</option>
<option value="http://www.domain.dk/underside3.html">Underside 3</option>
<option value="http://www.domain.dk/underside4.html">Underside 4</option>
<option value="http://www.domain.dk/underside5.html">Underside 5</option>
<option value="http://www.domain.dk/underside6.html">Underside 6</option>
<option value="http://www.domain.dk/underside7.html">Underside 7</option>
<option value="http://www.domain.dk/underside8.html">Underside 8</option>
</select>
</form>

God fornøjelse med din dropdown menu.

Leave a Reply

Din e-mail-adresse vil ikke blive offentliggjort. Krævede felter er markeret med *

Disse HTML koder og attributter er tilladte: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>