Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse
Visa/Dölj-meny

Visa/Dölj-meny

Nu så ska jag berätta hur man kan göra en riktigt cool meny. Här hittar ni ett exempel: http://ddbstrangerz.blogg.se

Okej, först av allt så vill jag att ni ska kopiera in jQuery koden för att meny-funktionen ska fungera.


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery.fn.initMenu = function() {
 return this.each(function(){
 var theMenu = $(this).get(0);
 $('.acitem', this).hide();
 $('li.expand > .acitem', this).show();
 $('li.expand > .acitem', this).prev().addClass('active');
 $('li a', this).click(
 function(e) {
 e.stopImmediatePropagation();
 var theElement = $(this).next();
 var parent = this.parentNode.parentNode;
 if($(parent).hasClass('noaccordion')) {
 if(theElement[0] === undefined) {
 window.location.href = this.href;
 }
 $(theElement).slideToggle('normal', function() {
 if ($(this).is(':visible')) {
 $(this).prev().addClass('active');
 }
 else {
 $(this).prev().removeClass('active');
 }
 });
 return false;
 }
 else {
 if(theElement.hasClass('acitem') && theElement.is(':visible')) {
 if($(parent).hasClass('collapsible')) {
 $('.acitem:visible', parent).first().slideUp('normal',
 function() {
 $(this).prev().removeClass('active');
 }
 );
 return false;
 }
 return false;
 }
 if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
 $('.acitem:visible', parent).first().slideUp('normal', function() {
 $(this).prev().removeClass('active');
 });
 theElement.slideDown('normal', function() {
 $(this).prev().addClass('active');
 });
 return false;
 }
 }
 }
 );
});
};

$(document).ready(function() {$('.menu').initMenu();});
</script>

Här ska ni klistra in den:

 

Nu kommer den svåra delen. Ni ska nämligen ersätta HELA eran ”side”. Detta kan bli lite svårt. Men vi kör ändå!

Här är koden för ”side”:


<div id="side">

<div id="profile">
 <tag:profile>
 <tag:if test="${ProfileExists == 'true'}">
 <a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><img class="thumbnail" src="${AppUrl}shared/img/profiles/${ProfileImage}" alt="Min profilbild" /></a>
 </tag:if>
 </tag:profile>
 </div>

<div class="nav">
 <form action="${AppUrl}index.bd?fa=search.do" name="search" method="post" id="sok">
 <input type="hidden" name="bl_id" value="${BlogID}" />
 <input type="text" name="criteria" value="" size="12" maxlength="64" />
 <input type="submit" value="Sök" />
 </form>

<ul class="menu">

<li id="sidelist">
<a href="#recent"><div class="navheader">Senaste inläggen</div></a>
 <ul class="acitem">
 <tag:recentlist limit="20">
 <li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
 </tag:recentlist>
 </ul>
</li>

<li id="sidelist">
 <a href="#categories"><div class="navheader">Kategorier</div></a>
 <ul class="acitem">
 <tag:categorylist>
 <li><a href="${CategoryLink}">${CategoryName}</a></li>
 </tag:categorylist>
 </ul>
</li>

<li id="sidelist">
 <a href="#"><div class="navheader">Arkiv</div></a>
 <ul class="acitem">
 <tag:archivelist>
 <li><a href="${ArchiveLink}">${ArchiveName}</a></li>
 </tag:archivelist>
 </ul>
</li>

<li id="sidelist">
 <tag:if test="${hasLinks == 'true'}">
 <a href="#links"><div class="navheader">Länkar</div></a>
 <ul class="acitem">
 <tag:linklist>
 <li><a href="${LinkURL}" title="${LinkDescription}">${LinkName}</a></li>
 </tag:linklist>
 </ul>
</li>

</ul>

