Ergebnis 1 bis 4 von 4

Thema: Weich scrollendes Drop-Down-Menu mit CSS

  1. #1
    Interessierte/r Avatar von AnyKey
    Registriert seit
    31.01.2016
    Ort
    Raum Oldenburg / Bremen
    Beiträge
    107
    Danke
    16
    Bekam 0 mal "Danke" in 0 Postings

    Standard Weich scrollendes Drop-Down-Menu mit CSS

    Hallo Leute.

    Ich habe folgendes Problem, und bin mir nicht sicher, ob das allein mit CSS zu lösen ist:

    Ich habe ein Dropdown-Menu entwickelt, dass soweit funktioniert. Solange man nicht mehr als, ich sage mal, 4 Submenu-Items hat, wäre das auch optisch nicht problematisch, wenn das DropDown abrupt aufklappt.

    Nur, wenn ich mehr Submenu-Items habe, stört es mich schon, wenn es übergangslos runterklappt.

    Kann man es mit CSS allein hinbekommen, dass das Drop-Down-Menu beim Aufklappen mit leichter Verzögerung nach unten scrollt?

    Ich poste mal den Code:

    Code:
    <div id="top">
        <div id="topline">
            <div id="toplogo"><a href="#"><img src="img/logo.png" alt="Logo Schriftzug"></a></div>
        <div id="topnav">
        
        
            <div class="topnavbutton" id="menuitem1"><ul><li><a href="#">Menuitem1</a></li></ul><br><div class="topnavsubmenu"><ul><li>Submenu-Item1</li><li>Submenu-Item2</li><li>Submenu-Item3</li></div></div>
            <div class="topnavbutton" id="menuitem2"><ul><li><a href="#">Menuitem2</a></li></ul><br><div class="topnavsubmenu"><ul><li>Submenu-Item1</li><li>Submenu-Item2</li><li>Submenu-Item3</li><li>Submenu-Item4</li><li>Submenu-Item5</li><li>Submenu-Item6</li><li>Submenu-Item7</li><li>Submenu-Item8</li></ul></div></div>
            <div class="topnavbutton" id="menuitem3"><ul><li><a href="#">Menu-Item3</a></li></ul></div>
            <div class="topnavbutton" id="menuitem4"><ul><li><a href="#">Menu-Item4</a></li></ul></div>
         
        
        </div>
        <div class="0"></div>
        </div>
    </div>
    Ausschnitt aus der HTML-Datei


    Code:
    #top {
        top:0%;left:0%;
        width:97.5%;
        min-width:780px;
        margin:0 auto;
        padding:0.25% 1.25%;
        background-color:rgba(0,0,0,0.96);
        color:#EEEEEE;
        overflow:hidden;
        font-family:'Special Elite','Lucida Console',monospace;
        font-size:1.063em;
        position:fixed;
        z-index:10;
    }
    #topline {width:95%;margin:0 auto;}
            #toplogo {width:10%;padding:1% 1.125% 0.5%;float:left;vertical-align:middle}
                        #toplogo img {max-width:100%;display:block;}
            #topnav {width:85.5%;padding-top:1.25%;text-align:center;vertical-align:middle;float:right;}
            .toplink {}
                
            .toplink:hover, .toplink:focus {background-color:#AA0000;color:white;}
            
            .topnavbutton {
                margin:0 3.75%;
                display:inline-block;
                vertical-align:text-top;            
            }
            .topnavbutton ul {
                display:inline-block;
                list-style:none;
                margin-top:4px;
                width:100%;
            }
            .topnavbutton ul li {
                display:inline-block;
                padding:4px 8px 2px;
                color:#CCCCCC;
                width:100%;
            }
                
            .topnavbutton ul li:hover {
                color:white;
                background:#AA0000;
                
            }
                .topnavsubmenu {
                
                }
            
            .topnavbutton .topnavsubmenu {
                display:none;
                margin-top:8px;
            }
            .topnavbutton:hover .topnavsubmenu {
                display:inline-block;
            }
            .topnavsubmenu ul {
                list-style:none;
                padding-bottom:8px;
            }
            .topnavsubmenu ul li {
                display:block;
                padding:4px 8px;
                text-align:left;
                color:white;
                font-family:'Titillium Web',Geneva,sans-serif;
                font-size:0.938em;
            }
            .topnavsubmenu ul li:hover {
                color:#CC0000;
                background-color:transparent;
            }
                            
                #menuitem1 ul {
                        
                }
                #menuitem1 ul li {
                    
                }
                #menuitem1 {
                    max-width:57px;    
                }
                #menuitem1:hover {
                    
                }
                #menuitem2 {
                    max-width:155px;
                }
                #menuitem2 .topnavsubmenu ul {
                    margin-left:-50%;
                }
    Ausschnitt aus der CSS-Datei



    Falls Ihr Euch jetzt wundert, warum ich nicht ausschließlich ul's und li's verwendet habe, sondern zusätzliche div's, dann lag es daran, dass ich sonst unerwünschte Hover-Effekte habe, bspw. sich das komplette Submenu in der Hoverfarbe des übergeordneten Menü-Items hinterlegt wurde.
    Von der optischen Ordnung her passt es sonst so wie gewünscht.


    Ansonsten, hättet Ihr ne Lösung? Habe schon mal über Google gesucht, aber das was ich dort gefunden hatte, hatte nicht funktioniert.


    Danke schon mal im voraus!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von AnyKey (27.05.2016 um 19:04 Uhr)
    Drücken Sie die Any-Taste um fortzufahren!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Weich scrollendes Drop-Down-Menu mit CSS

    Versuch's mal. Vielleicht funktioniert's auch mit max-height und ohne :nth-child.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    * {
     margin:0;
     padding:0;
     list-style:none;
     text-decoration:none;
     box-sizing:border-box;
    }
    
    nav {
     float:left;
     width:100%;
     background:#000;
    }
    
    nav li {
     float:left;
     position:relative;
     padding:0 30px;
    }
    
    nav a {
     display:block;
     color:#fff;
     padding:10px;
    }      
                            
    nav ul ul {
     position:absolute;
     top:auto;
     left:0;
     background:#a33;
     overflow:hidden;
      height:0;
     transition:height .4s;
    } 
    
    nav ul ul li {
     display:block;
    }
    
    nav ul li:nth-child(1):hover ul {
     height:300%;
    }   
    
    nav ul li:nth-child(2):hover ul {
     height:800%;
    } 
            
    </style>
    <title></title>
    
    </head>
    <body>
    <nav>
    <ul>
     <li><a href="#">Menuitem1</a>
      <ul>
       <li><a href="#">Submenu-Item1</a></li>
       <li><a href="#">Submenu-Item2</a></li>
       <li><a href="#">Submenu-Item3</a></li>
      </ul>
     </li>
    
     <li><a href="#">Menuitem2</a>
      <ul>
       <li><a href="#">Submenu-Item1</a></li>
       <li><a href="#">Submenu-Item2</a></li>
       <li><a href="#">Submenu-Item3</a></li>
       <li><a href="#">Submenu-Item4</a></li>
       <li><a href="#">Submenu-Item5</a></li>
       <li><a href="#">Submenu-Item6</a></li>
       <li><a href="#">Submenu-Item7</a></li>
       <li><a href="#">Submenu-Item8</a></li>
      </ul>
     </li>
    
     <li><a href="#">Menu-Item3</a></li>
     <li><a href="#">Menu-Item4</a></li>
    </ul>
    </nav>
      
    </body>
    </html>
    Geändert von djheke (28.05.2016 um 10:58 Uhr) Grund: fehler

  3. #3
    Interessierte/r
    Themenstarter
    Avatar von AnyKey
    Registriert seit
    31.01.2016
    Ort
    Raum Oldenburg / Bremen
    Beiträge
    107
    Danke
    16
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Weich scrollendes Drop-Down-Menu mit CSS

    Danke schon mal.

    Bisher hat das noch nicht geklappt.

    Ich probiere mal was mit css-animation.
    Drücken Sie die Any-Taste um fortzufahren!

  4. #4
    Interessierte/r
    Themenstarter
    Avatar von AnyKey
    Registriert seit
    31.01.2016
    Ort
    Raum Oldenburg / Bremen
    Beiträge
    107
    Danke
    16
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Weich scrollendes Drop-Down-Menu mit CSS

    Juhuuuuuuuuuuuuuuuuuu!

    Es funktioniiiiieeeeeert!

    Ich habs hinbekommen.
    Drücken Sie die Any-Taste um fortzufahren!

Ähnliche Themen

  1. vertikales menu - drop down
    Von thilda im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 26.08.2011, 22:12
  2. Drop-down Menu
    Von Susum im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 20.03.2010, 18:49
  3. Drop Down Menu Problem
    Von DaRealAndy im Forum HTML & CSS Forum
    Antworten: 18
    Letzter Beitrag: 28.07.2008, 14:17
  4. Drop Down menu? Bei ner speziellen Navigation
    Von aXe im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 02.10.2007, 08:04
  5. Drop Down CSS Menu
    Von Teflon im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 22.11.2006, 14:15

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •