Hur du gör dropdown meny!
2012-01-22 @ 21:14:15Design/Photoshop/Pixlr-Tips&Guide
1. Leta upp "<div id="side">"
2. Ta bort koden:
<div>Senaste inläggen</div> <ul> <tag:recentlist limit="20"> <li><a href="${EntryPermaLink}">${EntryTitle}</a></li> </tag:recentlist> </ul> <div>Kategorier</div> <ul> <tag:categorylist> <li><a href="${CategoryLink}">${CategoryName}</a></li> </tag:categorylist> </ul> <div>Arkiv</div> <ul> <tag:archivelist> <li><a href="${ArchiveLink}">${ArchiveName}</a></li> </tag:archivelist> </ul> <tag:if test="${hasLinks == 'true'}"> <div>Länkar<a title=" " href="http://www.blogkeen.com/visit_blog.aspx?id=253658&f=true" target="_blank"><img alt=" " border="0" src="http://www.blogkeen.com/stats.aspx?id=253658&p=1&l=sv" width="120" height="51" /></a></div> <ul> <tag:linklist> <li><a href="${LinkURL}" title="${LinkDescription}">${LinkName}</a></li> </tag:linklist> </ul> </tag:if>
Men bara om du inte vill ha kvar Arkiv, Senaste inlägg mm på sidan också.
Själv har jag kvar den så man ser presentaionen och så.
3. Klistra in denna kod efter " <div id="header"<h1<ahref="${BlogUrl}" i kodmallen!!
.
>${Blog<h2>${BlogDescription}</h2> </div>"Title}</a></h1><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. Spara sedan kodmallen.
5. Sätt sedan in denna kod 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*/
6. Spara stilmallen, för att ändra färg, typsnitt mm ser du ganska lätt i koden ovanför hur du ändrar :)
-
Blir det problem kan ni bara kommentera!
