Floating Facebook Widget
forsiden webdesign grafikk guider guider
Forsiden » Webdesign » Blogg.no » HTML og CSS » Dropdown meny

Dropdown meny

Lim dette inn i stilsettet:
Background-color, color (farge på teksten), border osv kan endres på.

#navbar {
padding: 5px;
height: 1em;
width: auto;
margin: 0px;
text-align: center;
}
#navbar li {
float: left;
list-style: none;
width: 150px;
background-color: #fff;
}
#navbar li a {
padding: 5px;
display: block;
border-bottom: 0px dashed #F7D7EE;
color: #000000;
text-decoration: none;
font-family: arial;
font-size: 10px;
line-height: 12px;
}
#navbar li ul {
padding: 5px;
display: none;
width: em;
background-color: #fff;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1;
text-align: left;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
}
#navbar li:hover li a, #navbar li.hover li a {
border-bottom: 1px dotted #ffc0c0;
color: #727272;
}
#navbar li li a:hover {
background-color: #ffc0c0;
}
#meny {
width: 610px;
margin-left: auto;
margin-right: auto;
} 

Og kodene under i malene hvor du vil at menyen skal vises. På bildet har jeg forklart hvor du skal lime inn koden.

<div id="meny">
<ul id="navbar">

<li><a href="#">Siste innlegg</a>
<ul>
<tag:recentlist limit="10">
<li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag:recentlist>
</ul>
</li>

<li><a href="#">Kategorier</a>
<ul>
<tag:categorylist>
<li><a href="${CategoryLink}">&raquo; ${CategoryName}</a></li>
</tag:categorylist>
</ul>
</li>

<li><a href="#">Arkiv</a>
<ul>
<tag:archivelist limit="10">
<li><a href="${ArchiveLink}">${ArchiveName}</a></li>
</tag:archivelist>
</ul>
</li>

<li><a href="#">Overskrift</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>

</ul>
</div>

Vil du ha flere «overskrifter» med dropdown meny, så legger du bare til dette før den siste </ul>.
Listene med siste innlegg, kategorier og arkiv kan fjernes hvis du ikke vil ha dem.
Bytt ut # med den url-adressen du vil linke til. Firkanten før overskrift kan bare stå der om du ikke vil ha noen link der.


<li><a href="#">Overskrift</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>

37 kommentarer

mia haugen 30. mai 2011, kl. 21:23

når jeg skal legge inn en ekstra knapp så havner den under «siste innlegg»-knappen, er det noe grunn til dette?

HJA - Hanna 31. mai 2011, kl. 19:42

Hvordan gjør man den større? :)

karoline 03. juni 2011, kl. 21:59

når jeg prøver meg på dropdown menyen, må liksom arkivet bli med. for viss jeg prøver å fjerne det, blir de andre knappene som en vanlig meny. det blir ikke dropdown. hvordan kan jeg fjerne arkivet derifra uten at jeg ødelegger menyen?

Kristin Daisy 04. juli 2011, kl. 14:56

Heia.
Prøver å legge inn drop down menyen, men den klikker veldig, blir ikke vanlig drop down.. Den er mere vertical enn horisontal.. Hva gjør jeg feil da? :S

Thale 10. juli 2011, kl. 16:55

Hvor i stilsettet skal man lime inn kodene?

Emilie 11. juli 2011, kl. 22:15

Jeg har nettopp fått meg denne menyen, og er veldig fornøyd! Sjekk det ut :)

Mia 22. juli 2011, kl. 01:55

Jeg har ikke den koden i stilsettet mitt

Nina Hekne 26. juli 2011, kl. 15:20

Da jeg limer inn den HTML koden i «innlegg» liksom, så blir hele bloggen skøvet til siden, hva gjør jeg galt?

amanda! 10. august 2011, kl. 02:04

Når jeg skal bruke den flyttest hele profilgreia mi nederst på bloggen :/ ?

amanda! 10. august 2011, kl. 14:24

sv; Vell, jeg tok alle kodene ovenfor og dobbelsjekket at de er på riktig plass, so I dont know..!

Mu 13. august 2011, kl. 15:01

Fantastisk, men på den jeg kan fikse «egen» der det står Overskrift
Link
Link
osv. så har jeg to problemer! for det første linker jeg til et innlegg, men det kommer ikke til noe det kommer masse %blablabla%blabla bak. Hva gjør jeg feil? problem nr. 2. jeg har link på alle de LINK-greiene, en til en blogg jeg hadde før, en til hvorfor jeg har det kallenavnet jeg har, og en til enda et innlegg med Om meg. men det kommer bare opp den gamle bloggen og innlegget om hvorfor jeg har det kallenavnet. Hva er problemet da?

Matilde Garnes - Kommenterer tilbake! 19. august 2011, kl. 16:16

