<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">
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:
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:
6. Nu kan du ändra utseendet på menyn så du vill ha det!
7. "Spara stilmall" när du är klar!
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>
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