Avatar billede herbie4ever Nybegynder
12. februar 2002 - 22:47 Der er 7 kommentarer

Drop down menu i html / java?

Jeg ønsker blot at få at vide hvordan jeg laver en drop down menu??

Den skal være simpel med mulighed for at vælge skrifttyper og evt sætter billeder ind i linksne.

Avatar billede ahv Nybegynder
12. februar 2002 - 22:49 #1
<html>

<head>
<style>
all.clsMenuItemNS{font: bold x-small Verdana; color: white; text-decoration: none;}
.clsMenuItemIE{text-decoration: none; font: bold xx-small Verdana; color: white; cursor: hand;}
A:hover {color: red;}
</style>
</head>

<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">

<script language="JavaScript">
if (document.all) {n=0;ie=1;fShow="visible";fHide="hidden";}
if (document.layers) {n=1;ie=0;fShow="show"; fHide="hide";}

window.onerror=new Function("return true")
////////////////////////////////////////////////////////////////////////////
// Function Menu() //
////////////////////////////////////////////////////////////////////////////
rightX = 0;
function Menu()
{
this.bgColor = "#3399cc";
if (ie) this.menuFont = "bold xx-small Verdana";
if (n) this.menuFont = "bold x-small Verdana";
// this.fontColor = "white";

this.addItem = addItem;
this.addSubItem = addSubItem;
this.showMenu = showMenu;
this.mainPaneBorder = 1;
this.subMenuPaneBorder = 1;

this.subMenuPaneWidth = 150;

lastMenu = null;

rightY = 0;
leftY = 0;
leftX = 0;

HTMLstr = "";
HTMLstr += "<!-- MENU PANE DECLARATION BEGINS -->\n";
HTMLstr += "\n";
if (ie) HTMLstr += "<div id='MainTable' style='position:relative'>\n";
// if (n) HTMLstr += "<layer name='MainTable'>\n";
HTMLstr += "<table width='100%' bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n";
HTMLstr += "<tr>";
if (n) HTMLstr += "<td>&nbsp;";
HTMLstr += "<!-- MAIN MENU STARTS -->\n";
HTMLstr += "<!-- MAIN_MENU -->\n";
HTMLstr += "<!-- MAIN MENU ENDS -->\n";
if (n) HTMLstr += "</td>";
HTMLstr += "</tr>\n";
HTMLstr += "</table>\n";
HTMLstr += "\n";
HTMLstr += "<!-- SUB MENU STARTS -->\n";
HTMLstr += "<!-- SUB_MENU -->\n";
HTMLstr += "<!-- SUB MENU ENDS -->\n";
HTMLstr += "\n";
if (ie) HTMLstr+= "</div>\n";
// if (n) HTMLstr+= "</layer>\n";
HTMLstr += "<!-- MENU PANE DECALARATION ENDS -->\n";
}

function addItem(idItem, text, hint, location, altLocation)
{
var Lookup = "<!-- ITEM "+idItem+" -->";
if (HTMLstr.indexOf(Lookup) != -1)
{
alert(idParent + " already exist");
return;
}
var MENUitem = "";
MENUitem += "\n<!-- ITEM "+idItem+" -->\n";
if (n)
{
MENUitem += "<ilayer name="+idItem+">";
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">";
MENUitem += "|&nbsp;";
MENUitem += text;
MENUitem += "</a>";
MENUitem += "</ilayer>";
}
if (ie)
{
MENUitem += "<td>\n";
MENUitem += "<div id='"+idItem+"' style='position:relative; font: "+this.menuFont+";'>\n";
MENUitem += "<a ";
MENUitem += "class=clsMenuItemIE ";
// MENUitem += "style='text-decoration: none; font: "+this.menuFont+"; color: "+this.fontColor+"; cursor: hand;' ";
if (hint != null)
MENUitem += "title='"+hint+"' ";
if (location != null)
{
MENUitem += "href='"+location+"' ";
MENUitem += "onmouseover=\"hideAll()\" ";
}
else
{
if (altLocation != null)
MENUitem += "href='"+altLocation+"' ";
else
MENUitem += "href='.' ";
MENUitem += "onmouseover=\"displaySubMenu('"+idItem+"')\" ";
MENUitem += "onclick=\"return false;\" "
}
MENUitem += ">";
MENUitem += "|&nbsp;\n";
MENUitem += text;
MENUitem += "</a>\n";
MENUitem += "</div>\n";
MENUitem += "</td>\n";
}
MENUitem += "<!-- END OF ITEM "+idItem+" -->\n\n";
MENUitem += "<!-- MAIN_MENU -->\n";

HTMLstr = HTMLstr.replace("<!-- MAIN_MENU -->\n", MENUitem);
}

function addSubItem(idParent, text, hint, loca, location)
{
var MENUitem = "";
Lookup = "<!-- ITEM "+idParent+" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
alert(idParent + " not found");
return;
}
Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
if (n)
{
MENUitem += "\n";
MENUitem += "<layer id='"+idParent+"submenu' visibility=hide bgcolor='"+this.bgColor+"'>\n";
MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</layer>\n";
MENUitem += "\n";
}
if (ie)
{
MENUitem += "\n";
MENUitem += "<div id='"+idParent+"submenu' style='position:absolute; visibility: hidden; width: "+this.subMenuPaneWidth+"; font: "+this.menuFont+"; top: -300;'>\n";
MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</div>\n";
MENUitem += "\n";
}
MENUitem += "<!-- SUB_MENU -->\n";
HTMLstr = HTMLstr.replace("<!-- SUB_MENU -->\n", MENUitem);
}

Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
if (n) MENUitem = "<tr><td ><IMG SRC="+loca+" WIDTH=12 HEIGHT=12 BORDER=0> ";
if (ie) MENUitem = "<tr><td><IMG SRC="+loca+" WIDTH=12 HEIGHT=12 BORDER=0> ";
MENUitem += Lookup;
HTMLstr = HTMLstr.replace(Lookup, MENUitem);


Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
if (n) MENUitem = "<a class=clsMenuItemNS title='"+hint+"' href='"+location+"'>"+text+"</a><br>\n";
if (ie) MENUitem = "<a class=clsMenuItemIE title='"+hint+"' href='"+location+"'>"+text+"</a><br>\n";
MENUitem += Lookup;
HTMLstr = HTMLstr.replace(Lookup, MENUitem);

}

function showMenu()
{
document.writeln(HTMLstr);
}

function displaySubMenu(idMainMenu)
{
var menu;
var submenu;
if (n)
{
submenu = document.layers[idMainMenu+"submenu"];
if (lastMenu != null && lastMenu != submenu) hideAll();
submenu.left = document.layers[idMainMenu].pageX;
submenu.top = document.layers[idMainMenu].pageY + 25;
submenu.visibility = fShow;

leftX = document.layers[idMainMenu+"submenu"].left;
rightX = leftX + document.layers[idMainMenu+"submenu"].clip.width;
leftY = document.layers[idMainMenu+"submenu"].top+
document.layers[idMainMenu+"submenu"].clip.height;
rightY = leftY;
} else if (ie) {
menu = eval(idMainMenu);
submenu = eval(idMainMenu+"submenu.style");
submenu.left = calculateSumOffset(menu, 'offsetLeft');
// submenu.top = calculateSumOffset(menu, 'offsetTop') + 30;
submenu.top = menu.style.top+23;
submenu.visibility = fShow;
if (lastMenu != null && lastMenu != submenu) hideAll();

leftX = document.all[idMainMenu+"submenu"].style.posLeft;
rightX = leftX + document.all[idMainMenu+"submenu"].offsetWidth;

leftY = document.all[idMainMenu+"submenu"].style.posTop+
document.all[idMainMenu+"submenu"].offsetHeight;
rightY = leftY;
}
lastMenu = submenu;
}

function hideAll()
{
if (lastMenu != null) {lastMenu.visibility = fHide;lastMenu.left = 0;}
}

function calculateSumOffset(idItem, offsetName)
{
var totalOffset = 0;
var item = eval('idItem');
do
{
totalOffset += eval('item.'+offsetName);
item = eval('item.offsetParent');
} while (item != null);
return totalOffset;
}

function updateIt(e)
{
if (ie)
{
var x = window.event.clientX;
var y = window.event.clientY;

if (x > rightX || x < leftX) hideAll();
else if (y > rightY) hideAll();
}
if (n)
{
var x = e.pageX;
var y = e.pageY;

if (x > rightX || x < leftX) hideAll();
else if (y > rightY) hideAll();
}
}

