Weich scrollendes Drop-Down-Menu mit CSS

AnyKey

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>

Alles anzeigen

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%;
            }

Alles anzeigen

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!

djheke

Versuch's mal. Vielleicht funktioniert's auch mit max-height und ohne :nth-child.

HTML

<!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>

Alles anzeigen

AnyKey

Danke schon mal.

Bisher hat das noch nicht geklappt.

Ich probiere mal was mit css-animation.

AnyKey

Juhuuuuuuuuuuuuuuuuuu!

Es funktioniiiiieeeeeert!

Ich habs hinbekommen.

Tags