Avansert dropdown meny

Denne dropdown menyen er litt mer avansert i kodene enn de andre, koden er veldig lang. Dette er en dropdown meny slik at man må trykke på overskriften for at det under skal komme ned, som f.eks på annais sin blogg.

Design -> Rediger -> Maler, så trykker du Ctrl og F samtidig, og søker på <div id="profile" class="clearfix">

Under der, limer du denne koden:


<style>
#foldheader {
font-family: calibri;
font-size: 13px;
font-weight: normal;
padding-top: 3px;
padding-bottom: 3px;
width: 140px;
border: 1px solid #000000;
margin-top: 5px;
margin-bottom: 5px;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
</style>
<script language="JavaScript1.2">
<!--
var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"
var ns6=(document.getElementById&&!document.all||window.opera)
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}
if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(fold.gif)"
}
}
}
if (ie4||ns6)
document.onclick=checkcontained
//-->
</script>
<ul>
<li id="foldheader"><h3>DIN TEKST HER</h3></li>
<ul id="foldinglist" style="display:none" style="&{head};">
<li><a href="DIN LINK">DIN TEKST</a></li>
<li> <a href="DIN LINK">DIN TEKST</a> </li>
<br></ul>
<br>
<ul>
<li id="foldheader"><h3>DIN TEKST</h3></li>
<ul id="foldinglist" style="display:none" style="&{head};">
DIN TEKST/DIN LINK</a></li>
<br>
</ul>
<br>
<ul>
<li id="foldheader"><h3>DIN TEKST</h3></li>
<ul id="foldinglist" style="display:none" style="&{head};">
<li> <a href="LINK">TEKST</a> </li>
<li> <a href="LINK">TEKST</a> </li>
<br></ul>
<br>
<ul>
<li id="foldheader"><h3>DIN TEKST</h3></li>
<ul id="foldinglist" style="display:none" style="&{head};">
<li> <a href="LINK">TEKST</a> </li>
<br></ul>
<br>
<ul>
<li id="foldheader"><h3>DIN TEKST</h3></li>
<ul id="foldinglist" style="display:none" style="&{head};">
<li> <a href="DIN LINK">DIN TEKST</a> </li>
<li> </li>
<li> </li>
<br></ul>
<script type="text/javascript" language="javascript">
function stopWrite()
{null;} /*malicious javascript is not allowed.*/ stopWrite;
</script>


Den teksten som er mellom <h3> og </h3> er overskriftene, og de under er det som kommer når du trykker på h3-teksten.

 

For å legge til flere linker, legger du til denne:

<li> <a href="DIN LINK">DIN TEKST</a> </li>  

 

For å legge til flere knapper:

<li id="foldheader"><h3>DIN TEKST</h3></li>
<ul id="foldinglist" style="display:none" style="&{head};">
 <li><a href="LINK">DIN TEKST</a></li>
<br>
</ul>
 

Om du lurer på noe, bare spør!

★Maline Feidal★

26.04.2011 kl.13:31
Bra :D

elisabeth - foto&video

03.07.2011 kl.19:31
fikk det til. Men hvordan kan man midtstille dem ?

de står litt for mye til høyre...

håper du svarer fortest mulig!

Marie Svardal

05.07.2011 kl.15:23
OH GOD, I LOVE YOU.

Lill-Marte Sætre Kleppe

08.07.2011 kl.20:13
marie svardal: hehe :D

Lill-Marte Sætre Kleppe

08.07.2011 kl.20:20
elisabeth: Jeg vet ikke egentlig... :S har ikke forska så mye på den..

Merenwen~

15.07.2011 kl.19:47
Er det samme type meny som du har? Altså sånn i sidemenyen på en måte?

Hvis ikke, hva heter slik som du har? :)

Lill-Marte Sætre Kleppe

15.07.2011 kl.20:34
Merenwen~: Den er ikke den jeg har, min heter organic tabs :)

ingvild

10.09.2011 kl.22:39
kan du legge ut kodene til hvordan man får slik organic tabs som du har :D?

Lill-Marte Sætre Kleppe

11.09.2011 kl.21:49
ingvild: Jeg har koden, og har tenkt å legge den ut mange ganger, men jo flere vanskelige koder jo flere spørsmål får jeg..

Sandra og Sunniva

28.10.2011 kl.16:26
Hva om du ikke har profile koden?

Lill-Marte Sætre Kleppe

28.10.2011 kl.16:30
Sandra og Sunniva: da kan du lime den over div h3 kategorier
når jeg legger inn koden synes ikke menyen :/

Lill-Marte Sætre Kleppe

30.11.2011 kl.02:47
RUTH ELISE: om du gjør det rett skal det virke :)

Camilla

20.12.2011 kl.19:05
får ikke til denne jeg heller. er det ingenting som skal inn i stilsettet?

Lill-Marte Sætre Kleppe

22.12.2011 kl.20:12
Camilla: les guiden bedre.

photolov3

17.01.2012 kl.18:08
Først og fremst, hehe kjempefint med guider, fikk opp menyen på testbloggen min, og så lagret jeg den, når jeg limer det inn på min egen vanlige blogg synes ikke menyen i det hele tatt! Har prøvd mye rart, håper du kansvare da :)

Lill-Marte Sætre Kleppe

17.01.2012 kl.19:12
photolov3: hmm, det var rart.. :S

jennylr

24.03.2012 kl.19:06
Veldig bra forklart! Men jeg lurer på om det går ann å fjerne rammen? Kan man lage sine egne knapper?

jennylr

24.03.2012 kl.19:09
Bra forklart! Jeg bare lurer på om det går ann å fjerne rammen? Kan man lage sine egne knapper?





leser bloggen nå!

Norske blogger Blogglisten








Pyntdeg.no



hits