Blogghjälparn
Designhjälp för din blogg
03 Augusti 2011, 15:38

Dropdown meny.

<ul id="dropdown">
<li><a href="#">Länk 1</a>
<ul>
<li><a href="#">Länk 1 - 1</a></li>
<li><a href="#">Länk 1 - 2</a></li>
<li><a href="#">Länk 1 - 3</a></li>
</ul>
</li>
<li><a href="#">Länk 2</a>
<ul>
<li><a href="#">Länk 2 - 1</a></li>
<li><a href="#">Länk 2 - 2</a></li>
<li><a href="#">Länk 2 - 3</a></li>
</ul>
</li>
<li><a href="#">Länk 3</a>
<ul>
<li><a href="#">Länk 3 - 1</a></li>
<li><a href="#">Länk 3 - 2</a></li>
</ul>
</li>
<li><a href="#">Länk 4</a></li>
</ul>
Många har frågat efter en dropdown meny under headern. Här kommer det hur man gör ;)

1. Klicka dig in på fliken "Design" och sedan vidare till "Kodmallar".

2. Precis under

<div id="header">
<h1><a href="${BlogUrl}">${BlogTitle}</a></h1>
<h2>${BlogDescription}</h2>
</div>

lägger du till följande:

<ul id="dropdown">
<li><a href="#">KATEGORI 1</a>
<ul>
<li><a href="http://www.blogghjalparn.blogg.se">Designhjälp</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
</ul>
</li>
<li><a href="#">KATEGORI 2</a>
<ul>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
</ul>
</li>
<li><a href="#">KATEGORI 3</a>
<ul>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
</ul>
</li>
<li><a href="#">KATEGORI 4</a></li>
</ul>


3. "Spara kodmall"!


4. Nu går du till "Redigera stilmall".


5. Längs ned i stilmallen kopierar du och klistrar in följande:

#dropdown {
background: #ccc url();
float: left;
padding: 0px;
color:#000;
margin-top: 0px;
width: 100%;
}


#dropdown li {
background: #ccc url();
float: left;
list-style: none;
padding-top:5px;
position: relative;
height:27px;
width:120px;
text-align:center;
}

#dropdown li:hover {
background: #ccc url();
text-align:center;
}


#dropdown li a {
font-family:  Arial, Helvetica, Sans-serif;
font-size: 17px;
font-weight: bold;
color: #000;
padding:10px;
text-transform: uppercase;
text-decoration:none;
}

#dropdown ul {
background: #ccc url();
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 20px;
left: 0px;
z-index: 500;
}

#dropdown ul {
background: #ccc url();
position: absolute;
}

#dropdown li:hover ul {
background: #ccc url();
display: block;
margin-top:12px;
}


6. Nu kan du ändra utseendet på menyn så du vill ha det!


7. "Spara stilmall" när du är klar!


8. Nu har du en dropdown meny under headern men utan länkar. Så klicka dig till "kodmallar" igen och koden du klistra in där förut. Lägg nu in länkarna du vill ha i meyn.

Där det står LÄNKADRESS skriver du in själva länken t.ex http://www.blogghjalparn.blogg.se . OBSERVERA att du måste ha med https:// eller http:// innan www. ! Annars kommer inte länken funka.

Där det står LÄNKENS NAMN skriver du in t.ex Designhjälp!


9. "Spara kodmall".


För att få fler länkar under t.ex KATEGORI 2 så lägger du till <li><a href="EN TILL LÄNKADRESS">NYA LÄNKENS NAMN</a></li> mellan <ul> och </ul> såhär:


<li><a href="#">KATEGORI 2</a>
<ul>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="EN TILL LÄNKADRESS">NYA LÄNKENS NAMN</a></li>
</ul>
</li>


Vill du ha en till kategori lägger bara till följande: 


<li><a href="#">NY KATEGORI</a>
<ul>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
</ul>
</li>

Kommentarer
Elisabeth

03 Augusti 2011 kl. 16:40

Hej!



Jag försöker få till det här med länkarna, dina beskrivningar är superbra men av någon anledning så vill det inte riktigt funka för mig. Mina länkar blir till min egen blogg så att säga. Som den länken du lagt in som ska gå tillbaka hit, i webbläsaren står det: http://sterner.blogg.se/xx/www.blogghjalparn.blogg.se , när jag trycker på länken sedan.



Vet du möjligen varför?



Hälsningar,

Elisabeth


Elisabeth

03 Augusti 2011 kl. 18:30

Hej igen!



Nej, det gjorde det tyvärr inte. Saken är den att oavsett vad jag skriver så läggs det bara till på min egna bloggadress i webbläsaren. Så om jag ska länka till google blir det sterner.blogg.se/www.google.se eller sterner.blogg.se/www.facebook.se eller vad som helst. Har du någon aning om vad det kan vara för något som går snett för mig? :)


Josefin

05 Augusti 2011 kl. 18:11

kika in och tävla =D


Carolina

08 Augusti 2011 kl. 14:39

tack så jätte mycket! :D


Anonym

08 Augusti 2011 kl. 23:40

KOLLA IN MIN BLOGG<3


Ellinor

11 Augusti 2011 kl. 12:53

Hej :)



Går det att lägga till fler länkar och i sånna fall hur?



Hälsningar,

Ellinor


Jannika, mamma till Jillian

14 Augusti 2011 kl. 14:44

Kan du berätta hur jag lägger in en dropdown om jag ahr en befintlig flik över min hader?


moa

15 Augusti 2011 kl. 06:49

jag har samma problem som Elisabeth.. hur fixar man det?

tacksam för svar!


Alexandra

27 September 2011 kl. 17:10

Hej:)

Jag tycker din blogg är superbra!

jag har fixat nästan hela min blogg efter den nu på sista tiden:)

Kolla gärna den;)


Linnea

29 September 2011 kl. 17:48

Tack :) Men jag fick inte med det där med kategori 1 å 2 :P



Tror du du kan kolla om det är rätt liksom?


Sanna

04 November 2011 kl. 14:05

hur gör man det genomskinligt om man använder dem dr koderna?


Sara

04 November 2011 kl. 16:06

Hej, jag har lagt in koderna och länkar i dropdownmenyn precis som man ska men när jag håller musen över undermenyn så försvinner den. Det går alltså inte att klicka på någon av mina länkar i undermenyn. Vad är det som äär fel?


Sara

06 November 2011 kl. 09:47

Hej detta är min kod i stilmallen för dropdownmenyn ser du vad som är fel? :)



#navbar {

margin: 0;

padding: 0;

height: 1em; }

#navbar li {

list-style: none;

float: left; } / Ändra till right om du vill ha menyn till höger istället/

#navbar li a {

display: block;

padding: 7px 61px;

background-color: #0A0C11; /Ändra färgen på menyflikarna här/

color: #fff; /Ändra färgen på texten här/

text-decoration: none;

font-family: Times New Roman; /Ändra typsnittet här/

font-size: 16px; } /Ändra storleken på texten här/

#navbar li ul {

display: none;

width: 10em; / Ändra bredden på undermenyn här /

background-color: #0A0C11;}

#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: #0A0C11 ; /Ändra färgen på undermenyn/

border-bottom: 1px solid #fff;

color: #fff; } /ändra textfärgen på undermenyn här/

#navbar li li a:hover {

background-color: #0A0C11; } /Ändra färgen när man håller musen över undermenyn/


Sofia

08 November 2011 kl. 23:58

Jag vill ha dropdown under min header men den hamnar uppe över den, kan inte få ner den, hur gör jag??


ellenor

27 November 2011 kl. 23:53

hej ! :)

Har lagt in drop menyn och den funkar jättebra! :)



nu till frågan, jag har tagit bort min sidomeny.. Kan jag få arkiv, kategori & senaste inlägg i drop menyn istället? Och hur? :)


Jojjo

29 November 2011 kl. 21:52

Jag har gjort menyer under headern, och nu undrar jag hur man gör en dropdown-meny med t.ex. "Senaste inläggen". Jag har testat hur länge som helst men förstår inte hur man får det att alltid uppdateras.. förlåt om det var svårt att förstå. Tacksam för svar :)


Jessica

08 December 2011 kl. 23:46

Vad är en drop down meny ?


Ina

06 Januari 2012 kl. 00:37

