Menybar med dropdown-länkar

Vi har fått många frågor om menyer med drop down-effekt och här är en variant.

Observera att den bara fungerar för de äldre mallarna, Minima och de andra. Den fungerar  INTE i Bloggers nya Designmallar!

Varje överliggande länk har fyra underlänkar, vilka man förstås kan radera eller öka på med likadana länkar.

Du lägger koden i en html-gadget under din header.

Först ut i koden hittar du css-delen som styr menybarens utseende

Här kan du ställa in vidd, färg, storlek på font och liknande.

Tänk på att color betyder textfärg och background color är rutornas färg.

Bredden är anpassad efter en vanlig grundläggande Minima-mall som är 660px bred. Har du en annan bredd får du anpassa både vidden (width) på .menu och på knapparna i menu ul li a, .menu ul li a:visited för att anpassa dem så de får en lagom, snygg bredd.
Samma sak gäller om du väljer att ha fler eller färre än de 6 förberedda länkarna.

Om du vill ha din menybar vänsterställd plockar du bort raden som säger "margin: 0 auto;"


Ordet Height som står efter det första Width styr hur mycket plats som din menybar ska ta upp höjdmässigt. Minska om du vill att dina blogginlägg och sidebaren ska komma högre upp:


.menu {
font-family: arial, sans-serif;
width: 660px;
height:100px;
}


Nästa del är själva länkdelen, html-länkarna.
Varje överlänk med underlänkar ser ut så här:

<li><a class="hide" href="http://adress">LÄNK1</a>

<!--[if lte IE 6]>
<a href="http://adress">LÄNK1
<table><tr><td>
<![endif]-->

 <ul>
 <li><a href="http://adress">UNDERLÄNK1</a></li>
 <li><a href="http://adress">UNDERLÄNK2</a></li>
 <li><a href="http://adress">UNDERLÄNK3</a></li>
 <li><a href="http://adress">UNDERLÄNK4</a></li>

 </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

Varje överlänk finns med två gånger eftersom koden är anpassad även efter Internet Explorer 6 som inte riktigt klarar av att läsa vanlig kod. På så sätt kan även de som fortfarande använder IE 6 se din menybar.

Fyll i webadress och rubrik för varje länk. Radera de underlänkar du inte använder.

Du kan hämta hela koden här i denna länk