Jump to content
Just nu i M3-nätverket

Dropdowns


Hazzo

Recommended Posts

Hej

 

Problem igen, nästan bara då jag skriver. Denna gång så skulle jag vilja göra en egen design på några dropdowns som jag lyckats "knacka" in koden på. Undrar om någon har ett bra tips på hur detta smidigats kan göras eller om någon vet en bra länk, har typ googlat i två dagar nu utan att bli nöjd??

 

Tacksam för alla tips

 

Hazzo

Link to comment
Share on other sites

Du använder lager, som du lägger på plats och sedan gömmer med "display:none". Sedan har du ett javascript som visar det när du klickar eller har musen över huvudklänken. Viktigt här är id, som måste vara unikt.

 

<div id="ettidnamn" style="display:none">

<a href="link.html">Länk1</a>

<a href="link2.html">Länk2</a>

</div>

 

Huvudlänk:

<a href="#" onmouseover="document.getElementById('ettidnamn').style.display='block'">Visa dropdown</a>

Link to comment
Share on other sites

Ok har fått till dropdownen, men får f_n inte in någon bild. Vill ha en knapp, gjord i photoshop, hela tiden på själva "föräldern" kallad collaborations. Sen när man drar över denna vill jag ytterligare få till en bild med en massa länkar, se nedan.

Nån som kan ha ett konkret tips eller vad som för att hjälpa med detta dilemma....

 

<ul id="nav">

<li><b>Collaborations</b>

<ul>

<li><a href="http://www.chem.umu.se/dep/orgchem/forskning/bioorganic/kihlberg.stm">Jan Kihlberg</a></li>

<li><a href="http://www.microbiology.wustl.edu/dept/fac/hultgren/index.html">Scott J. Hultgren</a></li>

<li><a href="http://dbbs.wustl.edu/dbbs/website.nsf/rib/MarshallG">Garland R. Marshall</a></li>

<li><a href="http://www.acadia-pharm.com">Dr. Roger Olsson</a></li>

<li><a href="http://www2.umu.se/medfak/institutioner/UCMP_eng.html">Anders Olofsson</a></li>

<li><a href="http://www.molbiol.umu.se/index.html">Bernt-Eric Uhlin</a></li>

<li><a href="http://www.molbiol.umu.se/index.html">Sun Nyunt Wai</a></li>

<li><a href="http://people.cryst.bbk.ac.uk/~ubcg54a/">Prof. Gabriel Waksman</a></li>

<li><a href="http://www.nbu.ac.in/">Prof. Basudeb Basu</a></li>

</ul>

</li>

</ul>

 

 

 

 

i Css

 

 

#nav {position: absolute;

top: 450px;

left: 400px;

}

#nav, #nav ul {

padding: 0;

margin: 0;

list-style: none;

}

#nav a { text-decoration: none;

display: block;

width: 10em;

}

#nav li {

float: left;

width: 10em;

}

#nav li ul {position: absolute;

width: 10em;

left: -999em;

}

#nav li:hover ul, #nav li.sfhover ul {left: auto;

 

}

sfHover = function() {

var sfEls = document.getElementById("nav").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls.onmouseover=function() {

this.className+=" sfhover";

}

sfEls.onmouseout=function() {

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

}

}

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

 

Tack

 

Hazzo

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...