Menü mit zwei Ebenen

  • Ralf112 Ralf112
    Typ im Roten Hemd
    0 x
    3 Beiträge
    0 Hilfreiche Beiträge
    18. 10. 2011, 14:39

    Hallo liebe Gemeinschaft.
    ich bin dabei eine Dropline-Navi zu entablieren und möchte, dass sich die erste Ebene so verhält als wäre es ein Link auf die Unterseite aber beim Klicken auf den Link das Ziel ins lehre läuft. z. B. wenn man in html <a href="#"> eingibt.
    Der Grund ist der, dass die Navi das Dropline onClick ausfährt. Ist doof, wenn dann sofort die andere Seite erscheint.

    1. 10.marks{
    2. NAVI = HMENU
    3. NAVI {
    4. special = directory
    5. special.value = 167
    6. entryLevel = 1
    7.  
    8. ### Erste Ebene ###
    9.  
    10. 1 = TMENU
    11. 1 {
    12. wrap = <ul id=\"dropline\">|</ul>
    13. expAll = 1
    14. noBlur = 1
    15. NO.wrapItemAndSub = <li tabindex=\"1\">|</li>
    16.  
    17. }


  • 1
  • jazbo jazbo
    Padawan
    0 x
    33 Beiträge
    0 Hilfreiche Beiträge
    18. 10. 2011, 18:55

    Hallo Ralf112,

    1. NO.doNotLinkIt = 1

    Das verhindert, das Menupunkte verlinkt werden.
    Einfach in der Ebene 2 angeben.
    (Wie der Name schon sagt)

    gruß

    jazbo

  • Chrissli Chrissli
    Jedi-General
    0 x
    1015 Beiträge
    28 Hilfreiche Beiträge
    18. 10. 2011, 21:37

    Ohne mich einmischen zu wollen, aber ich denke du solltst das in der ersten Ebene mit eintragen :-)

    1. 1 = TMENU
    2. 1 {
    3. doNotLinkIt = 1
    4. wrap = <ul id=\"dropline\">|</ul>
    5. expAll = 1
    6. noBlur = 1
    7. NO.wrapItemAndSub = <li tabindex=\"1\">|</li>
    8.  
    9. }

    Im übrigen kannst du mit

    1. 1.NO.ATagParams = onclick="jsTuWas()"

    auch die onclick-Funkton o.ä. festleen, falls
    das nötig sein sollte.

    Ich empfehle dir aber aus Gründen der Barrierefreiheit
    eine Fallback-Lösung parat zu halten für Menschen ohne Javascript
    ( ja, sowas gibts auch noch )

    God's in his heaven, all's right with the world

  • Ralf112 Ralf112
    Typ im Roten Hemd
    0 x
    3 Beiträge
    0 Hilfreiche Beiträge
    20. 10. 2011, 09:22

    Hallo Chrissli und jazbo,

    erst mal vielen Dank für eure schnelle Antworten.

    Das Problem mit dem doNotLinkIt =1 ist, dass es den a-tag komplett entfernt. Ich bin in meinem CSS aber darauf angewiesen, sonst klappt der meine zweite Ebene nicht mehr aus.
    Ich hänge mal das CSS an:

    1. html {-webkit-animation: safariSelectorFix infinite 1s;}
    2. @-webkit-keyframes safariSelectorFix {
    3. 0% {zoom:1;}
    4. 100% {zoom:1;}
    5. }
    6.  
    7. body, #dropline a,
    8. html {behavior:url(click-dropline/trigger.htc)}
    9.  
    10. #dropline {height:35px; position:relative; text-align:center; width:850px; margin:0 auto; z-index:100; font-family:arial, sans-serif; font-size:12px; position:relative; background:#069;
    11. -ms-border-radius: 35px 25px 0 0;
    12. -moz-border-radius: 35px 35px 0 0;
    13. border-radius: 35px 35px 0 0;
    14. -webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.5)), to(transparent));
    15. }
    16. #dropline, #dropline ul {padding:0; margin:0; list-style:none;}
    17. #dropline li {display:inline;}
    18. #dropline li a {display:inline-block; line-height:35px; padding:0 20px; background:#069; color:#fff; text-decoration:none; font-weight:bold;
    19. -ms-border-radius: 35px 35px 0 0;
    20. -moz-border-radius: 35px 35px 0 0;
    21. border-radius: 35px 35px 0 0;
    22. }
    23. #dropline ul {position:absolute; left:-9999px; width:850px; top:35px; text-align:center; height:35px; background:#69c; display:inline-block;
    24. -ms-border-radius: 0 0 35px 35px;
    25. -moz-border-radius: 0 0 35px 35px;
    26. border-radius: 0 0 35px 35px;
    27. -webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.5)), to(transparent));
    28. }
    29. #dropline ul li a {background:#69c;
    30. -ms-border-radius: 35px 35px 0 0;
    31. -moz-border-radius: 35px 35px 0 0;
    32. border-radius: 35px 35px 0 0;
    33. }
    34.  
    35. #dropline ul li a:hover {background:#7ad;}
    36.  
    37. #dropline li a:active {outline:none; background:#69c;}
    38. #dropline li a:active + ul {left:0; border:0;}
    39.  
    40. #dropline a:focus {outline:0; background:#69c;}
    41. #dropline a:focus + ul {left:0;}
    42. #dropline ul:hover {left:0;}vHolder {position:relative; width:850px; height:50px; overflow:hidden; background:url(images/back.gif); background-repeat: repeat-x; z-index:100; backgroundcolor: #fff;}

    Mit klick auf den link wird das Untermenu ausgeklappt. Vieleicht gibt es hierfür ja auch eine CSS-Lösung.

    Nochmals vielen Dank für eure Hilfe

  • 1