if (document.all)
{
document.body.onclick=hideAll;
document.body.onscroll=hideAll;
document.body.onmousemove=updateIt;
}
if (document.layers)
{
document.onmousedown=hideAll;
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=updateIt;
}
</script>
<script language="JavaScript">

function showToolbar()
{
// AddItem(id, text, hint, location, alternativeLocation);
// AddSubItem(idParent, text, hint, loca, location);

menu = new Menu();
menu.addItem("menu1id", "Menu 1", "Menu 1", null, null);
menu.addItem("menu2id", "Menu 2", "Menu 2", null, null);
menu.addItem("menu3id", "Menu 3", "Menu 3", null, null);
menu.addItem("menu4id", "Menu 4", "Menu 4", null, null);
menu.addItem("menu5id", "Menu 5", "Menu 5", null, null);

menu.addSubItem("menu1id", "Menu 1 Punkt 1", "Menu 1 Punkt 1", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");
menu.addSubItem("menu1id", "Menu 1 Punkt 2", "Menu 1 Punkt 2", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");
menu.addSubItem("menu1id", "Menu 1 Punkt 3", "Menu 1 Punkt 3", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");

menu.addSubItem("menu2id", "Menu 1 Punkt 1", "Menu 2 Punkt 1", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");
menu.addSubItem("menu2id", "Menu 1 Punkt 2", "Menu 2 Punkt 2", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");
menu.addSubItem("menu2id", "Menu 1 Punkt 3", "Menu 2 Punkt 3", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");

menu.addSubItem("menu3id", "Menu 1 Punkt 1", "Menu 3 Punkt 1", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");
menu.addSubItem("menu3id", "Menu 1 Punkt 2", "Menu 3 Punkt 2", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");
menu.addSubItem("menu3id", "Menu 1 Punkt 3", "Menu 3 Punkt 3", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");

menu.addSubItem("menu4id", "Menu 4 Punkt 1", "Menu 4 Punkt 1", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");
menu.addSubItem("menu4id", "Menu 4 Punkt 2", "Menu 4 Punkt 2", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");
menu.addSubItem("menu4id", "Menu 4 Punkt 3", "Menu 4 Punkt 3", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");

menu.addSubItem("menu5id", "Menu 5 Punkt 1", "Menu 5 Punkt 1", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");
menu.addSubItem("menu5id", "Menu 5 Punkt 2", "Menu 5 Punkt 2", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");
menu.addSubItem("menu5id", "Menu 5 Punkt 3", "Menu 5 Punkt 3", "http://www.ahv.f2s.com/image/it.jpg", "http://www.ahv.f2s.com/");

menu.showMenu();
}

</script>
<script language="JavaScript">
showToolbar();
</script>
<script language="JavaScript">
function UpdateIt(){
if (document.all){
document.all["MainTable"].style.top = document.body.scrollTop;
setTimeout("UpdateIt()", 200);
}
}
UpdateIt();
</script>

</body>
</html>



Det ser voldsomt ud, men det er kun i den nederst del du skal rette :o)
Denne er med billeder ud for hvert link, hvis du ønsker den uden billeder har jeg også den !
Avatar billede ahv Nybegynder
12. februar 2002 - 22:50 #2
Hvis du har problemer med den, så sig bare til :o)
Avatar billede herbie4ever Nybegynder
13. februar 2002 - 08:55 #3
Denne drop down menu er super, men den dur vist ikke i Netscape.

Kender i til en der gø?

1 sprøgsmål til.
Jeg har lavet en main side med en top og bund frame, Drop down menu'en har jeg lagt ind i top framen, men når jeg markere menu punkterne så dropper menuerne ned under bundframen og skjules, så skal jeg bruger scrolleren for at scrolle ned så jeg kan se dem.

HVad er løsningen på det?

Mvh Thomas
Avatar billede ahv Nybegynder
13. februar 2002 - 23:02 #4
En løsning kunne være ikke at lave din side i frames :o)
Avatar billede random Nybegynder
14. februar 2002 - 11:09 #5
http:\\www.dhtmlcentral.com her er nogle dropdownmenuer der virker i begge browsere!!
Avatar billede random Nybegynder
14. februar 2002 - 11:13 #6
Menuerne inde op dhtmlcentralen gør det muligt at din side ikke scroller!!
Avatar billede t_kris Nybegynder
03. oktober 2002 - 20:34 #7
Den skal lige i toppen at din bundframen
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester