Formatere snyde-selectmenu
Jeg har lavet en snydeselectmenu (hvis formål er at den skal være tilgængelig - derfor har jeg ikke brugt en form select), men jeg kan ikke rigtig få stylet den ordentligt. Den skal styles relativt, så den er hypertilgængelig.<script type="text/javascript">
<!-- Javascript fra www.webdesign101.dk
// modificeret af Lars Olesen, 18. december 2003
var ver3 = (navigator.appVersion.charAt(0) <= "3") ? true : false;
var dom = (document.getElementById) ? true : false;
var ie4 = (document.all && !document.getElementById) ? true : false;
var ns4 = (document.layers) ? true : false;
var ie5 = (document.all && document.getElementById) ? true : false;
var n6 = (document.getElementById && !document.all) ? true : false;
var msie = (document.all) ?true:false;
var ie6 = (navigator.appVersion.indexOf("MSIE 6") != -1) ? true : false;
// funktioner til at åbne eller lukke element
function findObjekt(objekt) {
var blok;
if (dom)
blok = document.getElementById(objekt).style;
else
if (ie4)
blok = document.all[objekt].style;
else
if (ns4)
blok = document.layers[objekt];
return blok;
}
function expand(objekt){
var blok = findObjekt(objekt);
blok.display="block"
}
function collapse(objekt){
var blok = findObjekt(objekt);
blok.display="none"
}
// vis eller skjul genvejsmenuen
menu1synlig=0; //menuen er skjult
function visMenu(objekt){
if (menu1synlig==1){
collapse(objekt);
menu1synlig=0;
return;
}
if (menu1synlig==0){
expand(objekt);
menu1synlig=1;
}
}
//-->
</script>
<div id="genvejbar">
<div>
<ul id="navlist">
<li><a href="#" onclick="return visMenu('subnavlist'); return false;"><div class="right">↓</div>Genvej...</a>
<ul id="subnavlist">
<li><a href="/dagbog/">Dagbog</a></li>
<li><a href="/fotoalbum/">Fotoalbum</a></li>
<li><a href="/dialog/faq.php">Spørgsmål og svar</a></li>
<li><a href="/dialog/elevchat.php">Elevchat</a></li>
<li><a href="/langekurser/">Lange kurser</a></li>
<li><a href="/langekurser/fagoversigt.php">Dine fag</a></li>
<li><a href="/kortekurser/">Korte kurser</a></li>
<li><a href="/dialog/kontakt.php">Kontakt</a></li>
</ul></li>
</ul>
</div>
Med følgende stylesheet:
#genvejbar {
font-weight: bold;
font-size: 0.8em;
width: 100%;
padding: 2px;
color: white;
background: #661E1F url(none);
}
div#genvejbar ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 12em;
border: solid 1px black;
}
div#genvejbar ul li {
margin: 0;
padding: 0;
color: black;
display: inline;
}
div#genvejbar ul li a {
display: block;
color: black;
background: white url(none);
text-decoration: none;
}
div#genvejbar ul#navlist div.right {
float:right;
display: inline;
background: #fff url(none);
color: black;
font-weight: bolder;
cursor:pointer;
cursor:hand;
}
div#genvejbar ul#subnavlist {
position: absolute;
z-index: 1;
display: none;
}
div#genvejbar ul#subnavlist li a:hover {
color: black;
background: #eee url(none);
}
Er der nogen der kan hjælpe. Listen kan ses i funktion på www.vih.dk
/lars
