nicht angemeldet
Navigation und andere Spielereien
Hallöchen allerseits,
ich hätte da gerne mal'n Problem: 'n "Kunde" will so'n Navigations-Menue haben wo, wenn man mit der Maus über die einzelnen Menue-Punkte fährt, sich noch ein Unter-Menue auftut. So weit hab ich's auch schon (um ehrlich zu sein, ich hab's auch auf einer der zahlreichen JS-Seiten "geklaut").
Aber jetzt zum eigentlichen Problem: Das Ganze ist in einem Frame aufgebaut. Gehe ich nun mit der Maus über einen der Menue-Punkte, tut sich auch ein Unterverzeichnis auf, nur irgendwie hinter dem Main-Frame, sprich man kann das Unterverzeichnis nicht wirklich sehen.
Frage 1: Wie bekomme ich das Menue in den Vordergrund? Frage 2: Wie bekomme ich das JS dazu bewegt die gewünschten Seiten im Main-Frame zu öffnen?
[JS und ich sind wie der Teufel und das Weihwasser]
<html> <head> <title>Menü</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <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"> 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> </head> <body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" bgcolor="#000000" onload="self.focus();"> <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";}
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 += "<!-- MENU PANE DECLARATION BEGINS -->\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 += "<!-- 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"; }
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 += "| "; 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 += "<!-- END OF ITEM "+idItem+" -->\n\n"; MENUitem += "<!-- MAIN_MENU -->\n";
HTMLstr = HTMLstr.replace("<!-- MAIN_MENU -->\n", MENUitem); }
function addSubItem(idParent, text, hint, 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||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 += "<!-- 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><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(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&&!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("homeid", "Home", "Home", "main.htm"); menu.addItem("nsstrukturenid", "NS-Strukturen", "NS-Strukturen", null, null); menu.addItem("nazipropagandaid", "Nazi-Probaganda", "Nazi-Propaganda", "nspropaganda.htm"); menu.addItem("widerstandid", "Der Widerstand", "Der Widerstand", "widerstand.htm"); menu.addItem("schulwesenid", "Schulwesen", "Schulwesen", null, null); menu.addItem("heimatmuseumid", "Heimatmuseum", "Heimatmuseum", "heimatmuseum.htm"); menu.addItem("arbeitslagerid", "Arbeitslager", "Arbeitslager", "arbeitslager.htm"); menu.addItem("judenverfolgungid", "Judenverfolgung", "Judenverfolgung", null, null);
menu.addSubItem("nsstrukturenid", "Organisationen", "Organisationen", "organisationen.htm"); menu.addSubItem("nsstrukturenid", "Personen", "Personen", "personen.htm"); menu.addSubItem("nsstrukturenid", "Örtlichkeiten", "Örtlichkeiten", "oertlichkeiten.htm");
menu.addSubItem("schulwesenid", "Überblick", "Überblick", "ueberblick.htm"); menu.addSubItem("schulwesenid", "Veränderung", "Veränderung", "veraenderung.htm"); menu.addSubItem("schulwesenid", "Schul-Propaganda", "Schul-Propaganda", "schulpropaganda.htm"); menu.addSubItem("schulwesenid", "Hitler-Jugend", "Hitler-Jugend", "hitlerjugend.htm"); menu.addSubItem("schulwesenid", "Kriegsauswirkungen", "Kriegsauswirkungen", "kriegsauswirkungen.htm");
menu.addSubItem("judenverfolgungid", "Progrom", "Progrom", "progrom.htm"); menu.addSubItem("judenverfolgungid", "Plünderungen", "Plünderungen", "pluenderung.htm"); menu.addSubItem("judenverfolgungid", "Synagogenbrand", "Synagogenbrand", "synagogenbrand.htm"); menu.addSubItem("judenverfolgungid", "jüdische Familien", "jüdische Familien", "juedischefamilien.htm");
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> </body> </html>
Gruß aus Ddorf
Stefan D.
-
Hallöchen allerseits,
ich hätte da gerne mal'n Problem: 'n "Kunde" will so'n Navigations-Menue haben wo, wenn man mit der Maus über die einzelnen Menue-Punkte fährt, sich noch ein Unter-Menue auftut. So weit hab ich's auch schon (um ehrlich zu sein, ich hab's auch auf einer der zahlreichen JS-Seiten "geklaut").
Aber jetzt zum eigentlichen Problem: Das Ganze ist in einem Frame aufgebaut. Gehe ich nun mit der Maus über einen der Menue-Punkte, tut sich auch ein Unterverzeichnis auf, nur irgendwie _hinter_ dem Main-Frame, sprich man kann das Unterverzeichnis nicht wirklich sehen.
Frage 1: Wie bekomme ich das Menue in den Vordergrund?
Frage 2: Wie bekomme ich das JS dazu bewegt die gewünschten Seiten im Main-Frame zu öffnen?Frage 1: diese Frage wird momentan mehrmals täglich gestellt. Es geht nicht, bzw, es würde mit einem extremen Aufwand gehen, bei dem dein skript feststellen muss wieviel verdeckt ist und diesen Teil in dem anderen Frame anzeigen an genau der gleichen Stelle, aber dann musst du die Mausevents zusätzlich dopppelt und dreifach abfragen.
Frage2 ist einfach, indem du das Frame als Ziel angibst.
Alles in allen sind solche Menüs albern. Bau eine sinnvolle Verzeichnissstruktur der Seiten und der Surfer freut sich, denn er kann evtl. inntuitiv erkennen wie er durch deine Seite navigiert und bei einem Besuch vielleicht sogar die richitge URL eintippen, das ruft mehr Erfolgserlebnisse herrvor. Im Gegensatz zu nur ab und an funktionierenden Menüs, die zusätzlich den Surfer zwingen alle Links einer Seite immer zu laden. Es macht keinen Sinn auf HTML Seiten ein Menü einer Anwendung (wie du sie von windows kennst) nachbauen zu wollen, es sei denn die Seite hat nichts anderes zu bieten, dann kann ein schönes buntes Menü natürlich viel hermachen.
Struppi.
-
'nabend,
Frage 1: diese Frage wird momentan mehrmals täglich gestellt. Es geht nicht, bzw, es würde mit einem extremen Aufwand gehen, bei dem dein skript feststellen muss wieviel verdeckt ist und diesen Teil in dem anderen Frame anzeigen an genau der gleichen Stelle, aber dann musst du die Mausevents zusätzlich dopppelt und dreifach abfragen.
Hmpf, war mir so nicht bewusst. Ich würde es ja auch gerne ohne Frame machen, aber da ich für den "Kunden" für lau arbeite mache ich mir da auch keinen großen Kopf drum ...
Frage2 ist einfach, indem du das Frame als Ziel angibst
Die Frage stellt sich für mich _wo_ ich das angeb ...
Alles in allen sind solche Menüs albern. Bau eine sinnvolle Verzeichnissstruktur der Seiten und der Surfer freut sich, denn er kann evtl. inntuitiv erkennen wie er durch deine Seite navigiert und bei einem Besuch vielleicht sogar die richitge URL eintippen, das ruft mehr Erfolgserlebnisse herrvor. Im Gegensatz zu nur ab und an funktionierenden Menüs, die zusätzlich den Surfer zwingen alle Links einer Seite immer zu laden. Es macht keinen Sinn auf HTML Seiten ein Menü einer Anwendung (wie du sie von windows kennst) nachbauen zu wollen, es sei denn die Seite hat nichts anderes zu bieten, dann kann ein schönes buntes Menü natürlich viel hermachen.
Eine "sinnvolle" Verzeichnis-Struktur nützt nichts gegen den dümmsten User. Ich probiere mich zum ersten mal mit so einem Menue und ich muss sagen das ich mich als User damit anfreunden könnte. Was eine Seite zu bieten hat ist relativ, weil es kommt auf die Interessen des Autors und der Zielgruppe an.
Trotzdem danke & Gruß aus Ddorf
Stfan D.
-
-
Die ienzige Stelle, die ich beim überfliegen gefunden habe (und das skript sieht danch aus als ob es ganz miesen HTML Code erzeugt) wo ein Link steht ist hier:
MENUitem += "<ilayer name="+idItem+">";
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover="displaySubMenu('"+idItem+"')" onclick="return false;">";Das onclick ist reichlich überflüssig, aber da könntest du das Target einfügen.
Trotz allem wirst du durch dieses "Menü" mehr Besucher verlieren als das Besucher sich darüber freuen werden. Der dümmste User wird eher erschlagen durch ein Angebot, bei dem er oftmals nicht weiss was dahinter steckt. Du musst dir vorstellen, das 99% deiner Besucher nicht Wissen was deine Seite bietet und sie können dann mit dem Menü nur relativ etwas anfangen, das sie nicht dein Wissen über die Seite haben und es auch nicht wissen wollen. Sie finden z.b. über eine Suchmaschine deine Seite und dann steht oben sowas wie: "http://domain.de/guckmal/hier_ist_viel_los/der_hammmer" und in deinem Fall auch noch ohne Frameset. was machst du dann? dann schneid ich mal das letzte Wort weg (wenn mich die Seite interessiert) und dort erwarte ich eine Erklärung darüber was in "hier_ist_viel_los" noch geboten wird. Bei dir muss ich mir mühevoll jede information erarbeiten. Wo ist das Menü? Was beudeuten all diese Links (auch wenn sie vielsagend sein können). usw.
Naja, ich red mir den Mund fusselig. liegt wohl daran, das ich immer weniger Seiten finde die benutzbar sind (im Sinne von: da finde ich was ich Wissen will, ohne mich mit Browserabstürzen und ähnlichen rumplagen zu müssen)
Struppi.
-
und das skript sieht danch aus als ob es ganz miesen HTML Code erzeugt
wie schon gesagt: JS und ich sind wie Teufel und Weihwasser ...
MENUitem += "<ilayer name="+idItem+">";
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover="displaySubMenu('"+idItem+"')" onclick="return false;">";Das onclick ist reichlich überflüssig, aber da könntest du das Target einfügen.
also soll heißen
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover="displaySubMenu('"+idItem+"')" target="mainFrame">";
???
Trotz allem wirst du durch dieses "Menü" mehr Besucher verlieren als das Besucher sich darüber freuen werden. Der dümmste User wird eher erschlagen durch ein Angebot, bei dem er oftmals nicht weiss was dahinter steckt. Du musst dir vorstellen, das 99% deiner Besucher nicht Wissen was deine Seite bietet und sie können dann mit dem Menü nur relativ etwas anfangen, das sie nicht dein Wissen über die Seite haben und es auch nicht wissen wollen. Sie finden z.b. über eine Suchmaschine deine Seite und dann steht oben sowas wie: "http://domain.de/guckmal/hier_ist_viel_los/der_hammmer" und in deinem Fall auch noch ohne Frameset. was machst du dann? dann schneid ich mal das letzte Wort weg (wenn mich die Seite interessiert) und dort erwarte ich eine Erklärung darüber was in "hier_ist_viel_los" noch geboten wird. Bei dir muss ich mir mühevoll jede information erarbeiten. Wo ist das Menü? Was beudeuten all diese Links (auch wenn sie vielsagend sein können). usw.
Um ehrlich zu sein ist's mir bei dem Projekt egal wie viele Leute die Seite besuchen - ich soll nur das Menue nach dargestellten Anforderungen machen. Die Variante ohne Frames hab ich ja schon angesprochen, aber auf mich hört ja keiner ...
Naja, ich red mir den Mund fusselig. liegt wohl daran, das ich immer weniger Seiten finde die benutzbar sind (im Sinne von: da finde ich was ich Wissen will, ohne mich mit Browserabstürzen und ähnlichen rumplagen zu müssen)
Ich kann nix dafür, ich halte mich an die Forgaben ...
Gruß
Stefan
PS: Trotzdem Danke das Du mir ein bißchen weiter hilfst ...
-
und das skript sieht danch aus als ob es ganz miesen HTML Code erzeugt
wie schon gesagt: JS und ich sind wie Teufel und Weihwasser ...
MENUitem += "<ilayer name="+idItem+">";
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover="displaySubMenu('"+idItem+"')" onclick="return false;">";Das onclick ist reichlich überflüssig, aber da könntest du das Target einfügen.
also soll heißen
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover="displaySubMenu('"+idItem+"')" target="mainFrame">";
???
Vermutlich, wie gesagt, der Code ist nicht so toll leserlich und das in ein Testcase zu bringen fehlt mir die Lust.
PS: Trotzdem Danke das Du mir ein bißchen weiter hilfst ...
Ist leider ein Thema was mich auch interssiert (leider, weil ich die Seite nicht nutzen können werd)
Struppi.
-
Ist leider ein Thema was mich auch interssiert (leider, weil ich die Seite nicht nutzen können werd)
Naja, ich schau mal was ich den Leute noch für Alternativen bieten werde. Aber was für einen Browser nutzt Du? Unter IE 6 und Mozilla 1.3b funktioniert das Menue (alleine).
Weil Dich das Thema wohl interessiert: Wenn die Seite fertig ist bzw. die ersten Gehversuche online sind geb ich Dir bescheid.
-
Ist leider ein Thema was mich auch interssiert (leider, weil ich die Seite nicht nutzen können werd)
Naja, ich schau mal was ich den Leute noch für Alternativen bieten werde. Aber was für einen Browser nutzt Du? Unter IE 6 und Mozilla 1.3b funktioniert das Menue (alleine).
hehe, IE 4.0 - Mein Rechner ist nicht auf der Höher der Zeit (was sich aber hoffentlich bald ändert). Bis vor kurzem hab ich auch noch Netscape 3.01 benutzt. Man muss den Webmaster auch alternativen bieten ;-)
Struppi.
-
-
-
-