BLOGGHJÄLPARN
Designhjälp för din blogg

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

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

2011-08-03 | 16:40:53
URL: http://sterner.blogg.se/xx
Elisabeth

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

2011-08-03 | 18:30:06
URL: http://sterner.blogg.se/xx
Josefin

kika in och tävla =D

2011-08-05 | 18:11:46
URL: http://reloadmee.blogg.se/
Carolina

tack så jätte mycket! :D

2011-08-08 | 14:39:58
URL: http://carolina.alcenius.blogg.se/
Anonym

KOLLA IN MIN BLOGG<3

2011-08-08 | 23:40:11
URL: http://missyt.myshowroom.se
Ellinor

Hej :)



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



Hälsningar,

Ellinor

2011-08-11 | 12:53:27
URL: http://whiteflowers.blogg.se/
Jannika, mamma till Jillian

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

2011-08-14 | 14:44:58
URL: http://jannikassmulor.blogg.se/
moa

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

tacksam för svar!

2011-08-15 | 06:49:24
URL: http://mhellstrm.blogg.se/
Alexandra

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

2011-09-27 | 17:10:21
URL: http://alexandraabaaack.blogg.se/
Linnea

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?

2011-09-29 | 17:48:55
URL: http://ibookyou.blogg.se/
Sanna

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

2011-11-04 | 14:05:57
URL: http://sanelli.blogg.se/
Sara

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?

2011-11-04 | 16:06:49
URL: http://saraoscarsson.blogg.se/
Sara

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/

2011-11-06 | 09:47:48
URL: http://saraoscarsson.blogg.se/
Sofia

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

2011-11-08 | 23:58:08
URL: http://sofiacarolinaberg.blogg.se/
ellenor

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

2011-11-27 | 23:53:10
URL: http://eighthfloor.blogg.se/
Jojjo

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

2011-11-29 | 21:52:26
URL: http://jojjothewiki.blogg.se/
Jessica

Vad är en drop down meny ?

2011-12-08 | 23:46:55
Ina

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

2012-01-06 | 00:37:03
URL: http://itsina.blogg.se/
♥ HejerFeysal ♥

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

2012-01-28 | 17:34:29
URL: http://hejerfeysal.blogg.se/
amanda

funkar inte:(

2012-01-30 | 18:15:13
URL: http://ilovedesignnn.blogg.se/
MOA / HÄST & FOTO

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

2012-02-03 | 19:56:32
URL: http://ryttarliivet.blogg.se/
J U L I A

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

2012-02-20 | 19:14:34
URL: http://juliasjostrand.blogg.se/
Lovisa Jivhed

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!

2012-03-29 | 16:51:01
URL: http://jivhed.blogg.se/
Vilma - Silverbirds

Hur centrerar man menyn?

2012-08-17 | 12:25:37
URL: http://vintro.webblogg.se
HJÄLP!!

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

2012-10-15 | 13:22:23
Robin

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

2013-04-26 | 04:04:22
URL: http://personligtspel.blogg.se
Pauline Fager

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?

2013-05-15 | 10:14:10
URL: http://paulinefager.blogg.se
Vilma

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

2013-07-02 | 18:30:03
URL: http://vilmakristina.blogg.se
Lina

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

2013-08-16 | 15:02:43
URL: http://panicstation.blogg.se/
Kajsa

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

2013-09-08 | 11:51:09
URL: http://kajsaolander.blogg.se
Moa

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!

2013-11-21 | 10:04:33
URL: http://moahatlas.blogg.se
Lovis (lovislinnea.blogg.se)

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

2013-12-12 | 21:06:00
URL: http://lovislinnea.blogg.se

Kommentera inlägget här:

Namn:
Kom ihåg mig?

E-postadress: (visas inte)


URL/Bloggadress:


Kommentar:

Till Startsidan
Köp design

Designhjälp