Hejsan! Jag undrar hur man gör för att få bort en dropdown meny, är det bara att radera det som du visade här ovanför att man skulle ta bort? Om det kan hjälpa så kan du kolla på min blogg för att se hur menyn ser ut, har nämligen en blandning av dropdown och vanlig som det är nu ;)


♥ HejerFeysal ♥

28 Januari 2012 kl. 17:34

åh tack så mycket! Du räddade min nya design som jag ska ha snart! :)


amanda

30 Januari 2012 kl. 18:15

funkar inte:(


MOA / HÄST & FOTO

03 Februari 2012 kl. 19:56

jag har lagt till en dropdown meny på min test blogg men hur gör jag den genom skinlig


J U L I A

20 Februari 2012 kl. 19:14

Jag har lagt in en dropdown meny på min blogg nu, men hur får jag den i mitten? Och kan man göra så att länkarna i kategorierna i dropdown menyn blir till en annan färg när man håller musen över länken? :)


Lovisa Jivhed

29 Mars 2012 kl. 16:51

Jag kan varken lägga till eller ta bort länkar. Även om jag har rätt kod innan och efter (<li><ul>kod</ul) Så fort jag tar bort en länk eller lägger till flyttar sig hela min blogg, och ibland hamnar hela bloggen i en kategori? Kan du kanske mejla mig, så kanske du kan hjälpa mig att sätta in den bra!


Vilma - Silverbirds

17 Augusti 2012 kl. 12:25

Hur centrerar man menyn?


HJÄLP!!

15 Oktober 2012 kl. 13:22

Hjälp!

Jag har ingen vanlig meny utan bara en drop down meny men hur får man arkivet att byta månader av sig själv å hur får man senaste inläggen att uppdatera av sig själv? snäälla svara


Robin

26 April 2013 kl. 04:04

Hej, jag fick dessa att fungera bra, men jag undrar om man kan få hela listan man markerar att ändra färg och få texten som länkarna i listan består av att ändra färg när man markerar dem, jag är dålig på att beskriva vad jag vill åstakomma kanske men jag hoppas innerligt att du förstår, tack för all hjälp


Pauline Fager

15 Maj 2013 kl. 10:14

hejsan! håller på att fixa min blogg och min meny fungerar men om jag vill klicka mig in på mina kommentarer eller så så fuckar allt ur och då öppnas min meny istället, hjälp please?


Vilma

02 Juli 2013 kl. 18:30

Hej tack för tipset! Men jag undrar om man kan göra kategorin till en länk? Jag vill inte ha flikar på alla kategorier! Tacksam för svar! :)


Lina

16 Augusti 2013 kl. 15:02

Det funkade! Men hur fixar man så att den är ovanför headern, om det går att göra? :)


Kajsa

08 September 2013 kl. 11:51

Om man tar bort sidomenyn hur gör man då för att få senaste inläggen, arkiv och kategorier i dropdown menyn? Mycket tacksam för svar!! :)


Moa

21 November 2013 kl. 10:04

Hej! Har en dropdown under headern. Men den är "fast" med content OCH side, hur lossar jag den från side? (vill flytta upp dropdown på headern men då åker side med upp).

Tacksam för svar!


Lovis (lovislinnea.blogg.se)

12 December 2013 kl. 21:06

Jag håller på att göra en bloggdesign till min vän med din drop-down meny. Men jag har en fråga, går det att göra så där det står KATEGORI 1 etc att det är direktlänkar till en viss kategori? Som på Zara larssons blogg zarish.blogg.se jag har försökt hittat hur man gör superlänge men hittar inget! vet du hur man gör, jag har använt din mall här ovanför! tacksam för svar snabbt har hållt på väldigt länge med hennes design <3 :/


nathalieg.blogg.se

06 Augusti 2014 kl. 11:12

Den fungerar inte längre!? :(


Kommentera här:











Om
BLOGGHJALPARN.BLOGG.SE

Hos blogghjalparn.blogg.se finner du textguider om HTML & CSS. Guiderna riktar sig till bloggare som vill ha hjälp med sin bloggdesign. Man kan själv läsa sig till hur man ska göra eller så kan man beställa sin egna design alternativt köpa en redan färdig design.

Copyright © 2015 Blogghjälparn


Senaste inläggen

Kategorier
Arkiv
Portaler & Listor