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
03 Augusti 2011 kl. 15:38

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

03 Augusti 2011 kl. 15:38

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? :)

03 Augusti 2011 kl. 15:38

kika in och tävla =D

03 Augusti 2011 kl. 15:38

tack så jätte mycket! :D

03 Augusti 2011 kl. 15:38

KOLLA IN MIN BLOGG<3

03 Augusti 2011 kl. 15:38

Hej :)



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



Hälsningar,

Ellinor

03 Augusti 2011 kl. 15:38

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

03 Augusti 2011 kl. 15:38

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

tacksam för svar!

03 Augusti 2011 kl. 15:38

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;)

03 Augusti 2011 kl. 15:38

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?

03 Augusti 2011 kl. 15:38

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

03 Augusti 2011 kl. 15:38

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?

03 Augusti 2011 kl. 15:38

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/

03 Augusti 2011 kl. 15:38

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

03 Augusti 2011 kl. 15:38

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? :)

03 Augusti 2011 kl. 15:38

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 :)

03 Augusti 2011 kl. 15:38

Vad är en drop down meny ?

03 Augusti 2011 kl. 15:38

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 ;)

03 Augusti 2011 kl. 15:38

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

03 Augusti 2011 kl. 15:38

funkar inte:(

03 Augusti 2011 kl. 15:38

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

03 Augusti 2011 kl. 15:38

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? :)

03 Augusti 2011 kl. 15:38

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!

03 Augusti 2011 kl. 15:38

Hur centrerar man menyn?

03 Augusti 2011 kl. 15:38

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

03 Augusti 2011 kl. 15:38

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

03 Augusti 2011 kl. 15:38

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?

03 Augusti 2011 kl. 15:38

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! :)

03 Augusti 2011 kl. 15:38

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

03 Augusti 2011 kl. 15:38

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!! :)

03 Augusti 2011 kl. 15:38

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!

03 Augusti 2011 kl. 15:38

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 :/


Kommentera inlägget här:


Namn:
Kom ihåg mig?

E-postadress: (publiceras ej)


URL/Bloggadress:


Kommentar: