Hvordan tilføjer jeg en submenu??
Hejsa!Jeg har nappet en drop-down menu på proshop.dk (som har nappet den fra TV2), hvor jeg gerne vil tilføje en submenu...
Menuen består af to filer: menu.js & menuDef.js, der ser således ud...
menu.js - START:
//********************************************************
//
// Javascript menu funktioner
// Inspiration fra tv2.dk's menu -> "Nap den blot - men skriv lige i din kode hvor du har den fra! :-) "
//
//********************************************************
//*** Browser mumbo jumbo***
var isIE4 = (document.all)
var isNS4 = (document.layers)
var isNS6 = document.getElementById
var isMac = (navigator.appVersion.indexOf("Mac")!=-1)
var W3C=DOM=!!document.getElementById
//*** Globals *** No custom settings here! Keep hands off
var menuID = 0 // ID of the current open menu
var menuTimer = null // Will be set to with a timeout to automaticaly close the menu
var freeze = false // Bool to "freeze" menu.
//*** Show a menu
function menu_Show(menuNr) {
menuID=menuNr
//Hide all
for(i=1;i<=menuCount;i++)
menu_ShowHide(i,false)
clearTimeout(menuTimer)
if(!(menuID==0)) {
menu_ShowHide(menuID,true)
}
freeze = false;
form_showHide(false);
}
//*** Hide a menu
function menu_Hide(menuNr){
clearTimeout(menuTimer)
menu_ShowHide(menuNr,false)
form_showHide(true);
}
//*** Change visibility of menu
function menu_ShowHide(id,state){
var offsetH = calcOffsetH();
if(isNS4)
eval("document.menu"+id).visibility=(state)?"show":"hide"
else if(isNS6){
menu = document.getElementById("menu"+id)
menu.style.left = offsetH + menuPositionH[id-1]
menu.style.top = menuPositionV[id-1]
menu.onmouseover = menu_MouseOver
menu.onmouseout = menu_MouseOut
menu.style.visibility=(state)?"visible":"hidden"
}
else{
eval("menu"+id).style.visibility=(state)?"visible":"hidden"
eval("menu"+id).style.zIndex=50
}
}
//*** Mouse over : Stop "hide menu" timer
function menu_MouseOver() {
clearTimeout(menuTimer)
}
//*** Mouse out : Start "hide menu" timer
function menu_MouseOut(){
if(!freeze)
menuTimer = setTimeout("menu_Hide("+menuID+")",400)
}
//*** Initialize. Set Z-index and position menus
function initialize() {
if(isIE4&&!isMac) {
for(i=0;i<document.all.length;i++) {
element = document.all(i)
zIndex_max = Math.max(element.style.zIndex,zIndex_max)
}
zIndex_max++
}
reposition();
reClip();
SaetFokus();
}
//*** Calculate offsetH
function calcOffsetH() {
windowW=isNS4?window.innerWidth-16:window.innerWidth?window.innerWidth:isMac?document.body.offsetWidth:document.body.offsetWidth-20
return(windowW<siteWidth)?0:Math.floor(eval((windowW-siteWidth)/2))
}
//*** Set position of menus
function reposition() {
var offsetH = calcOffsetH();
if(isNS4) {
for(i=1;i<=menuCount;i++) {
eval("document.menu"+i).moveTo(offsetH+menuPositionH[i-1],menuPositionV[i-1]);
}
} else { //if(!isNS6)
for(i=1;i<=menuCount;i++) {
currentMenu = eval("menu"+i);
currentMenu.style.pixelLeft = offsetH+menuPositionH[i-1];
currentMenu.style.pixelTop = menuPositionV[i-1];
currentMenu.style.zIndex = zIndex_max;
}
}
//Set font/cell size of menu
}
//*** get element
function getElement(id){
return W3C?document.getElementById(id):
isIE4?document.all[id]:
isNS4?document[id]:false;
}
//*** show/hide form elements
function form_showHide(state){
var div
if(isNS4){
if(div=getElement("menuFormNS")) {
div.visibility=state?"show":"hide"
}
}else{
for(var i=1;div=getElement("menuForm"+i);i++){
div.style.visibility=state?"visible":"hidden"
}
}
}
//*** Set clipping of menus (used for dynamic menus)
function reClip() {
if(isNS4) {
for(i=1;i<=menuCount;i++) {
menuHeight = (menuVariantV+(menuSubmenuCount[i-1]*menuCellSize));
eval("document.menu"+i).clip.top = 0;
eval("document.menu"+i).clip.right = menuCellWidth;
eval("document.menu"+i).clip.bottom = menuHeight;
eval("document.menu"+i).clip.left = 0;
}
} else { //if(!isNS6)
for(i=1;i<=menuCount;i++) {
menuHeight = (menuVariantV+(menuSubmenuCount[i-1]*menuCellSize));
currentMenu = eval("menu"+i);
currentMenu.style.clip = "rect(0px " + menuCellWidth + "px " + menuHeight + "px 0px)";
}
}
}
function menuPunkt(menuHTML) {
var HTML = ""
if(isNS4) {
HTML = " <a class=menuLines onmouseover=menu_MouseOver() target=_top href=" + menuHTML + "</a>"
} else {
HTML = "<a class=menuLink onmouseover=menu_MouseOver() target=_top href=" + menuHTML + "</a>"
}
return HTML;
}
function createMenu(menuNr, menuWidth, menuPunkter, menuCount) {
var head = "<div id=menu" + menuNr + "><table width="+menuWidth+" border=0 cellspacing=0 cellpadding=1><tr><td class=mbg align=center valign=center><table width="+(menuWidth-2)+" border=0 cellspacing=0 cellpadding=0><tr><td class=menuIndhold>"
var tail = "</td></tr></table></td></tr></table></div>"
var body = ""
for(i=0;i<menuPunkter.length;i++) {
body += menuPunkter[i]
}
if(menuToptype) {
menuPositionV[menuNr-1] = menuOffsetV;
} else {
menuOffset = menuOffsetV - (menuVariantV+(menuCount*menuCellSize));
menuPositionV[menuNr-1] = menuOffset;
}
menuSubmenuCount[menuNr-1] = menuCount;
document.write(head + body + tail)
}
menu.js - SLUT
menuDef.js - START:
//********************************************************
//
// Javascript menu definition
//
//********************************************************
//*** Globals *** Custom settings.
var menuToptype = true; //Menu type. True if topdown menu, false if bottomup menu
var zIndex_max = 3; // Z-index of the menus
var menuCount = 5; // Number of menus
var menufontsize = 13; // Size of font
var menuCellSize = 14; // Size of menupoint cell
var menuVariantV = 2; // Fiddle VAR to adjust calculation of bottomup menu offset (magic - more magic)
var menuCellWidth = 140;
var menuOffsetV = 125;
var menuPositionV = new Array(0,0,0,0,0);
var menuPositionH = new Array(0,95,178,267,375);
var menuSubmenuCount = new Array(0,0,0,0,0,0);
var siteWidth = 755;
if(isIE4||isNS4||isNS6){
//Menu1
var menuArray = new Array(menuPunkt("/proshop/Koncept.asp>Koncept"),
"<br>"+menuPunkt("/proshop/Betingelser.asp>Betingelser"),
"<br>"+menuPunkt("/proshop/Kontakt.asp>Kontakt"),
"<br>"+menuPunkt("/proshop/Nyhedsbreve.asp>Nyhedsbreve")
)
createMenu(1,140,menuArray,4)
//Menu2
var menuArray = new Array(menuPunkt("/proshop/varegruppeForside.asp?kategori=40>Reg. 2 DK"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=401>Reg. 2 DK Musik"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=402>Reg. 2 DK DVD-Audio"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=450>Reg. 2 UK"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=451>Reg. 2 UK Musik"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=453>Reg. 2 UK WWF/WWE"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=455>Reg. 2 UK TV-Serier"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=46>Reg. 2 Erotik"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=39>DVD Afspillere"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=37>DVD HiFi"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=38>DVD Tilbehør")
)
createMenu(2,140,menuArray,11)
//Menu3
var menuArray = new Array(menuPunkt("/proshop/bygselv.asp>Byg Selv PC"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=2>Bundkort"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=1>Kabinet"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=3>Processor"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=4>Cooler"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=5>Floppy"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=6>Ram"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=7>Harddisk"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=8>Lydkort"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=9>CD/DVD Rom"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=10>Skærmkort"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=11>Monitor"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=12>Mus Mv."),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=13>Musemåtte"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=14>Tastatur"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=15>Højttalere"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=17>Modem"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=18>SCSI controller"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=19>Backup / CD-R"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=20>Scanner"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=21>Netværk"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=25>Printer"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=29>Medier"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=61>Digitalie Kameraer"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=60>MP3"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=22>Bærbare computere"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=35>Palm PC")
)
createMenu(3,140,menuArray,27)
//Menu4
var menuArray = new Array(menuPunkt("/proshop/vareliste.asp?kategori=531>Playstation 2"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=530>Playstation 2 HW"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=540>Xbox"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=541>Xbox HW"),
"<br>"+menuPunkt("/proshop/vareliste.asp?kategori=520>CD-Rom Spil")
)
createMenu(4,140,menuArray,5)
//Menu5
var menuArray = new Array(menuPunkt("/proshop/Login.asp>Log ind"),
"<br>"+menuPunkt("/proshop/nyBruger.asp>Ny bruger"),
"<br>"+menuPunkt("/proshop/redigerProfil.asp>Rediger profil"),
"<br>"+menuPunkt("/proshop/logout_scr.asp>Log ud")
)
createMenu(5,140,menuArray,4)
// *** Set mouse events
if(isNS4)
for(i=1;i<=menuCount;i++){
eval("document.menu"+i).onmouseover=menu_MouseOver
eval("document.menu"+i).onmouseout=menu_MouseOut
}
else if(!isNS6)
for(i=1;i<=menuCount;i++){
eval("document.all.menu"+i).onmouseover=menu_MouseOver
eval("document.all.menu"+i).onmouseout=menu_MouseOut
}
if(!isNS6)
reposition()
}
//Start and position menu
window.onload=initialize
window.onresize=reposition
mednuDef.js - SLUT
Som den java-jomfru jeg er, faldt mit øje på ordet submenuCount i filen menuDef.js og tænkte at det måske er muligt at lave submenu, men at ProShop folkene bare har unladt det... Har jeg ret??
Hvis ja, så er jeg ligeledes interesseret i at vide hvorvidt det er muligt at tilføje en lille grafik fil der indikerer at dette menupunkt indeholder en submenu.
Under alle omstændigheder håber jeg der er en venlig sjæl derude som kan/vil hjælpe mig...
På forhånd tak!
/Claus
PS. Undskyld det lange indlæg :)