</tag:if>
 <tag:if test="${hasBooks == 'true'}">
 <div class="navheader">Böcker</div>
 <ul>
 <tag:booklist>
 <li><a href="${BookUrl}"><img class="thumbnail" src="${BookImageSmall}" border="0" alt="${BookTitle}" title="${BookTitle}" /></a><br /><a href="${BookUrl}">${BookTitle}</a></li>
 </tag:booklist>
 </ul>
 </tag:if>
 <tag:if test="${hasMusic == 'true'}">
 <div class="navheader">Musik</div>
 <ul>
 <tag:musiclist>
 <li><a href="${MusicUrl}"><img class="thumbnail" src="${MusicImageSmall}" border="0" alt="${MusicTitle}" title="${MusicTitle}" /></a><br /><a href="${MusicUrl}">${MusicTitle}</a></li>
 </tag:musiclist>
 </ul>
 </tag:if>
 <tag:if test="${hasMovies == 'true'}">
 <div class="navheader">Filmer</div>
 <ul>
 <tag:movielist>
 <li><a href="${MovieUrl}"><img class="thumbnail" src="${MovieImageSmall}" border="0" alt="${MovieTitle}" title="${MovieTitle}" /></a><br /><a href="${MovieUrl}">${MovieTitle}</a></li>
 </tag:movielist>
 </ul>
 </tag:if>
 </div>

 </div>
</div>

 

Lägg märke till att jag lämnar kvar en </div> längst ner. Gör detsamma. Ni ska bara ersätta 2 stycken </div>! INTE den sista som inte är markerad på bilden.

Okej, let’s continue.

Nu till CSS koden. Den är väldigt simpel. Det enda ni behöver göra här är att klistra in denna kod i slutet av eran CSS mall:


#side {
color:#fff;
right:0;
color:#000;
font-size:14px;
}

#side li {
list-style:none;
}

#side ul {
list-style:none;
}

#sidelist {
width:20em;
background:#fff;
margin-top:10px;
margin-bottom:10px;
border-bottom-left-radius:20px;
-moz-border-bottom-left-radius:20px;
-webkit-border-bottom-left-radius:20px;
border-top-left-radius:20px;
-moz-border-top-left-radius:20px;
-webkit-border-top-left-radius:20px;
}

#sok {
margin-bottom:15px;
background:#fff;
border:1px solid #000;
border-right:none;
}

ul.menu, ul.menu ul {
 list-style-type:none;
 margin: 0;
 padding: 0;
 width: 20em;
}

ul.menu a {
 display: block;
 text-decoration: none;
}

ul.menu li {
 margin-top: 1px;
}

ul.menu li a, ul.menu ul.menu li a {
 background: #3cf; /*Färgen för "Senaste inlägg", "Kategorier", osv (innan man hovrar).*/
 color: #fff;
 padding: 0.5em;
 font-weight:900;
}

ul.menu li a:hover, ul.menu ul.menu li a:hover {
 background: #398235; /*Färgen när man hovrar*/
}

ul.menu li ul li a, ul.menu ul.menu li ul li a {
 background: #3cf; /*Det här är färgen för länkarna inne i kategorierna innan man hovrar dem.*/
 color: #000;
 font-weight:500;
}

ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
 background: #3c0; /*När man hovrar länkarna inne i kategorierna.*/
 border-left: 5px #000 solid;
}
ul.menu ul.menu li a:hover {
 border-left: 0;
}
ul.menu ul.menu {
 border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
 text-decoration: none;
 background: #398235;
}
div.panel {
 border: 1px #000 solid;
 padding: 5px;
 margin-top: 1px;
}

ul.menu div.panel a, ul.menu div.panel li a:hover {
 display :inline;
 color: #fff;
 background: none;
 margin: 0;
 padding: 0;
 border: none;
 font-weight: bold;
}
ul.menu div.panel a:hover {
 color: #000;
 text-decoration: underline;
}

Jag har kommenterat de rader som man kan ändra på för att få till sina egna färger på den.

En liten grej som kan vara viktigt att veta är att ifall ni vill ändra på textens färg (där det står ”Senaste inlägg” osv) så letar ni upp denna lilla kodsnutt i eran CSS-mall och ändrar på ”color:;”!


h1,h3,h4,h5,h6, div.navheader, div.default {
 font-family: 'Times New Roman', Georgia, Serif;
 color: #fff;
}

Det borde vara allt.

Om det inte fungerar, har frågor eller andra funderingar över detta så skriv en kommentar nedan! 🙂

Skribent och ansvarig för DDB. Driver Designa din blogg sedan juni 2015. Har bland annat studerat webbdesign, marknadsföring och online strategier både i Sverige och USA. Jobbar inom IT.

Läs mina andra inlägg

Lämna ett svar

Din e-postadress kommer inte publiceras.