Tilføje menupunkter til coolmenu
HejJeg har kigget mange spørgsmål og svar igennem her på eksperten, men har desværre ikke fundet det jeg søger.
Så derfor kommer her endnu et af de mange tusinde spørgsmål vedrørende coolmenu.
På min side har en jeg en coolmenu (fra dhtmlcentral.com) hvor jeg skal have tilføjet nogle flere punkter til hovedmenuen.
Min menu ligger inde i en tabel og alle menupunkterne ligger i hver deres celle, men når jeg forsøger at tilføje et menupunkt så lægger det sig øverst oppe på min side i stedet for ved siden af de andre.
Er der nogen der kan fortælle mig hvad det er jeg gør forkert? og hvad jeg skal gøre for at løse det?
Min side kan ses på: http://www.ferslev.com/tjalfeluka/
Min Kode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tjalfe & Luka</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<Link Rel="stylesheet" href="tjalfe_luka.css" Type="text/css" ><!-- link til ekstern style sheet -->
<style>
/* CoolMenus 4 - default styles - do not edit */
.clCMEvent{position:absolute; width:99%; height:99%; clip:rect(0,100%,100%,0); left:0; top:0; visibility:visible}
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
/*Style for the background-bar*/
.clBar{position:absolute; width:10; height:10; background-color:#243d84; layer-background-color:#243d84; visibility:hidden}
/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding:2px; font-family:Verdana; font-size:11px; font-weight:bold}
.clLevel0{background-color:#243d84; layer-background-color:#243d84; color:white;}
.clLevel0over{background-color:#243d84; layer-background-color:#243d84; color:#ffffff; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#243d84; layer-background-color:#243d84}
/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:verdana; font-size:11px; font-weight:bold}
.clLevel1{background-color:#243d84; layer-background-color:#243d84; color:white;}
.clLevel1over{background-color:#243d84; layer-background-color:#243d84; color:#ffffff; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; z-index:500; visibility:hidden; background-color:#243d84; layer-background-color:#243d84}
/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:Yellow; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}
</style>
<script language="JavaScript1.2" src="coolmenus4.js">
/*****************************************************************************
Copyright (c) 2001 Thomas Brattli (webmaster@dhtmlcentral.com)
DHTML coolMenus - Get it at coolmenus.dhtmlcentral.com
Version 4.0_beta
This script can be used freely as long as all copyright messages are
intact.
Extra info - Coolmenus reference/help - Extra links to help files ****
CSS help: http://192.168.1.31/projects/coolmenus/reference.asp?m=37
General: http://coolmenus.dhtmlcentral.com/reference.asp?m=35
Menu properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=47
Level properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=48
Background bar properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=49
Item properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=50
******************************************************************************/
</script>
</head>
<body>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8"><img src="gfx/top_grafik.jpg" width="900" height="150"></td>
</tr>
<tr>
<td width="200" height="25" bgcolor="#243D84"> </td>
<td width="100" height="25" bgcolor="#243D84"><!-- You need all this START --- ITEM 0 -->
<ilayer name="layerMenu0" id="layerMenu0" left="0" z-index="1" width="100" height="25">
<div id="divMenu0">
<img src="cm_fill.gif" width="6" height="25" alt="" border="0">
</div></ilayer>
<!-- END --></td>
<td width="100" height="25" bgcolor="#243D84"> <!-- You need all this START --- ITEM 1 -->
<ilayer name="layerMenu1" id="layerMenu1" left="2" z-index="2" width="100">
<div id="divMenu1">
<img src="cm_fill.gif" width="6" height="25" alt="" border="0">
</div></ilayer>
<!-- END --></td>
<td width="100" height="25" bgcolor="#243D84"><!-- You need all this START --- ITEM 2 -->
<ilayer name="layerMenu2" id="layerMenu2" z-index="3" width="100">
<div id="divMenu2">
<img src="cm_fill.gif" width="6" height="25" alt="" border="0">
</div></ilayer>
<!-- END --></td>
<td width="100" height="25" bgcolor="#243D84"><!-- You need all this START --- ITEM 3 -->
<ilayer name="layerMenu3" id="layerMenu3" z-index="4" width="100">
<div id="divMenu3">
<img src="cm_fill.gif" width="6" height="25" alt="" border="0">
</div></ilayer>
<!-- END --></td>
<td width="100" height="25" bgcolor="#243D84"><!-- You need all this START --- ITEM 4 -->
<ilayer name="layerMenu4" id="layerMenu4" z-index="5" width="100">
<div id="divMenu4">
<img src="cm_fill.gif" width="6" height="25" alt="" border="0">
</div></ilayer>
<!-- END --></td>
<td width="100" height="25" bgcolor="#243D84"><!-- You need all this START --- ITEM 5 -->
<ilayer name="layerMenu5" id="layerMenu5" left="0" z-index="6" width="100" height="25">
<div id="divMenu5">
<img src="cm_fill.gif" width="6" height="25" alt="" border="0">
</div></ilayer>
<!-- END --></td>
<td width="100" height="25" bgcolor="#243D84"><!-- You need all this START --- ITEM 6 -->
<ilayer name="layerMenu6" id="layerMenu6" left="0" z-index="7" width="100" height="25">
<div id="divMenu6">
<img src="cm_fill.gif" width="6" height="25" alt="" border="0">
</div></ilayer>
<!-- END --></td>
</tr>
<tr>
<td width="200" height="131" bgcolor="#D6DCEE"><img src="gfx/lille_foto_1.jpg" width="198" height="129"></td>
<td colspan="7" rowspan="4" bgcolor="#D6DCEE"><div align="center">
<iframe name="tekst" src="forside.htm" width="690" height="514"
scrolling="no" frameborder="0" marginheight="0" marginwidth="0" style="FILTER: chroma(color=#d6dcee)" allowTransparency>[Din browser understøtter ikke frames. Denne side er optimeret til internet explorer, se siden <a href="web/forside.htm"> klik her.</a>] </iframe>
<!-- iframe slut -->
</div></td>
</tr>
<tr>
<td width="200" height="131" bgcolor="#D6DCEE"><img src="gfx/lille_foto_2.jpg" width="198" height="129"></td>
</tr>
<tr>
<td width="200" height="131" bgcolor="#D6DCEE"><img src="gfx/lille_foto_3.jpg" width="198" height="129"></td>
</tr>
<tr>
<td width="200" height="131" bgcolor="#D6DCEE"><img src="gfx/lille_foto_4.jpg" width="198" height="129"></td>
</tr>
</table>
<script>
/***
This is the menu creation code - place it right after you body tag
Feel free to add this to a stand-alone js file and link it to your page.
**/
//Menu object creation
oCMenu=new makeCM("oCMenu") //Making the menu object. Argument: menuname
//Menu properties
oCMenu.pxBetween=0
//Using the cm_page object to place the menu ----
oCMenu.fromLeft=0
oCMenu.fromTop=0
oCMenu.rows=1
oCMenu.menuPlacement=0
oCMenu.offlineRoot="file:///C|/Inetpub/wwwroot/dhtmlcentral/projects/coolmenus/examples/"
oCMenu.onlineRoot=""
oCMenu.resizeCheck=1
oCMenu.wait=1000
oCMenu.fillImg="cm_fill.gif"
oCMenu.zIndex=0
//Background bar properties
oCMenu.useBar=0
//Level properties - ALL properties have to be spesified in level 0
oCMenu.level[0]=new cm_makeLevel() //Add this for each new level
oCMenu.level[0].width="100"
oCMenu.level[0].height=25
oCMenu.level[0].regClass="clLevel0"
oCMenu.level[0].overClass="clLevel0over"
oCMenu.level[0].borderX=1
oCMenu.level[0].borderY=1
oCMenu.level[0].borderClass="clLevel0border"
oCMenu.level[0].offsetX=0
oCMenu.level[0].offsetY=0
oCMenu.level[0].rows=0
oCMenu.level[0].arrow=0
oCMenu.level[0].arrowWidth=0
oCMenu.level[0].arrowHeight=0
oCMenu.level[0].align="bottom"
/******************************************
Menu item creation:
myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)
*************************************/
oCMenu.makeMenu('top0','',' FORSIDE','forside.htm','tekst')
<!--oCMenu.makeMenu('sub00','top0','Newest news','/news/index.asp')-->
oCMenu.makeMenu('top1','',' LIDT OM OS','lidt_om_os.htm','tekst')
<!--oCMenu.makeMenu('sub10','top1','New scripts','/scripts/index.asp?show=new')-->
oCMenu.makeMenu('top2','',' KATTENE','')
oCMenu.makeMenu('sub21','top2',' TJALFE','tjalfe.htm','tekst')
oCMenu.makeMenu('sub22','top2',' LUKA','luka.htm','tekst')
oCMenu.makeMenu('top3','',' GALLERI','/forums/')
oCMenu.makeMenu('sub30','top3',' GALLERI 1','galleri1.htm','tekst')
oCMenu.makeMenu('sub31','top3',' GALLERI 2','galleri2.htm','tekst')
oCMenu.makeMenu('sub32','top3',' GALLERI 3','galleri3.htm','tekst')
oCMenu.makeMenu('sub33','top3',' GALLERI 4','galleri4.htm','tekst')
oCMenu.makeMenu('top4','',' BIRMAEN','birmaen.htm','tekst')
<!--oCMenu.makeMenu('sub40','top4','General','/forums/forum.asp?FORUM_ID=6&CAT_ID=1&Forum_Title=General+DHTML+issues')-->
<!--oCMenu.makeMenu('sub41','top4','Scripts','/forums/forum.asp?FORUM_ID=4&CAT_ID=1&Forum_Title=DHTML+Scripts')-->
oCMenu.makeMenu('top5','',' KONTAKT','forside.htm','tekst')
<!--oCMenu.makeMenu('sub50','top5','Newest news','/news/index.asp')-->
oCMenu.makeMenu('top6','',' LINKS','forside.htm','tekst')
<!--oCMenu.makeMenu('sub60','top6','Newest news','/news/index.asp')-->
//Leave this line - it constructs the menu
oCMenu.construct()
//Extra code to find position:
function findPos(num){
//alert(num)
if(bw.ns4){ //Netscape 4
x = document.layers["layerMenu"+num].pageX
y = document.layers["layerMenu"+num].pageY
}else{ //other browsers
x=0; y=0; var el,temp
el = bw.ie4?document.all["divMenu"+num]:document.getElementById("divMenu"+num);
if(el.offsetParent){
temp = el
while(temp.offsetParent){ //Looping parent elements to get the offset of them as well
temp=temp.offsetParent;
x+=temp.offsetLeft
y+=temp.offsetTop;
}
}
x+=el.offsetLeft
y+=el.offsetTop
}
//Returning the x and y as an array
return [x,y]
}
function placeElements(){
//Changing the position of ALL top items:
pos = findPos(0)
oCMenu.m["top0"].b.moveIt(pos[0],pos[1])
pos = findPos(1)
oCMenu.m["top1"].b.moveIt(pos[0],pos[1])
pos = findPos(2)
oCMenu.m["top2"].b.moveIt(pos[0],pos[1])
pos = findPos(3)
oCMenu.m["top3"].b.moveIt(pos[0],pos[1])
pos = findPos(4)
oCMenu.m["top4"].b.moveIt(pos[0],pos[1])
//Setting the fromtop value
oCMenu.fromTop = pos[1]
}
placeElements()
//Setting it to re place the elements after resize - the resize is not perfect though..
oCMenu.onafterresize="placeElements()"
</script>
</body>
</html>
Håber der er nogen der kan hjælpe mig :O)
/Annette
