Stine ( http://stinesandberg.blogg.no/ ) ønsket seg dropdown menyer så da prøver vi på det.
Dette er noen helt enkle som du kan utforme slik du vil. Her finner du en demo av den menyen som er vist her: http://www.lostdot.com/testdesign/dropdown/
Vanskelighetsgrad: Litt innsikt i html og tungen rett i munnen.
Først skal vi ha noe inn i “stilsett” filen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | #pad {height:140px;} /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssmenus.co.uk Copyright (c) 2009- Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #menu {padding:0; margin:0; list-style:none; height:40px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;} #menu li {float:left; margin-right:1px;} #menu li a {display:block; float:left; height:40px; line-height:40px; background:#333; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 30px 0 20px;} #menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} /* Default link styling */ /* Style the list OR link hover. Depends on which browser is used */ #menu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;} #menu li:hover {position:relative; z-index:200;} #menu li:hover > a {color:#fff; background:#c60;} #menu li:hover > a.sub {color:#fff; background-color:#c60;} #menu li a.sub {background: #333 url(down-arrow.gif) no-repeat right center;} #menu :hover ul {left:0; top:40px; width:120px; background:#444;} /* keep the 'next' level invisible by placing it off screen. */ #menu ul, #menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} #menu :hover ul :hover ul {left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;} #menu :hover ul li {margin:0; border-top:1px solid #666;} #menu :hover ul li a {width:120px; padding:0; text-indent:10px; background:#333; color:#ccc; height:30px; line-height:30px;} #menu :hover ul li a.fly {background:#333 url(right-arrow.gif) no-repeat right center;} #menu :hover ul :hover {background-color:#c60; color:#fff;} #menu :hover ul :hover a.fly {background-color:#c60; color:#fff;} #menu :hover ul li.currentsub a {background:#840; color:#fff;} #menu :hover ul li.currentsub a.fly {background:#840 url(right-arrow.gif) no-repeat right center; color:#fff;} #menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;} #menu :hover ul :hover ul :hover {background-color:#d70; color:#fff;} |
Lagre og forhåndsvisning. Ikke noe forskjell sier du ? 
helt rett, skal ikke se noe forskjell enda.. I noen sammenhenger kan du se forskjell, dette kommer av at du kanskje har en “meny” kode som bruker den koden du puttet inn nÃ¥.
Da er tiden kommet til at du må bestemme deg hvor du vil ha menyen,
Gå inn på maler:
Se etter en linje som ser slik ut ( kan være litt forskjellige fra design til design ):
<div id=”wrapper” class=”yui-gc”>
hvis du plasserer koden under, rett etter denne linjen vil du få menyen under headeren.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <ul id="menu"> <li><a href="#"><strong>Hjem</strong></a></li> <li><a href="#"><strong>Om meg</strong></a></li> <li><a class="sub" href="dropdown.html"><strong>Kategorier</strong><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td><![endif]--> <ul> <li><a href="#url">Diverse</a></li> <li><a class="fly" href="#url">Ferie<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td><![endif]--> <ul> <li><a href="#url">Sommer</a></li> <li><a href="#url">Høst</a></li> <li><a href="#url">Vinter</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> </a><![endif]--></li> <li><a class="fly" href="#url">Blogger<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]> <table> <tr> <td><![endif]--> <ul> <li><a href="#url">Anbefalinger</a></li> <li><a href="#url">Design hjelp</a></li> <li><a href="#url">Bilder</a></li> </ul> <!--[if lte IE 6]></td> </tr> </table> </a><![endif]--></li> </ul> <!--[if lte IE 6]></td> </tr> </table> </a><![endif]--></li> <li><a href="#"><strong>Kontakt meg</strong></a></li> <li><a href="#"><strong>Hjelp?!</strong></a></li> </ul> |
Bytt ut det du vil med dine valg. Dette kan være utrolig vanskelig for noen som ikke kan html/css. DERfor vil jeg i løpet av de nærmeste dagene ordne til et side der dere kan skrive inn meny valg og koden dere skal lime inn i menyen vil automatisk bli laget til.
Men akkurat nå er det litt seint 
Menyen er hentet fra: http://www.cssmenus.co.uk her har de mange menyer som du kan laste ned gratis. bare å bruke samme fremgangsmåten som over.
EDIT: Stine Sandberg har også skrevet sin egen forklaring på sin blogg, hvis du ikke forstår noe av det jeg skriver over så ta en titt innom hennes blogg.
Jeg bare lurer på hvordan man bytter fargene. Vil ha rosa på selve knappene, og når man holder over dem så vil jeg ha brunt.
Og hvordan får man menyen til å stå midt på siden?
:]
Stine Sandbergs siste blogg innlegg..Tips til alle bloggere
Stine:
For Ã¥ forandre fargen nÃ¥r du holder musen over mÃ¥ du se etter følgende “classer”. Disse er spredd litt rundt i den koden du satte inn tidligere. inni disse, før du kommer til den første } etter disse. Vil du finne noe som heter “background-color” der setter du fargen du vil den skal bli nÃ¥r du holder musen over.
Disse linjene står forskjellige plasser i koden du satt inn.
#menu li a:hover {
#menu :hover ul :hover {
#menu :hover ul li a {
hvis du studerer koden over vil du se at alle starter med “hover” dvs at det som er listen opp under “hover” er det som skjer med teksten nÃ¥r du holder musen over.
For Ã¥ forandre den faste fargen ser vi etter “backgorund-color” igjen. NÃ¥ vil du finne den under:
#menu li a {
For å forandre plasseringen må du finne denne linjen:
#menu {padding:0; margin:0; list-style:none; height:40px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
Hvis du ønsker Ã¥ ha den pÃ¥ midden mÃ¥ du fjerne “margin:0;” og sette inn:
margin-left:auto; margin-right:auto; width: 600px;
hvis du bare vil flytte den litt inn pÃ¥ siden forandrer du “padding: 0;” til
padding: 0 0 0 0px;
Der den siste “0px” er hvor mange pixler du vil flytte den inn pÃ¥ siden. “72px” vil gjøre at den kommer akkurat til kanten pÃ¥ din side
Håper dette kan hjelpe deg til å finne ut hva du må gjøre.
Ja, tusen takk! NÃ¥ fikk jeg det til :]
Stine Sandbergs siste blogg innlegg..Under endring.
hvordan legger jeg inn disse sidene? som om meg, diverse osv..
Nicolin Bjòrks siste blogg innlegg..Første gang jeg debuterte..
Hei!
Hvordan klarer du Ã¥ fÃ¥ sÃ¥nn “boks” der det stÃ¥r “lagt inn” ogsÃ¥ datoen osv. ?
Mvh. Ingeborg
Ingeborg: Jeg bruker noe som heter Wordpress, men det skal være fult mulig å få til på alle blogg plattformer. Jeg må bare vite hvor du har bloggen din. Feks på blogg.no ?
Hei igjen! Jeg lurte på om du visste hvordan man fjerner sidemenyen helt på blogg.no? Jeg har prøvd før å bare fjerne alle ting som pleier å være inne i sidemenyen, men da er det fortsatt sånn hvitt åpent område hvor det vaneligvis var sidemeny. Jeg vil ha vekk det sånn at innleggene er over hele siden på en måte. Vanskelig å forklare.
Ja tusen takk. Hvordan får man teksten sånn at den er i midten? Sånn at hvis man skal gjøre den teksten litt smalere til for eksempel 70% så blir de like mye hvitt på begge sider? Fordi hvis jeg gjør det nå så blir det bare hvitt på den ene siden :]
Hei, jeg har sÃ¥nn ca fÃ¥tt det til, men hvis jeg tar pilen pÃ¥ “Forsiden, sÃ¥ kommer det opp linker til kommentarer, permalenke og tips en venn eller noe ! Det vil jeg ikke ha der ! Tror du du vet hva jeg har gjort feil, eller hvorfor det er sÃ¥nn?
Så lurte jeg på en ting til, hvordan kan jeg midstille selve menyen, slik som stine sandberg mente tror jeg. At det er like mye hvitt eller i mitt tilfelle beige, på begge sider?
Takk for hjelpen
SÃ¥ var det en ting til
Hvordan kan jeg fÃ¥ liksom Forsiden, Om meg og Arkiv til Ã¥ ikke komme i bold, ikke dropdownen, den klarte jeg Ã¥ endre, men jeg finner ingen flere “font-weight: bold; ” 
er ikke direkte verdensmester i det her :p
Du svarte ikke på mitt forrige spørsmål etter at jeg hadde spurt om sidemenyen, så jeg prøver igjen
Ja tusen takk. Hvordan får man teksten sånn at den er i midten? Sånn at hvis man skal gjøre den teksten litt smalere til for eksempel 70% så blir de like mye hvitt på begge sider? Fordi hvis jeg gjør det nå så blir det bare hvitt på den ene siden :]
Hei
Jeg lurer på hvordan jeg skal midtstille drop down menyen?
Jeg har prøvd å skrive på starten av koden og på slutten, men det fungerte ikke.
Vet du hvordan jeg skal midtstille menyen?
Lurte på det samme som Stine Sandberg:) Hvordan får man menyen vekk og innlegene helt ut til siden? Har lurt så lenge på det!
Takker MASSE for hjelp!
Hei, hvordan var det man fjernet sidemenyen helt? :] Jeg har glemt det skjønner du, også har jeg laget meg en ny blogg.
Og hvordan fjerner man footeren?
Hei!
Jeg prøver å fikse litt på designet mitt, men jeg får ikke til å lage det slik jeg vil. Har prøvd med kodene, men alt ser bare helt feil ut. Er det noen mulighet for at du kunne hjelpe litt? Jeg står heelt fast!
Hva skal man egentlig fylle inn i stedenfor dropdoen i ?
Ellers har jeg fått det til.
ref=” dropdown .html ”
altså- hva fyller man inn her?
Ida: ser jeg har glemt Ã¥ svare deg, men der det stÃ¥r “dropdown.html” skriver du inn en adresse hvis du vil at de skal komme til en side nÃ¥r de trykker “hovedknappen” og ikke en av de knappene som dukker opp under. Se feks pÃ¥ test menyen ( link pÃ¥ toppen av siden ) Hvis du gÃ¥r bort til “kategori” sÃ¥ dukker det opp en haug med valg under. MEN hvis du velger Ã¥ trykke pÃ¥ “kategori” knappen sÃ¥ kommer du til denne adressen du skriver inn her..
Hvis du ikke ønsker å ha noe der så skriv inn # i stede for adressen.. håper dette ble litt forstålig
hvordan får jeg lagt inpå innlegg på for eksempel om meg eller anbefalinger få det ikke til ( eller skjønner ikke hvordan man gjør det)
THANK YOU! Det der irriterte meg grønn! Haha.
Hei ! Bare lurte pÃ¥ hvordan man lager nye sider i bloggen, f.eks “Om meg” sider ogsÃ¥nn.. Takker pÃ¥ forhÃ¥nd:)
Heisann!
Jeg prøver å få til dropdown meny, men det kommer bare som en liste nedover under headeren. Har fått det til før, men etter at jeg lagde ny blogg vil det ikke funke. hvorfor ikke? Kan du hjelpe meg?
Hei!
Jeg bare lurte på om du har noen koder på hvordan man kan få sidebaren skilt fra selve bloggen. thank you!
SV: Du er en reddenes engel, du ANER ikke hvor lenge jeg har prøvd og strevet med å få til sånn! med 100 forskjellige koder, haha.. så kommer du med èn, og den funker! Haleluja
Tusen hjertelig takk! Du lager vel ikke tilfeldigvis headere ogsÃ¥?…..
Tusen takk for hjelpa! men en liten ting til jeg lurer på, hvordan får jeg fjerna den svarte streken som går under menyen min nå? den kom når jeg sletta de kodene!
Tusen hjertelig takk igjen
Hei, kommer med et kanskje litt teit spørsmål.
Jeg har allerede en meny på bloggen min, er det vanskelig å lage til dropdown på den jeg allerede har? eller må jeg lage til en ny meny for å få dropdown effekten?
sv: ja heldigvis, vi var heldige der.
men ikkje fullt så heldige på veg heim, då blei det buss.
Ã¥ kunne du ha gjort det? det hadde vore fantastisk snillt av deg.
veit ikkje om du fikk kommentaren eg posta tidligare i dag, men uansett.
ja eg var veldig heldig som fikk fly til oslo, men ikkje fullt så heldig som måtte ta buss tilbake :/
åååh. kunne du ha hjelpt meg med det?, så hadde det vore utrulig snillt av deg.
Jeg får ikke denne koden til å virke helt. Jeg får frem menyen på bloggen, men det blir ikke dropdown. Jeg prøvde å sette inn URL til dit knappene skulle gå, men det skjedde ingen forskjell. Også lurer jeg på en ting til, hvordan gjør du når du skal ha flere knapper med dropdown å ikke bare den ene?
Oj! Fikk til nå pluttselig, men ikke med å endre flere knapper til dropdown. Har denne koden noe med hvordan internett du bruker? For er på en annen pc en forrige gang jeg prøvde.
Jeg gikk foresten inn på den siden du linkte til her, å fannt en stilig meny der som passer bedre til designet mitt, hvordan får jeg den inn?
http://www.cssmenus.co.uk/dropline.html <– nr 4 med de runde knappene.
Prøvde å laste ned på den forrige men fant bare html koden, tror jeg.
Beklager å mase, vil bare bli ferdig med designet fortest mulig
Kunne du hjelpe meg med det jeg spurte om ovenfor?
Vil også bare legge til at de andre kodene du har lagt ut har vært til kjempestor hjelp! ^^
Heij:) Jeg får ikke dette til! Skal ha
*Ingrid (med undermenyene:)
-opplevelser
-tanker
-drømmer
-hobby
*interesser
-Altmulig
-mat
-natur
*diverse
-bilder
-lignelser
-our place
Kunne jeg fått en kode som passet til antallet, så kan jeg fylle inn navn og URL? Det hadde vert supert hvis du hadde giddet å ta deg tid til det:)
Hei, takk for hjelpen med dropdown meny. Var til stor hjelp. Nå lurer jeg på en ting. Jeg ønsker at menyen skal vise på alle sidene, men får det ikke til, det vil si, når jeg klikker meg inn på ett innlegg for å lese et bestemt, forsvinner menyer, noe som ikke er så kjekt når du må stresse me å komme tilbake. Håper virkelig at du kan ta deg tid til å svare, hadde vært til stort hjelp (:
Hei, ser at du har tatt en bloggpause, men håper på svar allikevel. Har prøvd å legge inn menyen her: http://www.dekule.blogg.no, men får ikke drop-down effekten til å fungere. På testen du har lagt ut av hvordan den skal se ut, er det en liten pil som viser at det er dropdown. Den får jeg ikke opp her, kan du hjelpe?