Dropdowns

[Hazzo]

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

[pal8]

Menar du en sådan som längst ner på denna sida för att byta språk?

[Hazzo]

Nja

 

Mer som dessa rullgardinerna: http://www.htmldog.com/articles/suckerfish/example/

[pal8]

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>

[Hazzo]

Alright ska prova...

 

Tack

[pal8]

Varsågod. Det är rätt mkt man kan hitta på med CSS (stylesheets) och Javascript. Webdesignskolan kan nog vara en bra källa för kunskap:

 

http://www.webdesignskolan.se/

[Pekkason]

Drop-Down Menus

[Hazzo]

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