Header Ads

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

11 comments:

  1. Tack för tipset!! Men hur gör man om man vill centrera linkbaren?

    ReplyDelete
  2. Det där undrar jag med. Just nu hänger min utanför...

    Lotta

    ReplyDelete
  3. Hur kan jag få underlänkarna transparenta?
    Mina underlänkar syns förövrigt bara till en viss del, toppen utav dem.. Vad gör man?

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Jeg prøver igen - min menu sætter sig helt ude i højre side.
    Hvordan får den centreret????
    Hilsen Lissen

    ReplyDelete
  7. Jag har samma problem som föregående talare. Den hänger utanför på kanten och bara en bit av den översta länken syns. Sedan skulle jag vilja ha den centrerad och gärna transparanta underlänkar.

    ReplyDelete
  8. Mina underlänkar hamnar inte rakt under sin rubriklänk. Hur ändrar jag det?? Jag kan inte se alla underlänkarna heller, de hamnar under main gissar jag...

    /Lillianna

    ReplyDelete
  9. Har fått in länkaen och underlänkarna. Men jag vill ju att folk ska kunna klicka på länkarna och komma vidare. Hur lägger jag in information på länkarna?

    http://bex-liveinadream.blogspot.com/

    ReplyDelete
  10. Jag kanske är jätte jobbig nu, men jag försöker fixa till en meny i min blogg. Allt gick jätte bra, tills en av länkarna försvann och dyker bara upp igen när man för muspekaren över den..
    Vad kan jag göra åt detta?
    Och.. ännu en dum fråga, hur får jag så att länken går till en enskild sida?

    ReplyDelete
  11. Jessica - du har en av de nya Designmallarna och då fungerar inte den här menyn, tyvärr.
    Det här är ett gammalt inlägg som inriktar sig på de som fortfarande har Minimamallen eller liknande.
    När jag hittar en fungerande dropdownmeny för de nya designmallarna kommer jag att skriva ett inlägg om det.
    Mvh Anneli

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------