Hur skapar man en Drop-Downmeny med länkar som går till andra sidor. Är det något som enbart har med javascript och göra??
Dropdown
3 svar · 318 visningar · startad av rikard81
Menar du liknande denna ?
Eller menar du en select-lista?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
dl, dt, dd, ul, li {margin:0;padding:0;list-style-type:none;}
dt {height:22px;border-top:1px solid white;border-bottom:1px solid black;font-size:12pt;}
li {border:1px solid black}
#menu {position:absolute;top:70px;left:844px; width:150px;border:1px solid;background-color:lightgreen;}
#menu dt {cursor:pointer;margin:0;font-weight:bold;color:blue;}
#menu li a, #menu dt a {height:20px;border:none;font-weight:normal;text-decoration:none;display:block;color:black}
#menu li a:hover, #menu dt a:hover {width:100%; background:white;text-decoration:none;}
#lu1 {background-color:#FFCC00;padding:1px}
#lu2 {background-color:#FF9999;padding:1px}
#lu3 {background-color:#CCCCCC;padding:1px}
#lu4 {background-color:#CCCC00;padding:1px}
#lu5 {background-color:#CCCCFF;padding:1px}
#lu6 {background-color:#FFCC99;padding:1px}
#lu7 {background-color:#CCCC99;padding:1px}
#lu8 {background-color:#FFCC66;padding:1px}
</style>
<script type/text/=javascript>
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=12; i++)
{if (document.getElementById('smenu'+i))
{document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
</head>
<body>
<dl id="menu"><dt onmouseover="javascript:show('0');"> LÄNKAR NEDAN</dt>
<dt onclick="javascript:show('smenu1');"> Roslagen, Norrtälje</dt>
<dd id="smenu1"><ul id="lu1">
<li><a href=http://www.campus-roslagen.se/>Campus Roslagen</a></li>
<li><a href=http://www.roslagen.com>Roslagen.com</a></li>
<li><a href=http://www.roslagen.se>Roslagen.se</a></li>
<li><a href=http://www.historia.su.se/urbanhistory/cybcity/stad/norrtalje/historia.htm>Norrtäljes historia</a></li>
<li><a href=http://web.telia.com/~u17502258/roslagen.html>Roslagens historia</a></li>
<li><a href=http://www.norrtalje.se>Norrtälje kommun</a></li>
<li><a href=http://www.norrtelje-energi.se>Norrtälje Energi</a></li>
<li><a href=http://www.norrteljetidning.se>Norrtälje Tidning</a></li>
<li><a href=http://www.osteraker.se/roslagsleden>Roslagsleden</a></li>
<li><a href=http://www.skargardsleden.com>Skärgårdsleden</a></li>
</ul></dd>
<dt onclick="javascript:show('smenu2');"> Sport och Fritid</dt>
<dd id="smenu2"><ul id="lu2">
<li><a href=http://www.norrtaljesportcentrum.se>Sport-Centrum</a></li>
<li><a href=http://www.ntc.nu/ntcweb/go.php>Norrtälje Träningcenter</a></li>
<li><a href=http://www.friskis.nu>Friskis och Svettis</a></li>
<li><a href=http://nebk.port5.com>Biljard-klubben</a></li>
<li><a href=http://www.norrtaljebowling.nu>Bowling-klubben</a></li>
<li><a href=http://www.svenskidrott.se/Organisation.asp?orgelementid=3529>Bkv Norrtälje </a></li>
<li><a href=http://www.norrtaljeik.com>Norrtälje Hockey</a></li>
<li><a href=http://web.telia.com/~u17602665>Korpen Norrtälje</a></li>
</ul></dd>
<dt onclick="javascript:show('smenu3');"> Foto, Musik, Konst</dt>
<dd id="smenu3"><ul id=lu3>
<li><a href=http://www.norrtaljefotoklubb.se>Foto-klubben</a></li>
<li><a href=http://www.roslagen.com/penseldraget>Pensel-draget</a></li>
<li><a href=konst.htm>Konstutställning</a></li>
<li><a href=http://www.norrtaljeblues.se>Blues-sällskapet</a></li>
<li><a href=http://www.norrteljejazzclub.se>Jazz-klubben</a></li>
</ul></dd>
<dt onclick="javascript:show('smenu4');"> Öar i Roslagen</dt>
<dd id="smenu4"><ul id=lu4>
<li><a href=http://www2.arholma.nu/algonet/algonet2/index.html>Arholma</a></li>
<li><a href=http://www.blidobygden.nu>Blidö</a></li>
<li><a href=http://www.fejan.se>Fejan</a></li>
<li><a href=http://www.osteraker.se/ljustero/ljustero.html>Ljusterö</a></li>
<li><a href=http://www.norrora.nu/Ramar/startramen.html>Norröra</a></li>
<li><a href=http://www.rodlogaboden.se/start.html>Rödlöga</a></li>
<li><a href=http://www.skargardsstiftelsen.se/?tid=areas&areaid=921>Svenska högarna</a></li>
<li><a href=http://www.soderarm.com>Söderarm</a></li>
<li><a href=http://www.tjockoallehanda.se>Tjockö</a></li>
</ul></dd>
<dt onclick="javascript:show('smenu5');"> Gott och Blandat</dt>
<dd id="smenu5"><ul id=lu5>
<li><a href=http://www.norrteljebrenneri.se/start.htm>Norrtälje Bränneri</a></li>
<li><a href=http://www.vaddogardsmejeri.se>Väddö Gårdsmejeri</a></li>
<li><a href=http://www.bergstugan.net>Bergsstugan</a></li>
<li><a href=http://www.ssnorrtelje.se/meny.html>S/S Norrtelje</a></li>
<li><a href=http://www.norrmalma.se>Norr Malma Gård</a></li>
<li><a href=http://www.hagstagard.se>Hagsta Gård</a></li>
<li><a href=http://www.erikskulle.se>Eriks Kulle</a></li>
<li><a href=http://www.storholmen.org>Vikingabyn</a></li>
</ul></dd>
<dt onclick="javascript:show('smenu6');"> Stora och Små båtar</dt>
<dd id="smenu6"><ul id=lu6>
<li><a href=http://www.eckerolinjen.fi/sv/default.asp>Eckerölinjen</a></li>
<li><a href=http://www.vikingline.aland.fi/braattveta/hamninformation/hamninformation/kapellskar.asp>Viking Line</a></li>
<li><a href=http://www.n-ss.nu>Norrtälje Segelsällskap</a></li>
<li><a href=http://www.blidosundsbolaget.se/>Blidösund</a></li>
<li><a href=http://www.anderswahlstrom.net/postrodd/index.htm>Postrodden</a></li>
<li><a href=http://home.swipnet.se/gojac/FVB/nytt/viksbaten.html>Viksbåten</a></li>
</ul></dd>
<dt onclick="javascript:show('smenu7');"> Roslagens fyrar</dt>
<dd id="smenu7"><ul id=lu7>
<li><a href=http://www.anderswahlstrom.net/svartklubben2/index.htm>Svartklubbens fyr</a></li>
<li><a href=http://www.anderswahlstrom.net/understen/index.htm>Understens fyr</a></li>
<li><a href=http://www.anderswahlstrom.net/fyrar/orskar.htm>Örskärs fyr</a></li>
<li><a href=http://www.anderswahlstrom.net/fyrar/index.htm>Övriga fyrar</a></li>
</ul></dd>
<dt onclick="javascript:show('smenu8');"> Övrigt Norrtälje</dt>
<dd id="smenu8"><ul id=lu8>
<li><a href=http://www.rurik.nu>Rurik, Skoldatanätet</a></li>
<li><a href=http://www.lv3.se/mus/index.html>LV 3 Museet </a></li>
<li><a href=http://www.roslagsbo.se>Roslagsbostäder</a></li>
<li><a href=http://www.roslagsmuseet.se>Roslagsmuseet</a></li>
<li><a href=http://www.pythagorasmuseum.se>Pythagoras</a></li>
<li><a href=http://www.folketshusnorrtalje.nu/>Folkets hus</a></li>
<li><a href=http://www.vaddo.fhsk.se/>Väddö folkhögskola</a></li>
</ul></dd>
<dt><a href=http://norrtalje.web.surftown.se> Till min sida här</a></dt>
</ul>
<dt onmouseover="javascript:show('0');"> Stäng alla</dt>
</dl>
</body>
</html>
Nej. Menar mer en vanlig dropdown. Select ja.
<html>
<head>
<script type="text/javascript">
function handleSelect(th){
url=th.options[th.selectedIndex].value;
if (url.length) window.open(url, "_top");
}
</script>
</head>
<body >
<select onchange="handleSelect(this);">
<option>-- Välj ett Alternativ --</option>
<option value="http://www.google.se";>Google</option>
<option value="http://www.yahoo.se";>Yahoo</option>
<option value="http://www.svt.se";>Svt</option>
</select>
</body>
</html>
Vill du att det ska öppnas i ett nytt fönster så ändra bara _top till _blank