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

25 comments

  1. SvaraMichelin

    Hej,
    vad är det som är så coolt?
    Jag har kollat länken men jag hittar ingenting där som är coolt..
    eller är det något fel?
    /Michelin

    1. SvaraFelix

      Har du Javascript inaktiverat, kanske? Det är en side där som går att klicka på. Ser du den inte? 😛

    1. SvaraFelix

      Du kan klicka på bilderna. Då kommer du till den på ett annat ställe. Klicka sedan på den igen så får du större storlek på bilderna. 🙂

  2. SvaraL I N N E A

    Hej, jag driver en blogg om lite allt möjligt men vi är ganska många som försöker hålla bloggen uppe, därför har jag många kategorier för varje person som har skrivit. Men om det är 2 som är med i samma inlägg hur kan jag göra så att inlägget är med i 2 kategorier? Du vet som dem har på gossips.se?

    Tack i förhand

  3. SvaraElin

    Hejj! Han har ju en meny precis under headern! Hur får man så? Har länge undrat men aldrig hittat svar!
    Tacksam för svar!

    1. SvaraFelix

      Du menar att jag har det. Det är inte så svårt. Kan göra ett blogginlägg om det inom snar framtid. 🙂

  4. SvaraAktiepojken

    Tjena Felix!

    En snabb fråga om angående din coola side. Kan man på något sätt göra att flikarna “stängs” igen om man dubbelklickar på dom? Just nu stängs fliken bara om man trycker på en annan flik.

    Tack på förhand
    Mvh
    AP

      1. Aktiepojken

        Låter suveränt!:) Annars en mycket bra blogg och hoppas dina arbeten går bra! Hoppas på ett svar inom en snar framtid då jag tycker detta var ett mycket bra inlägg!

        En annan fråga som ploppade upp i mitt huvud är om var man kan ändra typsnittet i flikarna så att säga, hoppas du förstår annars kan jag ta reda på det själv!:)

        Mvh
        AP

      2. Felix

        Det är samma som allt annat. Lägg in “font-family:dinfonthär;” i #sidelist. 🙂

  5. SvaraAktiepojken

    Det är klart det är så haha:) Tack så mycket! Om du har tid att kolla om man kan stänga flikarna genom att trycka på dom så är det väldigt snällt!

    Ha en bra dag!
    Mvh

  6. SvaraErika

    vad handlar detta om? vad är en side??

    jag har gått in p länken men fattar fortf inte vad en side är.

    1. SvaraFelix

      “Side” är det ofta bloggare kallar för deras “meny”. Det är där det står “Senaste Inlägg”, “Kategorier”, “Arkiv”, osv. 🙂

  7. SvaraFelicia Cahier

    Hej! Jag har försökt det här tusen gånger nu! Eller minst fyra! Men för mig fungerar det inte? Snälla. Snälla, kan du hjälpa mig! Du verkar vara jätte duktig och jag måste ha hjälp nu! Jag är desperat! För jag vill ha en grym header. Och du verkar vara grym på att göra dom! 🙂

    Min Mail: feliciacahierbieber@hotmail.com

    Jag är desperat!!! Jag har prövat allt!!!

  8. SvaraSusanna

    Hej!

    Jag fixade det här och det blev hur stilrent som helst, tack för tipset!

    Dock har jag upptäckt en sak. När jag klickar på t.ex MAJ 2012 så ska ju alla inlägg för den månad komma upp. Det gör det inte! Istället kommer kanske 10 inlägg upp och knappen för “tidigare inlägg” finns inte heller. Länken stämmer (http://sussva.blogg.se/2012/may/).

    Någon idé?

    Tack på förhand.

    Susanna

  9. SvaraMaja Söderberg

    Hallå!

    Riktigt bra side och jag har nu använt mig av koderna och det blev hur bra som helst! Dock skulle jag också vilja veta hur man “stänger” dom igen. Att de ska gå tillbaka om man klickar på dom igen!

    Tacksam för svar så fort som möjligt och denna blogg är bland det bästa som finns! 🙂

    / Maja Söderberg

  10. SvaraClara

    Hej, jag har ett problem jag har temat “fashion” på blogg.se och när jag skulle sätta in min header så blev den typ klämd eller något. Asså man ser bara en bit av headern fast inte hela.

    Blir jäkligt glad om du svarar asså! c:

  11. Svaralisa

    Hej! Har hittat denna på sannasrum som har funkat perfekt. Men nu har jag märkt att mitt innehåll när jag klickar på den hamnar bakom innehållet i “content”. Ni kan se här
    I startsidan av bloggen så funkar det, men när man är på kategori och arkiv sidorna hamnar det bakom. Har samma koder som på startsidan, har letat om det är något jag måste göra annorlunda men hittar inget…
    Vet ni vad problemet är?

  12. Svaravon Ahn ♥

    Plötsligt har det dykt upp punkter (punklista) när man klickar
    på “SENASTE INLÄGGEN” i min “visa dölj meny” i menyn, runda punkter
    framför en ikon och varje inlägg.
    Hur får jag bort dessa punkter framför varje inläggstext? Detta
    enbart på startsidan där denna “visa dölj meny” finns, övriga sidor har
    den inte.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *