Drop Down Menü im Dreamweaver CS3 ?

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...
  • 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
  • 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
  • @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 ;)
    Neulinge * Forenregeln * F.A.Q. * Lexikon
    Suchfunktion* IRC * Teamspeak * 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)