dropdown menü

**snake14** · 24-01-2003 21:15

hi, ich möchte für meine site ein dropdown menü wie z.B. auf der seite www.nterra.de haben.
ich habe hier(jswelt) schon mal unter java script->navigation usw. geguckt, hab auch was gefunden was ganz gut war( ich glaube das war das statische menü 2 oder so). aber als ich das in meine site eingebaut hab ist mir aufgefallen das, das menü beim scrollen immer mit nach unten geht, also fest getackert ist, oder wie man das nennt. ich möchte aber das, das menü beim scrollen an seinem platz bleibt. und mir ist noch aufgefallen das wenn ich das menü unter meinen banner mache, es nicht mehr funtzt, es klappt nur wenn ich es ganz oben an den oberen rand von der site mach!
meine frage: wie kann ich das machen das, das menü beim scrollen nicht mit runter geht(es soll an seinem platz bleiben)?
oder was muss ich in dem script entfernen das es oben bleibt?
würde mich über hilfe freuen.
by snake

**kasimir83** · 25-01-2003 08:58

Also.
Ohne den Code gesehen zu haben:
Das Festtackern passiert für gewöhnlich so, dass regelmäßig geprüft wird ob der Text noch an seiner Stelle sitzt. Du soltest also die Stelle suchen an der ein window.setInterval() oder window.setTimeout() steht, da müsste das Ding irgendwo rumgeistern.
Dass das nur funktioniert wenn es ganz oben steht, wird warscheinlich daran liegen, dass die einzelnen Elemente nicht über ID/Namen sondern über eine Indexierung aufgerufen werden, zB. document.getElementsByTagName('div')[2].style...
Suchen, die richtigen Indexzahlen erhöhen, oder am besten gleich gegen ID's austauschen.

oder einfach den Quelltext hier posten *arbeitaufmichzukommseh*

**snake14** · 25-01-2003 11:26

da ich mich mit js net so doll auskenne, schreib ich am besten mal den quelltext von dem menü hierein:


<html>
<head>
<style>
all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 12px Arial; color: white; cursor: hand; z-index:100}
#MainTable A:hover {color: yellow;}
</style>

<script language="JavaScript">

//Top Nav Bar I v2- By Constantin Kuznetsov Jr. (script@esolutiononline.com)

var keepstatic=1 //specify whether menu should stay static 0=non static (works only in IE4+)
var menucolor="#000000" //specify menu color
var submenuwidth=150 //specify sub menus' color

</script>

<title>Welcome to Homepage</title>
</head>

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

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

//Top Nav bar script v2- http://www.dynamicdrive.com/dynamicindex1/sm/index.htm

opr6=ie&&navigator.userAgent.indexOf("Opera")!=-1

//window.onerror=new Function("return true")
////////////////////////////////////////////////////////////////////////////
// Function Menu() //
////////////////////////////////////////////////////////////////////////////
rightX = 0;
function Menu()
{
this.bgColor = menucolor;
if (ie) this.menuFont = "bold 12px Arial";
if (n) this.menuFont = "bold 12px Verdana";
this.fontColor = "black";

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

this.subMenuPaneWidth = submenuwidth;

lastMenu = null;

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

HTMLstr = "";
HTMLstr += "\n";
HTMLstr += "\n";
if (ie||ns6) HTMLstr += "<div id='MainTable' style='position:relative;top:0'>\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> ";
HTMLstr += "\n";
HTMLstr += "\n";
HTMLstr += "\n";
if (n) HTMLstr += "</td>";
HTMLstr += "</tr>\n";
HTMLstr += "</table>\n";
HTMLstr += "\n";
HTMLstr += "\n";
HTMLstr += "\n";
HTMLstr += "\n";
HTMLstr += "\n";
if (ie||ns6) HTMLstr+= "</div>\n";
// if (n) HTMLstr+= "</layer>\n";
HTMLstr += "\n";
}

function addItem(idItem, text, hint, location, altLocation)
{
var Lookup = "";
if (HTMLstr.indexOf(Lookup) != -1)
{
alert(idParent + " already exist");
return;
}
var MENUitem = "";
MENUitem += "\n\n";
if (n)
{
MENUitem += "<ilayer name="+idItem+">";
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">";
MENUitem += "| ";
MENUitem += text;
MENUitem += "</a>";
MENUitem += "</ilayer>";
}
if (ie||ns6)
{
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 += "| \n";
MENUitem += text;
MENUitem += "</a>\n";
MENUitem += "</div>\n";
MENUitem += "</td>\n";
}
MENUitem += "\n\n";
MENUitem += "\n";

HTMLstr = HTMLstr.replace("\n", MENUitem);
}

function addSubItem(idParent, text, hint, location)
{
var MENUitem = "";
Lookup = "";
if (HTMLstr.indexOf(Lookup) == -1)
{
alert(idParent + " not found");
return;
}
Lookup = "";
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 += "\n";
MENUitem += "</table>\n";
MENUitem += "</layer>\n";
MENUitem += "\n";
}
if (ie||ns6)
{
MENUitem += "\n";
MENUitem += "<div id='"+idParent+"submenu' onmouseout=operahide() style='position:absolute; visibility: hidden; z-index:100; width: "+this.subMenuPaneWidth+"; font: "+this.menuFont+"; top: -300;'>\n";
MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "\n";
MENUitem += "</table>\n";
MENUitem += "</div>\n";
MENUitem += "\n";
}
MENUitem += "\n";
HTMLstr = HTMLstr.replace("\n", MENUitem);
}

Lookup = "\n";
if (n) MENUitem = "<tr><td><a class=clsMenuItemNS title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n";
if (ie||ns6) MENUitem = "<tr><td><a class=clsMenuItemIE title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n";
MENUitem += Lookup;
HTMLstr = HTMLstr.replace(Lookup, MENUitem);

}

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

////////////////////////////////////////////////////////////////////////////
// Private declaration
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||ns6) {
//alert(document.getElementById(idMainMenu+"submenu").id)
menu = ie? eval(idMainMenu) : document.getElementById(idMainMenu);
submenu = ie? eval(idMainMenu+"submenu.style") : document.getElementById(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 = ie? document.all[idMainMenu+"submenu"].style.posLeft : parseInt(document.getElementById(idMainMenu+"submenu").style.left);
rightX = ie? leftX + document.all[idMainMenu+"submenu"].offsetWidth : leftX+parseInt(document.getElementById(idMainMenu+"submenu").offsetWidth);

leftY = ie? document.all[idMainMenu+"submenu"].style.posTop+
document.all[idMainMenu+"submenu"].offsetHeight : parseInt(document.getElementById(idMainMenu+"submenu").style.top)+parseInt(document.getElementById(i dMainMenu+"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&&!opr6)
{
var x = window.event.clientX;
var y = window.event.clientY;

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

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

function operahide(){
if (opr6){
if (!MainTable.contains(event.toElement))
hideAll()
}
}

if (ie||ns6)
{
document.body.onclick=hideAll;
document.body.onscroll=hideAll;
document.body.onmousemove=updateIt;
}
if (document.layers)
{
window.captureEvents(Event.MOUSEMOVE);
window.captureEvents(Event.CLICK);
window.onmousemove=updateIt;
window.onclick=hideAll;
}

</script>
<script language="JavaScript">

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

menu = new Menu();
menu.addItem("webmasterid", "Web Building Sites", "Web Building Sites", null, null);
menu.addItem("newsid", "News Sites", "News Sites", null, null);
menu.addItem("freedownloadid", "Free Downloads", "Free Downloads", null, null);
menu.addItem("searchengineid", "Search Engines", "Search Engines", null, null);
menu.addItem("miscid", "Miscellaneous", "Miscellaneous", null, null);

menu.addSubItem("webmasterid", "Dynamic Drive", "Dynamic Drive", "http://www.dynamicdrive.com/");
menu.addSubItem("webmasterid", "JavaScript Kit", "JavaScript Kit", "http://www.javascriptkit.com/");
menu.addSubItem("webmasterid", "Web Review", "Web Review", "http://www.webreview.com/");
menu.addSubItem("webmasterid", "Freewarejava.com", "Freewarejava.com", "http://www.freewarejava.com/");
menu.addSubItem("webmasterid", "Web Monkey", "Web Monkey", "http://www.webmonkey.com/");
menu.addSubItem("webmasterid", "Host Reach", "Host Reach", "http://www.hostreach.com");

menu.addSubItem("newsid", "CNN", "CNN", "http://www.cnn.com");
menu.addSubItem("newsid", "ABC News", "ABC News", "http://www.abcnews.com");
menu.addSubItem("newsid", "MSNBC", "MSNBC", "http://www.msnbc.com");
menu.addSubItem("newsid", "CBS news", "CBS News", "http://www.cbsnews.com");
menu.addSubItem("newsid", "News.com", "News.com", "http://news.com");
menu.addSubItem("newsid", "Wired News", "Wired News", "http://www.wired.com");
menu.addSubItem("newsid", "TechWeb", "TechWeb", "http://www.techweb.com");

menu.addSubItem("freedownloadid", "Dynamic Drive", "Dynamic Drive", "http://www.dynamicdrive.com/");
menu.addSubItem("freedownloadid", "Download.com", "Download.com", "http://download.com/");
menu.addSubItem("freedownloadid", "Tucows", "Tucows", "http://tucows.com/");

menu.addSubItem("searchengineid", "Yahoo", "Yahoo", "http://www.yahoo.com/");
menu.addSubItem("searchengineid", "Google", "Google", "http://www.google.com/");
menu.addSubItem("searchengineid", "Excite", "Excite", "http://www.excite.com");
menu.addSubItem("searchengineid", "HotBot", "HotBot", "http://www.hotbot.com");

menu.addSubItem("miscid", "Cnet", "Cnet", "http://www.cnet.com/");
menu.addSubItem("miscid", "RealAudio", "RealAudio", "http://www.realaudio.com/");
menu.addSubItem("miscid", "MP3.com", "MP3.com", "http://www.mp3.com/");

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

**.holger** · 25-01-2003 11:30

Ein Link hätte gereicht!

**snake14** · 25-01-2003 11:50

sorry, ich kenn mich halt net so aus...

**kasimir83** · 25-01-2003 13:16

*hochundheiligversprechheuteabendzuerbeiten*

**snake14** · 25-01-2003 13:36

danke schon mal im voraus!
by snake

**kasimir83** · 25-01-2003 16:08

function UpdateIt(){ /*
if (ie&&keepstatic&&!opr6)
document.all["MainTable"].style.top = document.body.scrollTop;
setTimeout("UpdateIt()", 200);
}
UpdateIt(); */ }

Das ist das allerletzte und tackert fest. Wenn du's so klammerst hast du's später noch verfügbar, ansonsten lösche alles was im Folgenden blau ist:

function UpdateIt(){
if (ie&&keepstatic&&!opr6)
document.all["MainTable"].style.top = document.body.scrollTop;
setTimeout("UpdateIt()", 200);
}
UpdateIt();

Ob das alles ist kann ich dir nicht versprechen, musste halt gucken, unter ie passt's jedenfalls.
Jetzt zur Indexierung...
[edit]
*aufgeb*
womstar? hast du 'ne Idee?
[/edit]

**snake14** · 26-01-2003 14:20

hi, danke mim ie funtzt bei mir auch weist du auch wie ich das teil unter meinen banner setzten kann, ohne das es aufhört zu funzen???
by snake

**kasimir83** · 26-01-2003 14:22

Eben nich'. Schick mal 'ne pm an womstar, der is' da firm, der findet's vielleicht raus.

**womstar** · 26-01-2003 16:19

such dir diese zeile, und änder da den wert der her rot markiert ist.

Code:

//////////////////////////////////////////////////////////////////////////// 
// Function Menu() // 
//////////////////////////////////////////////////////////////////////////// 
rightX = 0; 
function Menu() 
{ 
this.bgColor = menucolor; 
if (ie) this.menuFont = "bold 12px Arial"; 
if (n) this.menuFont = "bold 12px Verdana"; 
this.fontColor = "black"; 

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

this.subMenuPaneWidth = submenuwidth; 

lastMenu = null; 

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

HTMLstr = ""; 
HTMLstr += "<!-- MENU PANE DECLARATION BEGINS -->\n"; 
HTMLstr += "\n"; 
if (ie||ns6) HTMLstr += "<div id='MainTable' style='position:relative;top:40'>\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> "; 
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||ns6) HTMLstr+= "</div>\n"; 
// if (n) HTMLstr+= "</layer>\n"; 
HTMLstr += "<!-- MENU PANE DECALARATION ENDS -->\n"; 
}

Thema: dropdown menü

LinkBack

Themen-Optionen

Anzeige

dropdown menü

Empfehlenswerte Literatur von unserem Partner Terrashop

Lesezeichen

Lesezeichen

Berechtigungen