Drop Down Menü im Dreamweaver CS3 ?


  • yannikst
  • 1875 Aufrufe 10 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Drop Down Menü im Dreamweaver CS3 ?

    Hallo Leute !

    Ich schon wieder. Ich suche mich wirklich tot in dem Programm, aber ich finde einfach kein gescheitest Werkzeug. Und zwar möchte ich ein einfaches (evtl. JavaSkript) DropDown Menü im Dreamweaver CS3 erstellen... aber mit welchem Werkzeug mache ich das ? Finde nur dieses Spry Dingens, aber auf sowas möchte ich verzichten, weil dann ActiveX Steuerelemente aktiviert sein müssen !?

    Habe hier mal ein Beispiel gefunden wie ich es mir in etwa vorstelle:

    h**p://www.cssplay.co.uk/menus/variable_dl.html

    Hoffe, es kann mir einer helfen - möglichst ohne dass ich JS Programmierkenntnisse haben muss...
  • Hi,
    ich kann dir nur empfehlen das mittels Listen und CSS zumachen. Somit brauch niemand JavaScript-Kenntnisse (nicht mal der Browser)
    Ein Beispiel (mit Code) gibt es hier: cssmenu: simple dropdown menu using only CSS
    Am besten fügst das im CODE-Fenster ein und editierst dir das nach belieben.

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.
  • Hmm... ok, das sieht schon in etwa gut aus, aber wie bekomme ich das farbig und passend, sprich, dass es nicht so listenmäßig aussieht ?

    Hier noch ein Beispiel:

    h**p://sport.t-online.de/c/12/38/24/10/12382410.html
  • Einfach mit weiteren CSS-Atttributen.
    Hier sind sie alle aufgelistet: CSS 4 You - The Finest in Stylesheets: CSS-Referenz: Eigenschaften von A-Z

    Aber kuck mal hier, das ist doch bestimmt was für dich: CSS Menu Generator :: Webmaster Toolkit

    Gruß
    Broken Sword

    P.S./SPAM
    JUHU 500. Post...
    MUUUTTTIII, kuck mal!!!!
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.
  • So, also ich habe hier mal was nettes gefunden !



    Das funzt so weit eigentlich ganz genau, wie ich es wollte. Aber es gibt ein dickes Problem noch:



    Und zwar, wie kann ich die Abstände der einzelnen Hauptlinks einzeln verändern. Denn wenn ein längerer Link dabei ist, dann sind alle anderen genauso breit und das Menü sieht scheiße aus und wird umgebrochen im Fenster !



    Was kann ich da tun?



    Hier mal der Code:



    CSS:



    Quellcode

    1. <style type="text/css">
    2. ul.examp {margin-left:1em; padding:0; list-style:none; position:absolute; width:90%;}
    3. ul.examp li {float:left; margin:0; padding:0; list-style:none; border:0px; background:#003366; width:250px; padding-left:0px; color:#FFFFFF;}
    4. ul.examp li:hover {background:#003366;}
    5. ul.examp2 {display:none; margin:0; padding:0; list-style:none;}
    6. ul.examp2 li {margin:0; padding:0; list-style:none; border:0;}
    7. ul.examp2 li:hover {margin:0; padding:0; list-style:none; border:0; background:#003366}
    8. .examp li:hover ul.examp2 {display:block;}
    9. ul.examp a:link, ul.examp a:visited {color:#FFFFFF; text-decoration:none; display:block; width:100%;}
    10. ul.examp a:hover, ul.examp a:active, ul.examp a:focus {color:#FFFFFF; text-decoration:none; display:block;}
    11. </style>
    Alles anzeigen








    Liste/Menü:



    Quellcode

    1. <ul class="examp">
    2. <li><a href="#">Startseite</a><ul class="examp2">
    3. <li><a href="#">Link 1</a></li>
    4. <li><a href="#">Link 2</a></li>
    5. <li><a href="#">Link 3</a></li></ul></li>
    6. <li><a href="#">Aktuelles</a><ul class="examp2">
    7. <li><a href="#">Link 1</a></li>
    8. <li><a href="#">Link 2</a></li>
    9. <li><a href="#">Link 3</a></li>
    10. <li><a href="#">Link 4</a></li></ul></li>
    11. <li><a href="#">UND DAS IST SEHR LANG</a><ul class="examp2">
    12. <li><a href="#">Link 1</a></li>
    13. <li><a href="#">Link 2</a></li>
    14. <li><a href="#">Link 3</a></li>
    15. <li><a href="#">Link 4</a></li></ul></li>
    16. <li><a href="#">Über uns</a><ul class="examp2">
    17. <li><a href="#">Link 1</a></li>
    18. <li><a href="#">Link 2</a></li>
    19. <li><a href="#">Link 3</a></li>
    20. <li><a href="#">Link 4</a></li></ul></li>
    21. </ul>
    Alles anzeigen
  • Ähm ... ? Wenn ich ein br-Tag dazwischen schreibe, dann wird doch erst recht ebgebrochen !?

    Ich will einfach nur die Breite der einzelnen Menü-Hauptpunkte (hier Aktuelles etc.) EINZELN anpassen können, damit nicht alle Punkte die Breite des breitesten Element annehmen !
  • Na ich meinte zum Beispiel:

    Quellcode

    1. UND DAS IST<br /> SEHR LANG


    Aber wenn du speziell ein Element editieren willst benutz den style-tag Bsp.

    Quellcode

    1. <ul class="examp">
    2. <li><a href="#">Startseite</a><ul class="examp2">
    3. <li><a href="#">Link 1</a></li>
    4. <li><a href="#">Link 2</a></li>
    5. <li><a href="#">Link 3</a></li></ul></li>
    6. <li><a href="#">Aktuelles</a><ul class="examp2">
    7. <li><a href="#">Link 1</a></li>
    8. <li><a href="#">Link 2</a></li>
    9. <li><a href="#">Link 3</a></li>
    10. <li><a href="#">Link 4</a></li></ul></li>
    11. <li style="width:400px;"><a href="#">UND DAS IST SEHR LANG</a><ul class="examp2">
    12. <li><a href="#">Link 1</a></li>
    13. <li><a href="#">Link 2</a></li>
    14. <li><a href="#">Link 3</a></li>
    15. <li><a href="#">Link 4</a></li></ul></li>
    16. <li><a href="#">Über uns</a><ul class="examp2">
    17. <li><a href="#">Link 1</a></li>
    18. <li><a href="#">Link 2</a></li>
    19. <li><a href="#">Link 3</a></li>
    20. <li><a href="#">Link 4</a></li></ul></li>
    21. </ul>
    Alles anzeigen


    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.
  • @Broken:

    Genau das wollte ich, fettes Dankeschön erst mal, denn wer weiß, was noch so auftaucht :D ! Nee, aber das ist erst mal geil, danke. Ich werde mein Menü jetzt nach den "Vortests" mal aufbauen, wie es letztlich aussehen soll und dann sehe ich weiter !

    //EDIT:

    So, ich hoffe, das liest hier noch jemand (besonders Broken, der weiß ja schon um was es alles geht ! =D

    Und zwar habe ich das Menü jetzt so fertig, genau wie ich es brauche, aber ich kriege es einfach mit keinem Befehl zentriert !!?? Wie kann ich das in der Horizontalen zentrieren ??
  • yannikst schrieb:

    //EDIT:

    So, ich hoffe, das liest hier noch jemand (besonders Broken, der weiß ja schon um was es alles geht ! =D

    Und zwar habe ich das Menü jetzt so fertig, genau wie ich es brauche, aber ich kriege es einfach mit keinem Befehl zentriert !!?? Wie kann ich das in der Horizontalen zentrieren ??

    Ich bin zwar nicht Broken, aber ich kann dir denke ich mal trotzdem helfen ;)

    HTML-Quellcode

    1. <style type="text/css">
    2. ul.examp {margin: auto; padding:0; list-style:none; width:90%;}
    3. ul.examp li {float:left; margin:0; padding:0; list-style:none; border:0px; background:#003366; width:250px; padding-left:0px; color:#FFFFFF;}
    4. ul.examp li:hover {background:#003366;}
    5. ul.examp2 {display:none; margin:0; padding:0; list-style:none;}
    6. ul.examp2 li {margin:0; padding:0; list-style:none; border:0;}
    7. ul.examp2 li:hover {margin:0; padding:0; list-style:none; border:0; background:#003366}
    8. .examp li:hover ul.examp2 {display:block;}
    9. ul.examp a:link, ul.examp a:visited {color:#FFFFFF; text-decoration:none; display:block; width:100%;}
    10. ul.examp a:hover, ul.examp a:active, ul.examp a:focus {color:#FFFFFF; text-decoration:none; display:block;}
    11. </style>
    Alles anzeigen

    Und zwar hast du, korrigiert mich jemand sollte ich was falsches sagen, bei "margin-left: 1em;" angegeben. Gleichzeitig möchtest du das noch zentriert haben, das klappt nicht ;)
    Ich hab dir das "margin-left" durch "margin: auto;" ersetzt, damit hat es bei mir im FF funktioniert.

    mfg
    Snip3r

    PS: wenn erledigt - Präfix umstellen, sonst gibts u.U. Punkte ;)
    Rechteübersicht * Forenregeln * F.A.Q. * Lexikon
    Suchfunktion * Chat * User helfen User
    Patrioten reden nur davon, dass sie für ihr Land sterben, niemals davon, dass sie für ihr Land töten. (Bertrand Russell)