verschachteles popupmenu

[John]

hallo erstmal,

also ich haber vor mit javascript ein verschachteltes popupmenu zu erstellen sprich:
mouseover => Menüöffnet sich
im Menü Mouseover => weiteres menü öffnet sich

hab das script für ein einfaches popmenu soweit fertig...
Da ich aber so gut wie garkeine erfahrung mit js habe komm ich nicht wirklich weiter!!!

Danke schonmal...

[Alexander Foken]

Moin Moin !

Ja und? Was ist Dein Problem? Was hast Du bisher versucht? Woran scheiterst Du?

Meine Kristallkugel ist mir gestern abend leider runtergefallen und zerbrochen, Du mußt also mit mehr Informationen rüberkommen, oder warten, bis sie aus der Werkstatt zurückkommt.

Alexander

[John]

Mein hauptproblem is das ich nicht weis was mein problem ist!!!

Ich habe absolut keine Ahnung von js!!!
Habe bisher nur C, VB, SQL und PHP programmiert
naja hier mal mein script:

<script language="JavaScript1.2">
var linkset=new Array()

linkset[0]='<div class="menuitems"><a href="http://www.jswelt.de">RMT</a></div>'
linkset[0]+='<div class="menuitems"><a href="http://forum.jswelt.de">MRO</a></div>'
linkset[0]+='<div class="menuitems"><a href="http://forum.jswelt.de">Collaboration</a></div>'
linkset[0]+='<div class="menuitems"><a href="http://forum.jswelt.de">PDM/PLM</a></div>'
linkset[0]+='<div class="menuitems"><a href="solidwork.html" target="Hauptfenster">CAD</a></div>'
linkset[0]+='<div class="menuitems"><a href="http://forum.jswelt.de">CAD Integration</a></div>'
linkset[0]+='<div class="menuitems"><a href="http://forum.jswelt.de">ERP Integrration</a></div>'

linkset[1]='<div class="menuitems"><a href="http://www.google.de">Product Requirements</a></div>'
linkset[1]+='<div class="menuitems"><a href="http://www.altavista.com">Concept & Design</a></div>'
linkset[1]+='<div class="menuitems"><a href="http://www.altavista.com">Manufacturing Planning</a></div>'
linkset[1]+='<div class="menuitems"><a href="http://www.altavista.com">Production</a></div>'
linkset[1]+='<div class="menuitems"><a href="http://www.altavista.com">Service & Support</a></div>'

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers

function showmenu(e,which){

if (!document.all&&!document.getElementById&&!document.layers)
return

clearhidemenu()

menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=200 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')
menuobj.document.close()
}

menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
eventX=ie4? event.clientX : ns6? e.clientX : e.x
eventY=ie4? event.clientY : ns6? e.clientY : e.y

var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY

if (rightedge<menuobj.contentwidth)

menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else

menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX

if (bottomedge<menuobj.contentheight)
menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
menuobj.thestyle.visibility="visible"
return false
}

function contains_ns6(a, b) {

while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
}

function dynamichide(e){
if (ie4&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
if (ie4||ns6||ns4)
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
else{
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
}

if (ie4||ns6)
document.onclick=hidemenu

</script>

Das script is auch nicht komplett von mir!!!
daher meine probleme,..ich kann mich irgendwie nicht richti reinlesen ins das script!!!

[John]

Des weiteren versuche ich schon ewig rauszufinden wie ich es hinbekomme den popup an einer bestimmten stelle zu platzieren!!!

Zur zeit erscheint es immer abhängig vom stand des mauszeigers (geht mit dem mauszeiger mit)

Ich hätte es aber gerne immer recht neben dem eigentlichen button!

[Alexander Foken]

Moin Moin !

Wenn der Code nicht von Dir ist, frage den Urheber, wie man ihn anpaßt.

Vielleicht findet sich ja jemand, der mal die Javascript-Wüste aus Deinem letzen Posting in die Mangel nimmt. Sauber ist der jedenfalls nicht.

Warum nimmst Du nicht einfach Standard-HTML, um Deine Seiten zu verlinken, das funktioniert immer, sieht oft noch besser aus als ein per JS rangepfuschtes Menü, und wird auch von Suchmaschinen verdaut.

In Sachen Popup: Laß es, jeder haßt Popups. Wenn Du Zusatzinfos anzeigen willst, benutze das TITLE-Attribut.

In Sachen Posting: Gib Dir etwas mehr Mühe beim Schreiben, das spart dem Leser die Mühe, erstmal in Gedanken die Fehler zu verbessern.

Alexander

[wahsaga]

hi,

Mein hauptproblem is das ich nicht weis was mein problem ist!!!
Ich habe absolut keine Ahnung von js!!!

dann lerne es doch langsam, schritt für schritt.
warum trifft man gerade im bereich webdesign immer wieder auf leute, die alles sofort haben wollen, aber anscheinend keine lust haben, die nötige zeit zu investieren, die es braucht sich mal von anfang an und in kleinen schritten an ein thema ranzuwagen, sondern immer gleich sofort das absolute nonplusultra aus dem ärmel schütteln wollen?
ohne fleiss kein preis.

gruss,
wahsaga

[Christian]

Hi,

ich habe da mal so ein Menu angefangen:

http://www.abi01-wrg.de/menu/menu.html

Allerdings ist es noch nicht fertig!

Aber so ein Menu ist echt sehr aufwändig! Ich hab da glaub ca. 2-3 Monate drangesessen. Dafür läufts auch unter Opera 5-7, Netscape 4-7, IE 4-6, Mozilla 1.x, leider nicht gut unter Konqueror.

Dieses Cross-Browser schreiben kostet echt Zeit!

Jedes Menu ist so aufgebaut:

<div style="position: absolute;width:XXpx">
   <div style="position: absolute">
      <div>Menupunkt</div>
   </div>
   <div style="position: absolute">
      <div>Menupunkt2</div>
   </div>
   ...
</div>

Um die untermenus zu positionieren, hab ich die Höhe jedes Menupunkts ermittelt, und solange zusammen addiert (von allen Menupunkten), bis ein Untermenu erscheinen soll. Die top-Position war dann die Höhe der Summe der Menupunkte.

Schwierig wirds dann noch mal wenn man keine bestimmte Breite haben will, sondern die Breite abhängig vom Text haben will. Da sich verschachtelte <div>s in verschiedenen Browsern unterschiedlich verhalten. (was die Breite angeht.)

Beim onmouseover werden alles IDs von den Menus, die geöffnet werden übergeben. Vorher werden alle offenen Menus geschlossen, dann die neuen geöffnet. Der timeout (s.u.) wird gelöscht, damit sich die Menus nicht schließen.

Beim onmouseout wird ein timeout gesetzt der alle Menus nach X sec schließt.

Aber wenn du JS-Anfänger bist, dann ist sowas echt schwer!!!
Wie gesagt ich brauchte für das was du da siehst 2-3 Monate! Und es ist immer noch nicht fertig! Aber es hilft Dir sehr weiter!! Wenn du sowas mal alleine Programmiert hast, hast du ne Menge neue Erfahrung und Wissen!

Und so ein Menu solltest du auch unter allen gängige Browsern testen!

Bis dann
Gruß
Christian