[CSS] Dropdown-Liste für Navigation mit CSS?

Dieses Thema im Forum "Webdesign" wurde erstellt von joker.org, 28. Juni 2009 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #1 28. Juni 2009
    Dropdown-Liste für Navigation mit CSS?

    Hallo Leute,

    gibt es eine Möglichkeit mit CSS eine Dropdownliste zu erstellen und anzupassen (farblich, Position, etc.).

    Ich habe eine Navigationsleiste z.Bsp. Fotos und dann soll, sobald ich mit der Maus darüberfahre eine Liste nach unten aufklappen:

    2009
    2008
    2007

    etc.

    Geht so etwas mit CSS und HTML?

    Wenn ja, wie genau?

    Bewertungen sind Ehrensache.

    Danke.

    Gruß joker.org
     

  2. Anzeige
    Dealz: stark reduzierte Angebote finden.
  3. #2 28. Juni 2009
    AW: Dropdown-Liste für Navigation mit CSS?

    Dropdowns #1
    Dropdowns #2

    Ohne JavaScript scheint der IE jedoch zu streiken. Das heißt, ein bisschen JS muss wohl sein.
     
  4. #3 28. Juni 2009
  5. #4 29. Juni 2009
    AW: Dropdown-Liste für Navigation mit CSS?

    Hi,
    danke für eure Antworten.
    Bewertungen sind Ehrensache.

    Gruß joker.org
     
  6. #5 30. Juni 2009
  7. #6 2. Juli 2009
    AW: Dropdown-Liste für Navigation mit CSS?

    Hi,
    kann mir jemand vielleicht ein kleines Script irgendwo hochladen, bei dem im Prinzip schon alles vorhanden ist und ich nur noch die Farben, Ausrichtung etc. anpassen müsste?

    Also HTML-Datei inklusive CSS Datei.

    Danke.

    Gruß joker.org
     
  8. #7 2. Juli 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Dropdown-Liste für Navigation mit CSS?

    hier hab ich dir mal eins von mir hochgeladen: klick
     
  9. #8 2. Juli 2009
  10. #9 4. Juli 2009
    AW: Dropdown-Liste für Navigation mit CSS?

    du bietest ihm allen ernstes eine komplette neuerstellung und verwaltung der system-gui an? diese lib ersetzt nämlich alle form-elemente mit eigenen elementen via css und jeder menge javascript.

    sorry, aber das geht mal garnicht... hast du dir den source mal angeschaut? das sind aber-tausende zeilen code die er für diese kleinigkeit überhaupt nicht benötigt.
    zudem wird für den builder python benötigt. (ohne schmeisst das ding alles zusammen)

    aber du hast recht, damit würde es gehen... =)

    davon aber mal abgesehen bekommt man eine custom dropdown liste (in modernen browsern) mit purem CSS und HTML hin. für die auswahl reicht dann minimal javascript.

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html dir="ltr" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <title>Dropdown menu</title>
     <style type="text/css">
     #menu ul {
     height: 30px;
     list-style: none;
     border: 1px solid #000;
     margin: 0;
     padding: 0;
     }
     
     #menu ul li {
     float: left;
     border-right: 1px solid #000;
     height: 30px;
     }
     
     #menu ul li a {
     display: block;
     line-height: 30px;
     padding: 0 10px;
     }
     
     #menu ul li:hover {
     background-color: #f5f5f5;
     }
     
     #menu ul li > ul {
     display: none;
     position: absolute;
     width: auto;
     height: auto;
     margin-left: -1px; /* border */
     background-color: #fff; /* ie issue */
     }
     
     #menu ul li:hover > ul {
     display: block;
     }
     
     #menu ul li ul li {
     display: block;
     float: none;
     border-top: 1px solid #000;
     border-right: 0px none;
     }
     
     #menu ul li ul li:first-child {
     border-top: 0px none;
     }
     </style>
     </head>
     <body>
     <div id="menu">
     <ul>
     <li><a href="#">link</a></li>
     <li>
     <a href="#">link2</a>
     <ul>
     <li><a href="#">link2.1</a></li>
     <li><a href="#">link2.2</a></li>
     <li><a href="#">link2.3</a></li>
     </ul>
     </li>
     </ul>
     </div>
     </body>
    </html>
    sollte reichen. für IE6 kannst ja ne meldung reinmachen das sie updaten sollen (ie8 kommt ja via windows-update)

    folgende sachen beachten:
    - doctype! ie verweigert dienst ohne doctype komplett
    - <ul> innerhalb von <ul> braucht nen background, sonst verliert IE den focus und das ding bleibt ned offen.
     
  11. #10 13. Juli 2009
    AW: Dropdown-Liste für Navigation mit CSS?

    Hi,
    vielen Dank.

    Gruß joker.org
     

  12. Videos zum Thema
Die Seite wird geladen...
Similar Threads - CSS Dropdown Liste
  1. Antworten:
    0
    Aufrufe:
    1.609
  2. Antworten:
    3
    Aufrufe:
    1.580
  3. Antworten:
    3
    Aufrufe:
    1.622
  4. Antworten:
    2
    Aufrufe:
    1.669
  5. Antworten:
    3
    Aufrufe:
    1.987