http://www.gifyo.com/

Dropdown meny med tex dina kategorier


1. Kopiera denna koden:

<ul id="navbar"> <li><a href="#" mce_href="#"> Rubrik1 </a> <ul> <li><a href="länk" mce_href="/922173/entries/article/new/länk"> Text</a> </li> <li><a href="länk" mce_href="/922173/entries/article/new/länk"> Text</a> </li> <li><a href="länk" mce_href="/922173/entries/article/new/länk"> Text</a> </li> </ul> </li> <li><a href="#" mce_href="#"> Rubrik2 </a> <ul> <li><a href="länk" mce_href="/922173/entries/article/new/länk"> Text</a> </li> <li><a href="länk" mce_href="/922173/entries/article/new/länk"> Text</a> </li> <li><a href="länk" mce_href="/922173/entries/article/new/länk"> Text</a> </li> </ul> </li> <li><a href="#" mce_href="#"> Rubrik3 </a> <ul> <li><a href="länk" mce_href="/922173/entries/article/new/länk"> Text</a> </li> <li><a href="länk" mce_href="/922173/entries/article/new/länk"> Text</a> </li> <li><a href="länk" mce_href="/922173/entries/article/new/länk"> Text</a> </li> </ul> </li> <li><a href="#" mce_href="#"> Rubrik4 </a> <ul> <li><a href="länk" mce_href="/922173/entries/article/new/länk"> Text</a> </li> <li><a href="länk" mce_href="/922173/entries/article/new/länk"> Text</a> </li> </ul> </li> </ul>

2. Gå in i kodmallen och klistra in koden efter:

3. Kopiera denna koden och lägg den längst ner i stilmallen:
#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-left:10px; padding-right:10px; padding-top:5px; padding-bottom:0px; border-left: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background-color: #cccccc; /*Ändra färgen på menyflikarna här*/ color: #000000; /*Ändra färgen på texten här*/ text-decoration: none; font-family: verdana; /*Ändra typsnittet här*/ font-size: 10px; } /*Ändra storleken på texten här*/ #navbar li ul { display: none; width: 11em; /* Ändra bredden på undermenyn här */ background-colo: #ffffff; } #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: #ffffff; /*Ändra färgen på undermenyn*/ /* opacitet for IE */ filter:alpha(opacity=90); /* opacity: 0.90; filter: alpha(opacity=90); */ /* opacitet CSS3 standard */ opacity:0.90; /* opacitet for Mozilla */ -moz-opacity:0.90; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: #696969; } /*ändra textfärgen på undermenyn här*/ #navbar li li a:hover { color: #ffffff; background-color: #898888; } /*Ändra färgen när man håller musen över undermenyn*/

Nu ska jag förklara hur man lägger in Rubrik och länkarna under

Exempel:
<li><a href="#"> Foto </a>

Skapa en dropdown meny kan man göra på olika vis och jag ska visa lite exempel

Tips 1 skapa en meny med senaste inlägg, kategorier...se bild nedan.

1. Börja med att gå in i dn kodmall och bläddra ner till  <div id="side">


2. Ta bort denna koden:


3. Kopiera denna koden:

<div>
<ul>
<li><a href="index.html" title="Gå till startsidan"><strong>Till bloggens startsida</strong></a></li>
</ul>

Nu ska jag visa hur man lätt kan ändra menyn så den ser ut så här, se bild nedan:
Det är mycket lätt, enda man behöver är photoshop, (detta funkar om man har en enfärgad bakgrund)
Istället för att skriva och förklara hur man gör, har jag gjort ett videoinlägg där jag visar steg för steg.

I slutet av videon går det lite snabbt, men man gör precis som innan i videon och klistrar in länken från bilden i kodmallen, exempel efter arkiv.

Viktigt också att man ändrar padding i stilmallen på #side {
Ändra till 0px; eller ta bort padding helt.

Kort beskrivning:

1. Print screena din blogg och lägg in i photoshop, finns en knapp på datorn, (prt sc)
2. Beskär sedan ut en bit av menyn, lika bred, viktigt man inte zomar in eller ut när man gör detta.
3. Gör hela bakgrunden enfärgad, samma som din bloggs bakgrund
4. Gör sedan själva bilden, gör en vit "båge" och beskär ut och spara.
5. Ladda upp på din blogg och klistra in i kodmallen där du vill ha den, exempel över Arkiv
6. Gör nu en till bild detta ser man i videoinlägget hur man gör, bara att "vända på den" och spara.
7. Gör samma sak och ladda upp och lägg in den, exempel under Arkiv 

Glöm inte att lägga till "> i slutet och <img src=" i början exempel: <img src="LÄNK FRÅN BILD">

Har ni frågor är det bara att skriva.

1. När man skapat sin header laddar man upp den på sin blogg, och kopierar länken till bilden.

2. Klicka på kodmallen, kopiera denna koden: (OBS LÄGG IN KODEN PÅ ALLA SIDOR, INLÄGGSSIDAN ETC)

<div id="side1">

<img src="LÄNK FRÅN BILD HÄR">

</div>

3. Lägg in koden under </head>

Nu skrev jag in "side1" det är siffran på varje "side" som visar vilken som är vilken när man ska exempel flytta headern, allt detta gör man i stilmallen.

4. Klicka på stilmallen, kopiera denna koden:

#side1 {
position: absolute;
left: 100px;
top: 10px;
width: 538px;
display: inline;
background:#ffffff;
border: 1px solid #cccccc;
}

#side {
position: absolute;
left: 40px;
top: 40px;
width: 180px;
display: inline;
background:#ffffff;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
border: 1px solid #cccccc;
}

(Lägg in koden här)