Pulldown-Menü Deluxe (JS/DOM)

[fusion]

sry muss aber eintrag mal nach oben schieben so, sonst guckt sich den keiner an, ich loesche diesen post sobald wieder geantwortet wird ;D

[seb]

@fusion
Sorry, ich versteh die Frage nicht. Beschreib das Problem bitte nochmal etwas genauer.

Und danke für das Lob


Und @Jürgen:

wer weiß, vielleicht bleibst du ja dabei. Die meisten anderen Jobs sind ja langweilig

Ich stell's mir als Nebenjob während dem Studium sehr geeignet vor, aber als 'richtigen' Beruf will ich was anderes machen, glaub ich. Auch wenn ich da eigentlich noch garkeinen ernsthaften Plan hab .

[fusion]

also pass auf, ich moechte das menü zentriert haben also nicht am rand sondern immer mitten auf der page. Nun ist das problem mit dem aufrufen der menüpanels dieses, dass sie nicht unter den "auslöselinks" stehen sondern am rand oder sonstwo (das mit dem offset ... - x oder so angegeben wurde, das kann man aber nicht ohne weiteres anpassen, da die browsergroessen unterschiedlich sind

also kurz gesagt, die menüs stehen nicht unter den links um sie zu öffnen und das variiert noch mit den browsergrössen

ich hoffe es war verständlich

[fusion]

ahh ich verstehe der versteht das offset im bezug auf das div aber der muss es im bezug auf die ganze page sehen ... wie mache ich das ohne das div zu loeschen, weil es sonst ja mit dem design etc nicht klappt ... ;(

GESCHAFFORT ;D

<div id="mainmenu" style="margin:0 auto;">
<a href="#" onmouseover="pdm_main_object.show(mainmenu.offsetLeft + this.offsetLeft - 6, mainmenu.offsetTop + 21);">Objekt</a> |
<a href="#" onmouseover="pdm_main_edit.show(mainmenu.offsetLeft + this.offsetLeft - 6, mainmenu.offsetTop + 21);">Bearbeiten</a> |
<a href="#" onmouseover="pdm_main_view.show(mainmenu.offsetLeft + this.offsetLeft - 6, mainmenu.offsetTop + 21);">Ansicht</a> |
<a href="#" onmouseover="pdm_main_system.show(mainmenu.offsetLeft + this.offsetLeft - 6, mainmenu.offsetTop + 21);">System</a> |
<a href="#" onmouseover="pdm_main_links.show(mainmenu.offsetLeft + this.offsetLeft - 6, mainmenu.offsetTop + 21);">Links</a> |
<a href="#" onmouseover="menu1.show(mainmenu.offsetLeft + this.offsetLeft - 6, mainmenu.offsetTop + 21);">Links</a> |
</div> 

[seb]

Wieso baust Du da dieses mainmenu.offsetLeft mit rein?

Wenn du nur this.offsetLeft verwendest, gehen die Menüs immer unter den Links auf, auch wenn die zentriert sind oder sich sonstwie beim Ändern der Fenstergröße verschieben.

[fusion]

nope halt nicht, das ist ja das problem ... weil pass auf der bezieht das left offset etc auf das DIV element drumrum

aber es muss auffe ganze page bezogen sein ... probiers aus dann wirstes sehen

[seb]

Ich hab getestet - folgende beide Sachen funktionieren bei mir sowohl im IE als auch in Mozilla einwandfrei:

<div id="mainmenu" style="text-align:center;">
<a href="#" onmouseover="pdm_main_object.show(this.offsetLeft, this.offsetTop + 24);">Objekt</a><a href="#" onmouseover="pdm_main_edit.show(this.offsetLeft, this.offsetTop + 24);">Bearbeiten</a><a href="#" onmouseover="pdm_main_view.show(this.offsetLeft, this.offsetTop + 24);">Ansicht</a>
</div>


und

<center>
<a href="#" onmouseover="pdm_main_object.show(this.offsetLeft, this.offsetTop + 24);">Objekt</a><a href="#" onmouseover="pdm_main_edit.show(this.offsetLeft, this.offsetTop + 24);">Bearbeiten</a><a href="#" onmouseover="pdm_main_view.show(this.offsetLeft, this.offsetTop + 24);">Ansicht</a>
</center> 

[NadineBlabla]

test (sorry)

[fusion]

aber nu hobsch noch nen problem ;( wenn ich ein optionsfeld habe, dann liegt das vor dem menü und wird nicht ueberdeckt ;(

wie bekomme ich das weg???

[seb]

Das hatten wir schonmal. Schau mal weiter vorne im Thread.

[fusion]

jo hobs gefunden *arg* naja ich loese das geschickt ^^ hehe

[Carsten25]

Hallo,

erstmal ein dickes lob an den Programmierer. Nach langer suche habe ich endlich dieses perfekte script gefunden.

Habe nur noch ein kleines Problemchen:
Ich habe die Haupttabelle der Seite im Fenster zentriert. Nun verschiebt sich die Menütabelle bei unterschiedlicher Auflösung des Users weil sich ja das Script an dem Fensterrand orientiert.

Kann man das noch irgendwie optimieren?

Gruß
Carsten

[Carsten25]

Hallo,

noch ein kleines style Problem. Der hover effekt wird ja über java gesteuert. Wenn sich das Menü das erste mal öffnet wird der Style nicht ausführt. Erst nach dem ich einmal über den link gefahren bin. Also wenn der Befehl onmouseout kommt.

 html_output += '<tr onclick="' + onclick + '" onmouseover="this.className=\'pdm_item_hover\';' + onmouseover + '" onmouseout="this.className=\'pdm_item\'">'; 

Der Style wird also nur bei einem Mouseover oder out berücksichtigt. Ich habe den Stylevorlage aus dem Forum genommen. Was mache ich falsch?

[seb]

Der Hover-Style ist ja auch dafür gedacht, nur bei onmouseover angewent zu werden (ansonsten wär's ja nicht der Style für hover...).

Die inaktiven Menüeinträge werden über

tr.pdm_item

formatiert.


Und die Frage zur Positionierung versteh ich nicht (bzw. verstehe ich die Frage schon, aber nicht, wieso du damit Probleme hast).

Weiter vorne hatte schonmal jemand von Problemen mit der Positionierung berichtet, wenn das Menü dynamisch im Browserfenster zentriert wird. In meinen Tests hat das problemlos funktioniert.

[Carsten25]

Hallo Seb,

erstmal vielen Dank für Deine Antwort. Ich habe mir die vorigen Beiträge wirklich genau durchgelesen und konnte das problemchen mit dem verschobenen Menü nicht lösen.

Die Haupttabelle (768px breit) habe ich mit dem Attribut align=center in der Mitte des Bildschirmes zentriert.

<table cellspacing="1" cellpadding="0" border="0" align="center" bgcolor="#68904D"> ...

Wenn ich jetzt die Position des Menüs so

<a href="dienstleistungen.html" class="nav" onmouseover="pdm_main_1.show(this.offsetLeft +100, this.offsetTop + 145);">Dienstleistungen</a>

nach einer Auflösung von 1024x768px positioniere, verschiebt sich das Menü natürlich bei einer 800x600px Auflösung entsprechend. Ist ja logisch da sich ja der Abstand zwichen Tabellenrand zum linken Fensterrand veringert.

Zu meinem Style Problem mal ein Screenshot:


Und hier mein css style:

div.pdm_panel
{
    background-color:#FFFFFF;
    border:1px solid #68904D;
    cursor:hand;
    font:bold 11px verdana,arial;
    color:#68904D;
    -moz-opacity:0.9;
}

div.pdm_panel td.pdm_col_caption
{
    padding:3px;
}

tr.pdm_item
{
    background-color:transparent;
    color:#68904D;
    font: bold 11px verdana;
}

tr.pdm_item_hover
{
    background-color:#E9EEE6;
    color:#FFA000;
    font: bold 11px verdana;
}


div.pdm_panel td.pdm_col_icon
{
    display:none;
}

Es ist so das die Links beim öffnen des Menüs nicht formatiert sind. Erst beim einem mouseout werden werden Sie nach pdm_item formartiert. Man muss aber mindestens einmal über den Link fahren. Jetzt habe ich da schon etwas an der style definition herumtegetüfftelt, bin aber nicht wirklich weitergekommen. Dieses Problem kommt im IE sowie im Netscape (7) vor.

Dann habe ich mir den code in der pulldownmenu.js angeschaut:

html_output += '<tr onclick="' + onclick + '" onmouseover="this.className=\'pdm_item_hover\';' + onmouseover + '" onmouseout="this.className=\'pdm_item\'">';

Wenn ich das richtig verstanden habe wird der Zelle nur ein Style zugewiesen wenn ein mousehandler ausgeführt wurde.

Korrigiere mich bitte wenn irgend etwas falsch gemacht habe. Wäre super wenn du mir helfen könntes.

Ansonsten ist das wirklich ein gelungenes script, und es wäre super wenn man das weiter entwickeln würde. Ich habe lange nach so etwas gesucht und habe mir schon einige andere Scripts angesehen. Es war nur etwas schwer zu finden. Vielleicht sollte man eine eigene Seite dafür erstellen.

Gruß
Carsten