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>

<ul>

<li><a href="länk"> Landskap </a> </li>
<li><a href="länk"> Djur </a> </li>
<li><a href="länk"> Människor</a> </li>

</ul>   
</li>

När du skapat en kategori "Landskap" och gjort ett inlägg, klickar du på
landskap, kopierar länken och klistrar in där det står länk.

Mer förklaring finns i detta inlägget [Länk]

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:

<ul id="navbar"> <li><a href="#" mce_href="#"> Senaste inläggen </a> <ul> <tag:recentlist limit="10"> <li><a href="${EntryPermaLink}" mce_href="/922173/entries/article/73622744/ ${EntryPermaLink}">${EntryTitle}</a></li> </tag:recentlist> </ul> </li> <li> <a href="#" mce_href="#"> Kategorier </a> <ul> <tag:categorylist> <li> <a href="${CategoryLink}" mce_href="/922173/entries/article/73622744/ ${CategoryLink}">${CategoryName}</a> </li> </tag:categorylist> </ul> </li> <li><a href="#" mce_href="#"> Arkiv </a> <ul> <tag:archivelist> <li><a href="${ArchiveLink}" mce_href="/922173/entries/article/73622744/${ArchiveLink}">${ArchiveName} </a></li> </tag:archivelist> </ul> </li> <li><a href="#" mce_href="#"> Länkar </a> <ul> <tag:linklist> <li><a href="${LinkURL}" mce_href="/922173/entries/article/73622744/${LinkURL}" title="${LinkDescription}">${LinkName}</a></li> </tag:linklist> </ul> </li> </ul>


4. Klistra in koden direkt efter denna koden:



5. Kopiera denna koden och lägg längst ner i din stilmall:
#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*/

Spara och så var det klart.

För att ändra färg på menyn gör du det i koden du klistra in i stilmallen.

För att ta bort det genomskinliga i menyn, ta bort denna koden i stilmallen:

/* opacitet for IE */
filter:alpha(opacity=70);
/* opacity: 0.70; filter: alpha(opacity=70); */
/* opacitet CSS3 standard */
opacity:0.70;
/* opacitet for Mozilla */
-moz-opacity:0.70;

Om du vill ha headern över eller under menyn, flyttar du koden till headern
över eller under koden du klistra in i kodmallen.

<img src="LÄNK TILL DIN HEADER">

Håller på för fullt och bygger på ännu en sida.

På sidan kommer jag även länka till de som gör bloggdesigner och ni som bloggar om bloggdesign.

Allt för att tipsa om varandra och synas utåt, alla vinner på det.

 

Alla som är intresserade, skriv upp er i detta inlägget och sidlänk så kollar jag detta senare.

 

Börja redan nu följa med bloglovin

 

Klicka på kodmallen

Bläddra ner till side och lägg till den fetstilta koden:
<div id="side">

<div id="profile">
<tag:profile>
<tag:if test="${ProfileExists == 'true'}">
<h4>Om</h4>
<a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><img src="${AppUrl}shared/img/profiles/${ProfileImage}" alt="Min profilbild" /></a>
<p><a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><span style="font-weight:bold"> ${ProfileName}</span></a></p>
</tag:if>
</tag:profile>
</div>

Ladda först upp en bild och lägg in i menyn, se detta inlägget: Lägg in egen bild i menyn

Klicka nu in i kodmallen där du lagt in in din kod under side

Ändra så koden ser ut så här:

<a href="LÄNK TILL SIDA">
<img src="LÄNK FRÅN DIN BILD"> </a>

Klicka på kodmallen

Bläddra ner till denna koden:

Lägg in denna koden: <img src="LÄNK FRÅN DIN BILD">



Lägg in koden någonstans mellan:

<div id="side"> och </div>

vill man ha ett mellanrum mellan bild och text, lägg till denna koden: <br><br>

Ändra färg på bakgrunden i menyn, till exempel grå som på bilden nedan:

Klicka på stilmallen


Bläddra ner till denna koden:

Lägg till denna koden: background:#cccccc;

Klistra in sedan, se exempel nedan:



Ändra nu till den färg du vill ha, kolla efter olika färg koder via google.se

Klicka på stilmallen

Bläddra ner till denna koden:

Lägg till denna koden: background:url(LÄNK FRÅN BILD);



Förhandsgranska och spara.

Hur man laddar upp en bild, kan man läsa om i detta inlägget: Hur man laddar upp bild

Kopiera länken i sökfältet till bilden och klistra in i stilmallen

Bläddra ner body, till denna koden (ser inte likadant ut i alla stilmallar):

body {
background:url(Länken till bilden här);

Om det inte funkar, prova att ta bort det andra som står i din kod så den ser ut som över.
Förhandsgranska alltid och sedan spara!

Nu hålls det på för fullt med ännu en sida, en sida som även kommer vara kopplad till denna sidan, men även till andra sidor, där kommer också finnas länkar till de som designar bloggar, tips och annat kul.
Mer info om sidan kommer senare.

Vad tycker ni om iden? Sidan är ännu inte klar så kom gärna med förslag vad ni vill se på sidan.

1. Skriv att du är med i detta inlägget
2. Lägg till sidan på bloglovin
3. Ett plus om du gillar sidan på Facebook
Klart!

---