Stort problem med menu!
Jeg er ved at gå amok, jeg forsøger at lave en menu udfra ypSlideOutMenu. Problemet er at den lige meget hvordan jeg definere x,y,bredde,højde (Relative) lægger sig under menuen istedet for ovenpå.Det er lidt svært at forklare men sådan ser koden ud:
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<script language="javascript">
var menus = [
new ypSlideOutMenu("menu1", "right", 0, 0, 8000, 800),
new ypSlideOutMenu("menu2", "right", 0, 0, 180, 200),
new ypSlideOutMenu("menu3", "right", 0, 0, 180, 200),
new ypSlideOutMenu("menu4", "right", 0, 0, 180, 200),
new ypSlideOutMenu("menu5", "right", 0, 0, 180, 200),
new ypSlideOutMenu("menu6", "right", 0, 0, 180, 200),
new ypSlideOutMenu("menu7", "right", 0, 0, 180, 200)
]
for (var i = 0; i < menus.length; i++) {
menus[i].onactivate = new Function("document.getElementById('act" + i + "').className='hovedmenu';");
menus[i].ondeactivate = new Function("document.getElementById('act" + i + "').className='hovedmenu';");
}
</script>
<div id="menubar">
<tr><td class="menu-tb" bgcolor='#F0F2F7'><a id="act0" href="information.asp?Page=2&menu=1&type=menu&print=print" onmouseover="ypSlideOutMenu.showMenu('menu1')" onmouseout="ypSlideOutMenu.hideMenu('menu1')" title="onmouseover=ypSlideOutMenu.showMenu('menu1'); onmouseout=ypSlideOutMenu.hideMenu('menu1')" class="hovedmenu">About the department</a></td></tr>
<tr><td class="menu-tb" bgcolor='#ffffff'><a id="act1" href="information.asp?Page=3&menu=2&type=menu&print=print" onmouseover="ypSlideOutMenu.showMenu('menu2')" onmouseout="ypSlideOutMenu.hideMenu('menu2')" title="onmouseover=ypSlideOutMenu.showMenu('menu2'); onmouseout=ypSlideOutMenu.hideMenu('menu2')" class="hovedmenu">Research and employees</a></td></tr>
<tr><td class="menu-tb" bgcolor='#F0F2F7'><a id="act2" href="information.asp?Page=4&menu=3&type=menu&print=print" onmouseover="ypSlideOutMenu.showMenu('menu3')" onmouseout="ypSlideOutMenu.hideMenu('menu3')" title="onmouseover=ypSlideOutMenu.showMenu('menu3'); onmouseout=ypSlideOutMenu.hideMenu('menu3')" class="hovedmenu">Education and students</a></td></tr>
<tr><td class="menu-tb" bgcolor='#ffffff'><a id="act3" href="information.asp?Page=5&menu=4&type=menu&print=print" onmouseover="ypSlideOutMenu.showMenu('menu4')" onmouseout="ypSlideOutMenu.hideMenu('menu4')" title="onmouseover=ypSlideOutMenu.showMenu('menu4'); onmouseout=ypSlideOutMenu.hideMenu('menu4')" class="hovedmenu">News, seminars</a></td></tr>
<tr><td class="menu-tb" bgcolor='#F0F2F7'><a id="act4" href="information.asp?Page=6&menu=5&type=menu&print=print" onmouseover="ypSlideOutMenu.showMenu('menu5')" onmouseout="ypSlideOutMenu.hideMenu('menu5')" title="onmouseover=ypSlideOutMenu.showMenu('menu5'); onmouseout=ypSlideOutMenu.hideMenu('menu5')" class="hovedmenu">Semester Information</a></td></tr>
</div>
</table>
<style type="text/css">
td div {
/* this makes TDs a container with their own coordinate system.
absolutely-positioned elements will be offset relative to them */
position:relative;
}
</style>
<!-- Dropdown -->
<div id="menu1Container">
<div id="menu1Content" style='background-position:center;filter:alpha(Opacity=90);'>
<div>
<a href="information.asp?Page=47&menu=68&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> Projects</a>
<a href="information.asp?Page=44&menu=65&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> Publications</a>
<a href="information.asp?Page=45&menu=66&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> Collaboration with industry</a>
<a href="information.asp?Page=59&menu=69&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> Job opportunities</a>
</div>
</div>
</div>
<div id="menu2Container">
<div id="menu2Content" style='background-position:center;filter:alpha(Opacity=90);'>
<div>
<a href="information.asp?Page=16&menu=56&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> Software Technology </a>
<a href="information.asp?Page=17&menu=57&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> Media Technology</a>
<a href="information.asp?Page=26&menu=58&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> People</a>
</div>
</div>
</div>
<div id="menu3Container">
<div id="menu3Content" style='background-position:center;filter:alpha(Opacity=90);'>
<div>
<a href="information.asp?Page=28&menu=59&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> Ingeniøruddannelser</a>
<a href="information.asp?Page=33&menu=61&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> Softwarekonstruktion</a>
<a href="information.asp?Page=31&menu=60&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> Medialogi</a>
</div>
</div>
</div>
<div id="menu4Container">
<div id="menu4Content" style='background-position:center;filter:alpha(Opacity=90);'>
<div>
<a href="information.asp?Page=41&menu=62&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> News</a>
<a href="information.asp?Page=42&menu=63&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> Seminars</a>
<a href="information.asp?Page=43&menu=64&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> Events</a>
</div>
</div>
</div>
<div id="menu5Container">
<div id="menu5Content" style='background-position:center;filter:alpha(Opacity=90);'>
<div>
<a href="information.asp?Page=46&menu=67&type=submenuen&print=print" class="submenuen"><img src="Images/Grafik/menu.gif" width="9" height="9" border="0" align="absmiddle"> Courses</a>
</div>
</div>
</div>
</td>
</tr>
</table>
Sådan her bliver style sheeted genereret for hver enkel menu:
function ypSlideOutMenu(id, dir, left, top, width, height)
{
this.ie = document.all ? 1 : 0
this.ns4 = document.layers ? 1 : 0
this.dom = document.getElementById ? 1 : 0
if (this.ie || this.ns4 || this.dom) {
this.id = id
this.dir = dir
this.orientation = dir == "left" || dir == "right" ? "h" : "v"
this.dirType = dir == "right" || dir == "down" ? "-" : "+"
this.dim = this.orientation == "h" ? width : height
this.hideTimer = false
this.aniTimer = false
this.open = false
this.over = false
this.startTime = 0
this.gRef = "ypSlideOutMenu_"+id
eval(this.gRef+"=this")
ypSlideOutMenu.Registry[id] = this
var d = document
var strCSS = "";
strCSS += '#' + this.id + 'Container { visibility:hidden; '
strCSS += 'left:' + left + 'px; '
strCSS += 'top:' + top + 'px; '
strCSS += 'overflow:hidden; z-index:10000; }'
strCSS += '#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; '
strCSS += 'width:' + width + 'px; '
strCSS += 'height:' + height + 'px; '
strCSS += 'clip:rect(0 ' + width + ' ' + height + ' 0); '
strCSS += '}'
this.css = strCSS;
this.load()
}
Og sådan ser det almindelige style sheet ud:
#menubar {
color:#FFFFFF;
position:absolute;
width:800px;
left:0px;
top:148px;
padding:2px;
}
#menubar a {
color:#FFFFFF;
text-decoration:none;
}
#menubar a.active {
color:#FFFFFF;
border: #000000;
}
.menu .options {
color:#FFFFFF;
margin-right:1px;
margin-bottom:1px;
background-color:#7F95A3;
border-top: 0px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
vertical-align: middle;
}
.menu a {
color:#FFFFFF;
display:block;
padding:2px 10px;
text-decoration:none;
background-color:transparent;
}
.menu a:hover {
color:#FFFFFF;
background-color:#5F769C;
}
.submenu {
color:#FFFFFF;
background-color: #BCCCD4;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
vertical-align: middle;
}
.menu-tb {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-small;
color: #04255A;
padding: 2px 2px 2px 6px;
border-top: 0px solid #FFFFFF;
border-right: 0px solid #04255A;
border-bottom: 1px solid #04255A;
border-left: 0px solid #04255A;
background-image: none;
background-repeat: no-repeat;
}
Skriv endelig hvis I har spørgsmål.
