Prøv med det her:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript"><!--
/*
The ultimate DHTML drop-down code
Nick Nettleton
www.computerarts.co.uk ||
www.fluid7.co.uk--
This must be the single most requested bit of code in the history of Computer Arts, so we've decided to make it user-friendly and adaptable for everyone. Stacks more goodies to come too - head to one of the above sites for regular infoa nd updates.
Works with v4 and v5 browsers - both IE and NS. Update for NS6 coming. Also, be aware there's no way to automatically centre layers in the window - a JS for this coming soon. In the meantime, stick with left-aligned.
Keep an eye out for update for NS6.
--
You can adapt, use and distribute this code under GNU public licence, as long as:
(1) You leave all the comment and credit lines in, including these ones
(2) You don't sell it for profit
--
If you want to tweak the code yourself, use the f7_droplayer to set the names of the dropdowns, and just call f7_showdrop(n) and f7_hdidedrop from onmouseover, onmouseout and other events. Swap n for the number of the layer as in the array.
--
Enjoy!!!
*/
//names of dropdowns stored here
f7_droplayer=new Array()
f7_droplayer[0]="drop1"
f7_droplayer[1]="drop2"
f7_droplayer[2]="drop3"
f7_droplayer[3]="drop4"
f7_droplayer[4]="drop5"
f7_droplayer[5]="drop6"
f7_droplayer[6]="drop7"
//simple browser check
f7_v4=(parseInt(navigator.appVersion)>=4 && parseInt(navigator.appVersion)<=5)?1:0
f7_ie=(document.all && f7_v4)?1:0
f7_ns=(document.layers && f7_v4)?1:0
//code for drops
function f7_showdrop(thelayer){
f7_keep=thelayer; f7_hideall(); f7_showitnow=1
f7_showit(thelayer)
}
function f7_showit(thelayer){
if(f7_ie){ eval(f7_droplayer[thelayer]+'.style.visibility="visible"') }
if(f7_ns){ eval('document.'+f7_droplayer[thelayer]+'.visibility="show"');}
}
function f7_hidedrop(){
f7_keep=-1; setTimeout('f7_hideall()',500)
}
f7_keep=-1
function f7_hideall(){
for(i=0;i<f7_droplayer.length;i++){
f7_hideit=0; f7_checkmousepos(i)
if(f7_ie && f7_keep!=i){
if(f7_hideit){ eval(f7_droplayer[i]+'.style.visibility="hidden"') }
}
if(f7_ns && f7_keep!=i){
if(f7_hideit){ eval('document.'+f7_droplayer[i]+'.visibility="hide"') }
}
}
}
//deal with cursor over layer
document.onmousemove = f7_getmousepos
if (f7_ns) document.captureEvents(Event.MOUSEMOVE)
function f7_getmousepos(e){
if(f7_ns){f7_mousex=e.pageX; f7_mousey=e.pageY}
if(f7_ie){f7_mousex=event.clientX; f7_mousey=event.clientY;}
}
function f7_checkmousepos(i){
if(f7_ns){
f7_x_min=eval('document.'+f7_droplayer[i]+'.left')
f7_x_max=f7_x_min+eval('document.'+f7_droplayer[i]+'.clip.width')
f7_y_min=eval('document.'+f7_droplayer[i]+'.top')
f7_y_max=f7_y_min+eval('document.'+f7_droplayer[i]+'.clip.height')
}
if(f7_ie){
f7_x_min=eval(f7_droplayer[i]+'.style.pixelLeft')
f7_x_max=f7_x_min+eval(f7_droplayer[i]+'.style.pixelWidth')
f7_y_min=eval(f7_droplayer[i]+'.style.pixelTop')
f7_y_max=f7_y_min+eval(f7_droplayer[i]+'.style.pixelHeight')
}
if (f7_mousex>=f7_x_min && f7_mousex<=f7_x_max && f7_mousey>=f7_y_min && f7_mousey<=f7_y_max){
f7_hideit=0; setTimeout('f7_hideall()',500)
}
else { f7_hideit=1 }
return f7_hideit
}
//--></script>
<script language="JavaScript"><!--
//browser stylesheets
if(f7_ie){
document.write('<style type="text/css"><!--')
document.write('.dropdown {padding-left:10px; padding-top:10px; padding-right:10px; padding-bottom:10px}')
document.write('p { margin-top:0px; margin-bottom:6px }')
document.write('a { text-decoration: none }')
document.write('a:hover { color: white; text-decoration: underline }')
document.write('--></style>')
}
//--></script>
<style type="text/css">
<!--
p { color: #fff; font-size: 9px; line-height: 17px; font-family: Verdana, Arial, Helvetica, sans-serif }
td { color: #f5f5f5; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif }
.header { color: #f5f5f5; font: bold 24px Arial, Verdana, Helvetica, sans-serif }
.subhead { color: #dcdcdc; font-weight: bold; font-size: 12px }
.list { color: #dcdcdc; font-size: 12px; font-family: Arial, Verdana, Helvetica, sans-serif; text-decoration: none }
.forms { color: #dcdcdc; font-size: 12px; font-family: Arial, Verdana, Helvetica, sans-serif }
.dropdown { color: #FFFFFF; background-color: #efefef; border: solid 1px #000000; position: absolute; z-index: 1; top: 110px; width: 140px; visibility: hidden; layer-background-color: #EFEFEF }
.drophead { color: #ffffff; font: 9px Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.dropitem { color: white; font: 12px Arial, Verdana, Helvetica, sans-serif; text-decoration: none }
.dropitem:visited { color: #a9a9a9; font: 12px Arial, Verdana, Helvetica, sans-serif; text-decoration: none }
.drophead:hover { color: #FFFFFF; text-decoration: none }
.dropitem:hover { color: #d3d3d3; font-style: normal; font-variant: normal; font-weight: bold }
.h1 { font-style: normal; font-weight: normal; font-size: 9px; line-height: 10px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none }
-->
</style>
</head>
<body bgcolor="#008000" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="68">
<td colspan="3" height="68">
<div align="right">
<img src="
http://demo080102sw3.synkron.com/graphics/casper/spacer.gif" alt="" height="40" width="80" usemap="#spacerccf3d5" border="0"></div>
</td>
<td rowspan="2" width="100%" height="98"></td>
</tr>
<tr height="30">
<td colspan="3" height="30">
<table width="657" border="0" cellspacing="0" cellpadding="0" height="30">
<tr align="center">
<td valign="middle" width="93"><a href="#" class="drophead" onmouseover="f7_showdrop(0)" onmouseout="f7_hidedrop()"><span class="drophead">PROFIL</span></a></td>
<td valign="middle" width="93"> <a href="#" class="drophead" onmouseover="f7_showdrop(1)" onmouseout="f7_hidedrop()"><span class="drophead">PRODUKTER</span></a></td>
<td valign="middle" width="93"><a href="#" class="drophead" onmouseover="f7_showdrop(2)" onmouseout="f7_hidedrop()"><span class="drophead">REFERENCER</span></a></td>
<td valign="middle" width="93"> <a href="#" class="drophead" onmouseover="f7_showdrop(3)" onmouseout="f7_hidedrop()"><span class="drophead">KVALITET</span></a></td>
<td valign="middle" width="93"><a href="#" class="drophead" onmouseover="f7_showdrop(4)" onmouseout="f7_hidedrop()"><span class="drophead">SEND JOB</span></a></td>
<td valign="middle" width="93"><a href="#" class="drophead" onMouseOver="f7_showdrop(5)" onMouseout="f7_hidedrop()"><span class="drophead">KONTAKT</span></a></td>
<td valign="middle" width="99"><a href="#" class="drophead" onMouseOver="f7_showdrop(6)" onMouseOut="f7_hidedrop()"><span class="drophead">NYHEDSBREV</span></a>
</td>
</tr>
</table>
</td>
</tr>
<tr height="169">
<td colspan="3" height="169"><map name="logo28a352"><area shape="rect" coords="620,25,647,36" alt=""><area shape="rect" coords="570,26,616,39" alt=""></map>
<div id="drop7" class="dropdown" style=" background-color: #213654; position: absolute; z-index: 1; top: 97px; left: 558px; width: 93px; visibility: hidden" onmouseover="f7_showdrop(6)" onmouseout="f7_hidedrop()">
<p>• <a href="sw234.asp" class="dropitem">Menu5</a><br>
• <a href="sw235.asp" class="dropitem">Menu6</p>
</div>
<div id="drop6" class="dropdown" style=" background-color: #213654; position: absolute; z-index: 1; top: 97px; left: 465px; width: 93px; visibility: hidden" onmouseover="f7_showdrop(5)" onmouseout="f7_hidedrop()">
<p>• <a href="sw234.asp" class="dropitem">Menu3</a><br>
• <a href="sw235.asp" class="dropitem">Menu4</p>
</div>
<div id="drop5" class="dropdown" style=" background-color: #213654; position: absolute; z-index: 1; top: 97px; left: 372px; width: 93px; visibility: hidden" onmouseover="f7_showdrop(4)" onmouseout="f7_hidedrop()">
<p>• <a href="sw234.asp" class="dropitem">Menu1</a><br>
• <a href="sw235.asp" class="dropitem">Menu2</p>
</div>
<div id="drop4" class="dropdown" style=" background-color: #213654; position: absolute; z-index: 1; top: 97px; left: 279px; width: 93px; visibility: hidden" onmouseover="f7_showdrop(3)" onmouseout="f7_hidedrop()">
<p>• <a href="sw234.asp" class="dropitem">Mærker</a><br>
• <a href="sw235.asp" class="dropitem">Miljø og<br>
<font color="#213654">• </font>Kvalitet</a><br></p>
</div>
<div id="drop3" class="dropdown" style=" background-color: #213654; position: absolute; z-index: 1; top: 97px; left: 186px; width: 93px; visibility: hidden" onmouseover="f7_showdrop(2)" onmouseout="f7_hidedrop()">
<p>• <a href="sw229.asp" class="dropitem">Cases</a><br>
• <a href="sw230.asp" class="dropitem">Brochure</a><br>
• <a href="sw231.asp" class="dropitem">Internet</a><br>
• <a href="sw232.asp" class="dropitem">Etiket</a><br>
• <a href="sw233.asp" class="dropitem">Udstilling</a></p>
</div>
<div id="drop2" class="dropdown" style=" background-color: #213654; position: absolute; z-index: 1; top: 97px; left: 93px; width: 93px; visibility: hidden" onmouseover="f7_showdrop(1)" onmouseout="f7_hidedrop()">
<p>• <a href="sw223.asp" class="dropitem">Offset tryk</a><br>
• <a href="sw224.asp" class="dropitem">Etiketter</a><br>
• <a href="sw225.asp" class="dropitem">Udstilling</a><br>
• <a href="sw226.asp" class="dropitem">Design<br>
</a>• <a href="sw227.asp" class="dropitem">Digital<br>
</a>• <a href="sw228.asp" class="dropitem">Internet</a></p>
</div>
<div id="drop1" class="dropdown" style=" background-color: #213654; position: absolute; z-index: 1; top: 97px; left: 0px; width: 93px; visibility: hidden" onmouseover="f7_showdrop(0)" onmouseout="f7_hidedrop()">
<p>• <a href="sw221.asp" class="dropitem">Hvor</a><br>
• <a href="sw222.asp" class="dropitem">Hvem er vi</a><br>
</p>
</div>
</td>
<td width="100%" height="169"></td>
</tr>
</table>
</body>
</html>
Slettet bruger
Ny bruger
Nybegynder
Opret
Preview
