• Startsida
• Info
  • Om mig
  • Om Tor
  • Min kamerautrustning
• Min hemsida
• Design
  • Portfolio - hemsidan
  • Beställa design?
  • Bloggdesign
  • Beställningsdesigner
  • Utlottningar
  • Photoshop
  • Tips!
• Foto
  • Portfolio - hemsidan
  • Boka fotografering?
  • - Dagbok
  • - Barn/Familj
  • - Blommor
  • - Bröllop/Par
  • - Detaljer
  • - Djur
  • - Mobilbilder
  • - Natur
  • - Personer
  • - Speciella tillfällen
  • - Studio
  • - Utomhus
  • Fototeman
  • Tips!
  • 365 Photos
• Tips
  • Blandade tips
  • Design-tips
  • Foto-tips

Tips - Dropdown meny

Har varit flera stycken som undrat hur man gör dropdown-menyn som jag har ovanför/i headern, så nu är jag extra snäll och lägger ut en guide här!

Har tidigare länkat till DDB men tänkte att det är lika bra och skriva ned det lite snabbt här.

1. Gå in i stilmallen och lägg in denna kod längst ned:

#navbar { margin: 5px 10px 0px 0px; padding: 0; height: 1em; } #navbar li { list-style: none; float: right; } /* Ändra till right om du vill ha menyn till höger istället*/ #navbar li a { display: block; padding: 2px 8px; background-color: transparent; /*Ändra färgen på menyflikarna här*/ color: #000000; /*Ändra färgen på texten här*/ text-decoration: none; font-family: tahoma; /*Ändra typsnittet här*/ font-size: 10px; } /*Ändra storleken på texten här*/ #navbar li ul { display: none; width: 8em; /* Ändra bredden på undermenyn här */ background-color: #FFFFFF; opacity:0.70; } #navbar li:hover ul, #navbar li.hover ul { display: block; position: absolute; margin: 0; padding: 0; z-index: 1; } #navbar li:hover li, #navbar li.hover li { float: none; } #navbar li:hover li a, #navbar li.hover li a { background-color: #FFFFFF; /*Ändra färgen på undermenyn*/ border-bottom: 1px dotted #e4cfe7; color: #474747; } /*ändra textfärgen på undermenyn här*/ #navbar li li a:hover { background-color: #f0daf3; } /*Ändra färgen när man håller musen över undermenyn*/

2. Gå sedan in i kodmallarna och lägg in denna kod vart du vill ha menyn ligga:

<ul id="navbar"> <li><a href="#" mce_href="#">Kategori 1</a> <ul> <li><a href="#" mce_href="#">Länk 1</a></li> <li><a href="#" mce_href="#">Länk 2</a></li> <li><a href="#" mce_href="#">Länk 3</a></li> </ul> </li> <li><a href="#" mce_href="#">Kategori 2</a> <ul> <li><a href="#" mce_href="#">Länk 4</a></li> </ul> </li> <li><a href="#" mce_href="#">Länk 5</a></li> <li><a href="#" mce_href="#">Kategori 3</a> <ul> <li><a href="#" mce_href="#">Länk 6</a></li> <li><a href="#" mce_href="#">Länk 7</a></li> <li><a href="#" mce_href="#">Länk 8</a></li> <li><a href="#" mce_href="#">Länk 9</a></li> </ul> </li> </ul>

Jag har den ligger precis efter <div id="wrapper"> <div id="header">

3. Innan du gör något annat med koden så kolla på din blogg så det funkar.

4. Börja sedan med kodmallen och fixa i ordning länkarna utefter hur du vill ha dom.

Börja med att lägga in adressen till de sidor som du länkar till, det gör du i denna kod: <li><a href="#">Länk1</a></li>
Byt ut # mot adressen och byt ut Länk 1 till det namn du vill att länken ska ha.

Sedan får du själv tänka lite hur du gör för att fixa din meny till din egna även när det gäller färger o s v..

Om du har tid eller har tråkigt har du lust att fixa så på min? Bara ändra så allt kommer där uppe (a) :D :D

sv: ah men dropdown vet jag.. men just de tre småbilder du har, flikarna, ovanför din menybild :) hur gör man det?

om man vill ha bilder vid/ovanför länken i dropdown menyn hur gör man då?

Hej,
Jag tänkte börja leka lite med html koder. Vill då göra en dropdown meny...men hur får jag den centrerad? Testat att skriva center men det fungerar ej. Hur gör jag?