Vet du hvordan man får dropdown meny i sidebaren slik som annais.blogg.no har?:-D har letet såå mye, men finner det ikke:(

Maria 05. september 2011, kl. 21:21

kunne du hjulpet meg med noe?? jeg har dropp down meny men som du ser på bloggen min så skal den stå i midten over innleggene som du sikkert skjønner også uten mellom rom mellom menyen og innleggene jeg får det ikke til kunne du hjulpet meg hvis jeg ga deg passord osv??? skirv svar på bloggen min er du snill mariaselina.blogg.no

Amalie 23. september 2011, kl. 18:04

Hei!
Jeg har et problem som jeg lurer på om du kkan hjelpe meg raskt med.
På bloggen min (ammi1.blogg.no) så er dropdown menyen min kjempe lang. Så jeg lurer på hvordan jeg får den vannrett.
Åsså hvordan jeg putter Arkiv inn i en boks og siste innlegg osv inn i en boks.
Håper du hjelper meg fort!!
Hilsen Amalie
ps. Hvis det er vanskelig og forklare kan du få passordet og brukernavn av meg på mail
( ammi1_blogg@live.no )
så du kan sette det inn.

Sandra 11. oktober 2011, kl. 07:06

Bilde som viser hvor jeg legger det inn funker ikke… Aner ikke hvor jeg skal legge inn HTML koden…

Sandra 11. oktober 2011, kl. 07:13

Nå funket bilde,men da jeg legger inn koden kommer den over headeren og er ikke dropdown…

Amanda 13. oktober 2011, kl. 14:58

Jeg skjønte ikke hvordan man skulle gjøre det :c

Kraakesolv 15. oktober 2011, kl. 11:42

Eg får det ikkje til… de kjem berre masse tekst…

Sikki 17. november 2011, kl. 17:01

Hei, har fått meg et nytt annet design, og vil gjerne ha arkiv og kategorier i drop-down menyen. Jeg prøvde dine «kategorier og arkiv», og kategoriene funka, men ikke arkiv. Det vises bare helt ned til februar 2011, og jeg har blogget på bloggen siden april 2010.
Du kan gå inn på bloggen å se på drop-down menyen, men jeg har ikke lagret kategorier og arkiv i de ennå, vil vente til det funker…

Og en ting til, når jeg prøver å trykke på de kommer jeg ikke lenger ned enn til nr.1..

Forklarer kanskje litt komplisert, og kanksje det bare blir tull, siden jeg mikser de sammen med en annen drop-down meny, enn vist her, men hadde likevel vært fint om du sjekket det ut! :)
Takk på forhånd, skal prøve å lete videre!

ida 15. desember 2011, kl. 16:23

Hei, tusen takk for koden, menyen ble kjempe fin! Men når jeg skal lime den inn slik at den vises over hvert innlegg skyves alt bort mot venstre… Hvordan får jeg bloggen til å se rett ut? Skal koden limes inn et spesielt sted på innlegg HTMLen? Har prøvd å lime den forskjellige steder, men alt blir feil.. Har skoleblogg og jobber med designet på den idag, så trenger virkelig hjelp til dette. Håper du svarer.

Marie 22. desember 2011, kl. 16:08

Hvordan får man dropdown meny i sidemenyen ? :o

Helena 11. april 2012, kl. 21:38

Jeg prøver å få vekk dropdown menyen, men vet ikke helt hvilken kode jeg skal fjerne. Kan du vise det? :)

Tolljkua 13. juni 2012, kl. 19:31

æ ment egentli å skriv: Hei, vet du hvordan koda man kan bruk for å få dropdown te arkiv, kategori, siste innlegg å siste komentar i sidemenyen?:) ***

Tora Kristine 06. juli 2012, kl. 00:59

Hei, har akkurat limt inn denne menyen, men når jeg skal velge en av mine 5 kategorier – så havner jeg kun på en av dem..
Hva kan dette være?

Mette 23. juli 2012, kl. 14:20

Hei!

Kan du prøve og forklare hvordan du får sånn at det går flere linker ned under eks.

Blogger jeg leser så vil jeg at det skal stå bloggadresser under vis du fatter?

Ingjerd 03. august 2012, kl. 12:18

Hvordan kan jeg «midtstille» menyen slik at den på en måte ikke står rett over overskriften, men mer på midten?

Diddiana 04. august 2012, kl. 22:38

Hei :-) Hvordan setter jeg menyen inn på innlegg ? Får den bare på forsiden ^^

Diddiana 04. august 2012, kl. 22:51

Hei igjen! :-) Jeg får det på en måte til, men hele designet mitt blir ødelagt da :/ Eller innlegget blir utrolig smalt og jeg får ikke sett hele blogen min :/ Gjør jeg noe feil? Jeg har satt inn koden på samme sted som på forsiden :-)

Diddiana 04. august 2012, kl. 23:24

Jeg skal kikke på det nærmere senere :-) men tusen takk for mye nødvendige tips! Du er veldig flink ;)

Tonje @ The Pink Phone 30. desember 2012, kl. 00:09

Tusen takk for alt du legger ut :)

Kine Nyhus 27. august 2013, kl. 00:34

Heisann! Syntes det er kjempebra at du hjelper oss som ikke er så tekniske! :)
Jeg lurer på hvordan jeg kan få til en «side» der jeg kan forklare hvorfor jeg velger utveksling, men vet ikke helt hva, eller om, jeg må legge til som link.

Håper på svar!

Meg 26. november 2013, kl. 20:26

Hei!
Jeg ville gjerne at dropdown menyen skal være like lang som headeren.
Prøvde å bytte ut noen tall, men finner ikke ut hvilket tall som må byttes.
Kunne du evt. sjekket siden og hjulpet meg?

Aida 04. februar 2014, kl. 22:38

Hei!

Yes! Ved å lese dette innlegget fikk jeg etter alt for lang tid ordnet opp i det jeg har slitt med.
Tusen takk!!! :D

Skriv en kommentar

E-postadressen din vil ikke bli publisert. Påkrevde felt er markert med *.

*


Du kan bruke disse HTML-kodene og -egenskapene: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Søk

 

Nerdie.me Design Proudly powered by WordPress