1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Popupmenü mit platzierten Grafiken

Dieses Thema im Forum "Javascript & Ajax" wurde erstellt von L-u-z-i-f-e-r, 27. August 2005.

  1. L-u-z-i-f-e-r

    L-u-z-i-f-e-r Grünschnabel

    Hi Leutz

    Ich habe folgendes Problem: Ich möchte (wie so viele andere) ein Menü. ich habe auch schon die Boardsuche ausgiebig befragt und auch augenscheinlich ne ganze Menge gefunden. Doch eine Frage bleibt leider ungeklärt. Ich habe u.a. diese beiden bsps gefunden:

    http://www.tutorials.de/tutorials132324.html
    http://www.tutorials.de/tutorials24983.html

    die sind schon sehr gut, da die Eventhandler hier direkt in den Tags sind, und man sie daher relativ leicht durch andere Tags z.b. für Grafiken austauschen kann.

    Nun möchte ich aber, dass direkt rechts neben meinem Hauptpunkt mein 1. Unterpunkt erschein, alle weiteren Unterpunkte dann darunter; der 1. Unterpunkt der 2. Menüunterebene soll dann wieder neben dem Übergeordneten Punkt erscheinen.
    Ich habe auch gelesen, dass man sowas mit Dreamweaver machen kann (sofern man die Kenntnisse hat) und genau da hapert es, denn ich benutze fast nur AdobeGoLive, habe also wenig Erfahrung mit dem Dw
  2. con-f-use

    con-f-use Erfahrenes Mitglied

    http://www.tutorials.de/tutorials215197.html

    Damit wollte Sven sagen, dass wir nicht der Weihnachtsmann sind, dem die Elfen die Wunschzettelchen der Kinder bringen und der sie dann abarbeitet.

    Wir helfen dir gerne wenn du ein konkretes Problem hast oder bei deinen Bemühungen auf einen Fehler stößt, den du dir nicht erklären kannst, aber wir schreiben nicht das Script für dich.

    Rein vom Prinzip her bastelst du dein gesamtes Menü erstmal mit HTML und CSS, so als wären allen Unterpunkte ständig sichtbar. Mit JavaScript machst du sie dann über document.getElementById('idDesElements').style.display = 'none' bzw. 'block' in winwm onMouseover, onMouseout oder onclick-Even sichtbar bzw. unsichtbar. Das ist alles, den Rest kannst du mit HTML und CSS machen - du brauchst also nur minimale JavaScript Kenntnisse. Onmouseover Menüs lassen sich sogar nur mit CSS realisieren.
  3. L-u-z-i-f-e-r

    L-u-z-i-f-e-r Grünschnabel

    ja das verstehe ich, aber ich bin so verzweifelt, weil ich schon seit 14 stunden nach einer lösung suche...... (ich weiß ich sollte mal ne pause machen... )

    ok, lange rede kurzer sinn, jetzt hab ich ein konkretes prob: es geht um diesen code:

    http://www.tutorials.de/tutorials132324.html

    da steht folgendes:
    Code (Text):
    1. function menu( mid, mdepht) {      
    2.        if (mstat[mdepht] == undefined) {
    3.            mstat[mdepht] = "";
    4.        }
    5.        if (mstat[mdepht] != "" && mstat[mdepht] != mid) {
    6.            window.document.getElementById(mstat[mdepht]).style.display = "none";
    7.        }
    8.        if (mstat[mdepht] != mid) {
    9.            window.document.getElementById(mid).style.display = "block";
    10.            window.document.getElementById(mid).style.paddingLeft = mdepht * 10;
    11.            mstat[mdepht] = mid;
    12.        } else {
    13.            window.document.getElementById(mid).style.display = "none";
    14.            mstat[mdepht] = "";
    15.        }
    16.    }
    da wird nun das Element unsichtbar gemacht, aber nur wenn "mstat[mdepht] != mid" das wiederrum ist aber nur der Fall wenn das Element sowie schon unsichtbar ist!?
  4. L-u-z-i-f-e-r

    L-u-z-i-f-e-r Grünschnabel

    ok das obenliegende problem habe ich soweit gelöst

    nun aber noch was anderes: warum wird diese abfrage nie true?

    Code (Text):
    1. if (mstat[mdepht] == 1)
    ich habs auch schon mit

    Code (Text):
    1. if (parseInt(mstat[mdepht]) == 1)
    versucht.....

    im prinzip ja eine einfache Abfrage, und theoretisch müsste der Wert ja auch 1 sein, denn den bekommt er ja schon im Funktionsaufruf, und wird dann ja auch nicht verändert........

    ps. ich möchte die oben genannte zeile zwischen der 9. und 10. zeile einfügen, also hier:

    Code (Text):
    1.  
    2. if (mstat[mdepht] != mid) {
    3.         window.document.getElementById(mid).style.display = "block";
    4.             if (parseInt(mstat[mdepht]) == 1) {
    5.             window.document.getElementById(mid).style.paddingLeft = mdepht * 10;
    6.             }
    7.         mstat[mdepht] = mid;
    8.  
  5. con-f-use

    con-f-use Erfahrenes Mitglied

    Nö, das ist der Fall, wenn es sichtbar ist - da steht ein ungleich. Am Anfang ist es unsichtbar. Dann wird die funktion per Click aufgerufen und die erste if-Bedingung trifft zu, also wird mstat[mdepht]="" die zweite if-Bedinung trifft damit nicht mehr zu, dafür aber die dritte, die das ganze sichtbar macht und mstat[mdepht]=mid setzt. Beim nächsten mal trifft dann due dritte nicht mehr zu und die else-Anweisungen werden ausgeführt, so dass es bei nächsten Mal wieder zutrifft usw.
  6. con-f-use

    con-f-use Erfahrenes Mitglied

    Ah, ich sehe schon, du warst 3 min schneller als ich.

    Zu deinem zweiten Problem: mstat[mdepht] wird nie ==1 weil es immer den Wert von mid mitgekommt und der ist nunmal immer "m1", "m2", "m3" usw.
  7. L-u-z-i-f-e-r

    L-u-z-i-f-e-r Grünschnabel

    ja aber das steht doch erst eine zeile weiter unten.....
  8. con-f-use

    con-f-use Erfahrenes Mitglied

    Beim ersten durchlauf existiert mstat[mdepht] nicht und wird deswegen mit
    Code (Text):
    1. [color=#000000][color=#007700]  if ([/color][color=#0000bb]mstat[/color][color=#007700][[/color][color=#0000bb]mdepht[/color][color=#007700]] == [/color][color=#0000bb]undefined[/color][color=#007700]) {
    2.         [/color][color=#0000bb]mstat[/color][color=#007700][[/color][color=#0000bb]mdepht[/color][color=#007700]] = [/color][color=#dd0000]""[/color][color=#007700];
    3.     } [/color][/color]
    initialisiert. Fortan hatt es entweder den Wert "" oder den Wert "m1", "m2" usw. mstat[mdepht] ist ja außerhalb der Variablen initialisiert und exisitiert weiter auch nach verschiedenen onclick-Aufrufen.
  9. L-u-z-i-f-e-r

    L-u-z-i-f-e-r Grünschnabel

    hmm sh%t........ dann funktioniert mein plan nicht.....

    du hast sicherlich schon erkannt, was ich vorhatte: ich wollte das nur eine bestimmt menüebene eingeschoben wird, hast du vllt ne idee wie ich das sonst machen könnte?
    Zuletzt bearbeitet: 27. August 2005
  10. con-f-use

    con-f-use Erfahrenes Mitglied

    Hä? Wieso fragst du dann nicht mid=="m1", =="m2" usw. ab?

    :eek:fftopic: Diese komische zensierfunktion hier im Forum nervt.:rolleyes:
    Zuletzt bearbeitet: 28. August 2005
  11. L-u-z-i-f-e-r

    L-u-z-i-f-e-r Grünschnabel

    tut mir leid, das versteh ich nicht, wie meinst du das genau? also jetzt von der umsetzung her? du willst ja wahrscheinlich darauf hinaus, dass wenn mstat[mdepht] == "m1" ist, die erste ebene offen ist, aber das kann (soweit ich das sehe) aus zwei gründen nicht funktionieren: 1. die if schließt das aus (also die dritte if) und 2. ist das menü ja schon offen in dem durchgang, in dem theoretisch diese abfrage wahr werden würde
  12. L-u-z-i-f-e-r

    L-u-z-i-f-e-r Grünschnabel

    ok auch das habe ich gelöst :D

    Code (Text):
    1.     if (mstat[mdepht] != mid) {
    2.         window.document.getElementById(mid).style.display = "block";
    3.             if (mid == "m1" || "m2" && mid != "mu1" && mid != "mu2") {
    4.             window.document.getElementById(mid).style.paddingLeft = 50;
    5.             }
    6.         mstat[mdepht] = mid;
    7.  
    das einzige problem was mir jetzt noch bleibt, ist das wenn ich menü 1 inklusive untermenüs ausgeklappt habe und dann auf menü2 wechsel oder menü1 einfach so zumache (kurz: wenn ich es irgendwie schließe) und dann wieder öffne sind die untermenüs immer noch offen...... woran liegt das? oder ist das so einfach dass ich das nicht sehe
  13. con-f-use

    con-f-use Erfahrenes Mitglied

    Ich meinte ja, dass du mid abfragst...

    Egal, kannst du mal den gesamten upgedateten Code incl. des HTML-Codes posten - ich verlier so langsam den Überblick... :)

    Wahrscheinlich musst du einfach die Funktion nochmal extra für die Untermenüs aufrufen.
    Zuletzt bearbeitet: 28. August 2005
  14. L-u-z-i-f-e-r

    L-u-z-i-f-e-r Grünschnabel

    klar np

    Code (Text):
    1.  
    2. <html>
    3. <head>
    4. <style type="text/css">
    5. div {
    6.   width: 100px;
    7. }
    8. </style>
    9. <script type="text/javascript">
    10. var mstat = new Array();
    11.  
    12. function menu( mid, mdepht) {
    13.     if (mstat[mdepht] == undefined) {
    14.         mstat[mdepht] = "";
    15.     }
    16.     if (mstat[mdepht] != "" && mstat[mdepht] != mid) {
    17.         window.document.getElementById(mstat[mdepht]).style.display = "none";
    18.     }
    19.     if (mstat[mdepht] != mid) {
    20.         window.document.getElementById(mid).style.display = "block";
    21.             if (mid == "m1" || "m2" && mid != "mu1" && mid != "mu2") {
    22.             window.document.getElementById(mid).style.paddingLeft = 50;
    23.             }
    24.         mstat[mdepht] = mid;
    25.     } else {
    26.         window.document.getElementById(mid).style.display = "none";
    27.         mstat[mdepht] = "";
    28.     }
    29. }
    30. </script>
    31. </head>
    32. <body>
    33.  
    34. <a href="" onClick="menu('m1',1);return false;"><img src="../menu/images/background1.jpg"></a><br>
    35. <div id="m1" style="display:none;">
    36.     <a href="" onClick="menu('mu1',2);return false;">Unterpunkt 1</a><br>
    37.     <div id="mu1" style="display:none;">
    38.         <a href="">bla 1</a><br>
    39.         <a href="">bla 2</a>
    40.     </div>
    41.     <a href="sd">bla h3</a>
    42. </div>
    43. <a href="" onClick="menu('m2',1);return false;"><img src="../menu/images/background2.jpg"></a>
    44. <div id="m2" style="display:none;">
    45.     <a href="" onClick="menu('mu2',2);return false;">Unterpunkt 2</a><br>
    46.     <div id="mu2" style="display:none;">
    47.         <a href="">bla 1</a><br>
    48.         <a href="">bla 2</a><br>
    49.     </div>
    50.     <a href="sd">bla 3</a>
    51. </div>
    52.     </body>
    53. </html>
    54.  
  15. con-f-use

    con-f-use Erfahrenes Mitglied

    Das liegt an der Variablen Belegung - der Zustand (offen oder zu) wird ja im Array mstat für jeden Menüebene gespeichert - eine Unterebene wird aber in der funktion nirgends geschlossen.
  16. L-u-z-i-f-e-r

    L-u-z-i-f-e-r Grünschnabel

    und wie könnte man das machen? also sie schließen?
  17. con-f-use

    con-f-use Erfahrenes Mitglied

    Zum Bleistift so:
    HTML:
    1.    
    2.    <style type="text/css">
    3.    div {
    4.     width: 100px;
    5.    }
    6.    </style>
    7.    
    8.    <script type="text/javascript">
    9.    var mstat = new Array();
    10.    
    11.    function menu(mid, mdepht) {
    12.     var obj = document.getElementById('m'+ mid);
    13.     if (mstat[mdepht] == undefined)
    14.         mstat[mdepht] = "";
    15.     if (mstat[mdepht] != "" && mstat[mdepht] != mid)
    16.         document.getElementById('m'+ mstat[mdepht]).style.display = 'none';
    17.     if (mstat[mdepht] != mid) {
    18.         obj.style.display = 'block';
    19.         if ( uobj = document.getElementById('mu' + mid) ) {
    20.             uobj.style.display = 'none';
    21.             mstat[mdepht+1] = '';
    22.         }
    23.         mstat[mdepht] = mid;
    24.     } else {
    25.         obj.style.display = 'none';
    26.         mstat[mdepht] = '';
    27.     }
    28.    }
    29.    </script>
    30.    
    31.    </head><body>
    32.    
    33.    <a href="" onClick="menu(1,1);return false;"><img src="../menu/images/background1.jpg"></a><br>
    34.    <div id="m1" style="display:none;padding-left:50px">
    35.     <a href="" onClick="menu('u1',2);return false;">Unterpunkt 1</a><br>
    36.     <div id="mu1" style="display:none;">
    37.         <a href="">bla 1</a><br>
    38.         <a href="">bla 2</a>
    39.     </div>
    40.     <a href="sd">bla h3</a>
    41.    </div>
    42.    <a href="" onClick="menu(2,1);return false;"><img src="../menu/images/background2.jpg"></a>
    43.    <div id="m2" style="display:none;padding-left:50px">
    44.     <a href="" onClick="menu('u2',2);return false;">Unterpunkt 2</a><br>
    45.     <div id="mu2" style="display:none;">
    46.         <a href="">bla 1</a><br>
    47.         <a href="">bla 2</a><br>
    48.     </div>
    49.     <a href="sd">bla 3</a>
    50.    </div>
    51.    
    52.    </body></html>
    Zuletzt bearbeitet: 28. August 2005
  18. L-u-z-i-f-e-r

    L-u-z-i-f-e-r Grünschnabel

  19. con-f-use

    con-f-use Erfahrenes Mitglied

  20. L-u-z-i-f-e-r

    L-u-z-i-f-e-r Grünschnabel

    hab ich doch schon längst erledigt :D bin ja ein braver Forenuser ;)

    ist das absicht das du ein/zwei mal uobj geschrieben hast?

Diese Seite empfehlen