Alternativ meny #2 - slidedown.

2012-02-04 | designtips
I går berättade jag hur man lägger in en dropdown meny på sin blogg - idag ska jag berätta hur man lägger in en annan slags meny. Nämligen en slidedown meny.

Till den här guiden kommer jag att använda mig av den här gratisdesignen - men ni kan naturligtvis använda er av eran egen design eller någon annan gratisdesign om ni hellre vill det.

Börja med att logga in på din blogg & klicka dig vidare till Stilmallen. Kopiera koden här nedanför och klistra in den längst ner i stilmallen. (obs. på grund av högerklicksskyddet måste du kopiera med ctrl + c)

ul#drawers {width: 100px; list-style: none; margin: 0 auto; padding: 0px; border-top: 0px; color: #000;}
ul#drawers a {text-decoration: none; color: #000;}
ul#drawers li h4 {margin: 0; padding: 1px; text-transform: Camelcase; font-size: 10px; text-align: center; background-color: #363835; background: rgba(255, 255, 255, 0.0); -webkit-transition: background-color 0.5s ease-out; -moz-transition: background-color 0.5s ease-out;
transition: background-color 0.5s ease-out;}
h4.small {display: table-cell; width: 100px; margin: 0px; height: 100%;}
li.drawer h4.open {background-color: #121213; border-top: 0px;}
li.drawer div {padding: 2px; margin: 0px; line-height: 12px; background-color: #363835; background: rgba(255, 255, 255, 0.0);}
li.drawer div li {list-style-type: disc;}
li.drawer div ul {-webkit-padding-start: 12px;}


Klicka dig vidare in i kodmallen & leta upp </head>. Kopiera koden här nedanför & klistra in den precis ovanför </head> taggen.

<script src="http://static.tumblr.com/me5sfsd/1YFl414t0/jquery142.js";></script>
<script type="text/javascript">
$(document).ready(function () {
$('li.drawer div:nth-child(2)').hide();
$('li.drawer h4').click(function () {
if ($(this).hasClass('open')) {
$('li.drawer div:visible:nth-child(2)').slideUp().prev().removeClass('open');}
else {
$('li.drawer div:visible:nth-child(2)').slideUp().prev().removeClass('open');
$(this).next().slideDown();
$(this).addClass('open');}
});
});
</script>

Leta nu upp <div id="side"> & <div class="nav"> & kopiera koden här nedanför & klistra in den precis under.

<ul id="drawers">
<li id="info">
<h4>Menyheader</h4>
<div align="left">
<p>
<a href="http://dinadress.blogg.se">Länk namn</a>
<p>
<a href="http://dinadress.blogg.se">Länk namn</a>
</p>
</div>
</li>
</ul>
<ul id="drawers">
<li class="drawer" id="info">
<h4>Menyheader</h4>
<div align="left">
<p>
<a href="http://dinadress.blogg.se">Länk namn</a>
<p>
<a href="http://dinadress.blogg.se">Länk namn</a>
</p>
</div>
</li>
</ul>

Kolla så att menyn funkar. När du har gjort det är det dags att konfigurera menyn. Ta bort & ersätt Menyheader mot din egen menyheader. Tex. Arkiv / Kategorier / Länkar osv. Ta bort & ersätt adresserna med dina egna adresser samt Länk namn mot ditt eget länk namn. Ett exempel: 

<ul id="drawers">
<li class="drawer" id="info">
<h4>Arkiv</h4>
<div align="left">
<p>
<a href="http://minadress.blogg.se/2012/january/">Januari</a>
<p>
<a href="http://minadress.blogg.se/2012/february/">Februari</a>
</p>
</div>
</li>
</ul>

För att lägga in fler länkar använder du dig av denna koden:

<p>
<a href="http://dinadress.blogg.se">Länk namn</a>

& den lägger du in precis innan </p>

Lycka till!

Att tänka på innan du kommenterar


Allmänt
Din kommentar granskas innan den publiceras.
Kom ihåg att ditt ip - nummer loggas.
Har du ingen blogg så svarar jag här.

Design
Jag svarar inte på frågor om hur jag gör mina designer.
Övriga designfrågor skickas till min mejl.
Jag tar emot beställningar av designer. Kontakta mig för mer info.

Jag vill inte ha
Kommentarer om någon gratissida.
Reklam för din blogg, tävlingar, frågestunder osv.

Publiceras inte
Kommentarer som innehåller personligt påhopp. Kommentarer som innehåller något stötande.
Kommentarer som innehåller något rasistiskt.



Xx Nathalie






Namn, Mail, Blogg,