CSS3 Animiertes CSS-Menü - overflow erst nach einer Sekunde ändern?

html.de-Forum HTML, XHTML & CSS
1

Hi!
Ich bastle gerade an einem mit CSS3 animierten Menü. Ich habe es ziemlich ähnlich gemacht, wie hier beschrieben, allerdings slidet bei mir das erste Untermenü auf. Das wollte ich auch bei Untermenüs machen, die noch eine Ebene tiefer sind, allerdings ist hier das Problem, dass diese durch das overflow: hidden des Elternmenüs verdeckt werden.
Hier sind Auszüge aus meinem CSS-Code:

#menu>ul>li>ul{
    position: absolute;
    height: 0;
    overflow-y: hidden;
    transition: height 1s ease;
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
}
#menu>ul>li:hover>ul, #menu>ul>li.active>ul{
    height: 25px;
    overflow-y: visible;
}

Das Problem ist jetzt, dass das overflow-y: visible sofort festgelegt wird, wenn ich über das Eltern-li fahre. Dadurch slidet zwar der Hintergrund des ul, aber die li-Elemente im Untermenü sind direkt da. Gibt es irgendeine Methode, dass das overflow-y erst nach einer Sekunde/nach Ende der Animation eintritt? Ich habe schon versucht, auch overflow-y zu animieren und verzögert zu starten, das hat aber nicht funktioniert.

2

Wie du das mit CSS lösen kannst, fällt mir jetzt nix ein.

Aber mit JS kannst du überprüfen, ob der genutzte Browser css3-transitions unterstützt, oder nicht. Und wenn ja, den overflow:show nach einer Sekunde einsetzen lassen und wenn nicht dann ohne verzögerung

   /*
     browserName() dient zur Feststellung des verwendeten Browsers
     Parameter:
       name: Name des Browsers, dessen Nutzung festgestellt werden soll
              String
     Rückgabewert:
       true, wenn name = genutzer Browser
       false, wenn nicht
   */
   function browserName(name)
   {
     var agent = navigator.userAgent.toLowerCase();  
     if (agent.indexOf(name.toLowerCase())>-1) {  
       return true;  
     }
     return false;
   }
   



/* Überprüfen, ob Browser css3-transitions unterstützt */
   var browser = new Array();
   browser["transitions"] = 0;
   
   if(browserName("opera") || browserName("safari") || browserName("chrome"))
     browser["transitions"] = 1;
   else if(browserName("firefox"))
   {
     if(navigator.appVersion.substring(0, 2) >= "4")
       browser["transitions"] = 1;
   }
   else if(browserName("MSIE"))
   {
     if(navigator.appVersion.substring(0, 2) >= "10")
       browser["transitions"] = 1;
   }
   


   /*
     changeOverflow() ändert das overflow style von .submenu
     Parameter:
       overflow:    der Wert, der overflow zugewiesen werden soll
                      kann 'visible' oder 'hidden' sein
       submenu_num: gibt an, der wie vielte submenupunkt geändert werden soll
                      Zahl
   */
   function changeOverflow(overflow, submenu_num)
   {
     if(browser["transitions"] == 1)
     {
       switch(overflow)
       {
         case "visible": window.setTimeout(function(){ document.getElementsByClassName("test")[submenu_num].style.overflow = overflow; }, 1000); break;
         case "hidden":  document.getElementsByClassName("test")[submenu_num].style.overflow = overflow; break;
       }
     }
     else
       document.getElementsByClassName("test")[submenu_num].style.overflow = overflow;
   }

[HTML]

    • ... [/HTML]

      Hoffe ich konnte dir weiterhelfen

      PS: Wenn du den gesamten Code deines Menus postest, könnte ich schaun, ob ich evtl. noch einen andere Möglichkeit ohne dem overflow:hidden finde.

    • 3

    Danke dir. Eine Lösung per Javascript habe ich mir auch schon überlegt, ich wollte aber weitgehend ohne Javascript arbeiten.

    Der HTML-Code für das Menü ist hier (nur ein kleiner Auszug):
    [HTML]


    [/HTML] Wem das bekannt vorkommen sollte: Ja, es wird ein Joomla!-Backend-Template.

    Der komplette CSS-Code für das Menü:

    /* -------------- MENU -------------- */
#c-menu{
    position: absolute;
    word-wrap: break-word;
    width: 100%;
    top: 50px;
}
#c-menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
#c-menu>ul>li{
    height: 25px;
    width: 100px;
    float: left;
    border: 1px solid #555;
    border-radius: 5px 5px 0 0;
    text-align: center;
    background: #fff;
    padding: 5px;
    margin: 5px 10px 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background:-moz-linear-gradient(bottom, #ddd, #aaa); /* Firefox */
    background:-webkit-gradient(linear, left bottom, left top, from(#ddd), to(#aaa)); /* Safari, Chrome */
    background:-webkit-linear-gradient(bottom, #ddd, #aaa); /* Safari, Chrome (new syntax) */
    background:-o-linear-gradient(bottom, #ddd, #aaa); /* Opera */
    background:-ms-linear-gradient(bottom, #ddd, #aaa); /* IE */
    background:linear-gradient(bottom, #ddd, #aaa); /* W3C Standard */
    box-shadow: 2px -2px 5px -1px #444;
}
#c-menu>ul>li:hover, #c-menu>ul>li.active{
    height: 30px;
    margin-top: 0;
    padding-top: 10px;
    background:-moz-linear-gradient(top, #fff, #ddd); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); /* Safari, Chrome */
    background:-webkit-linear-gradient(top, #fff, #ddd); /* Safari, Chrome (new syntax) */
    background:-o-linear-gradient(top, #fff, #ddd); /* Opera */
    background:-ms-linear-gradient(top, #fff, #ddd); /* IE */
    background:linear-gradient(top, #fff, #ddd); /* W3C Standard */
    box-shadow: 3px -4px 5px 1px #444;    
}
#c-menu>ul>li>ul{
    width: 100%;
    height: 0;
    background: #ddd;
    position: absolute;
    left: 0;
    margin-top: 4px;
    border-bottom: 1px solid #444;
    height: 0;
    overflow-y: hidden;
    transition: height 1s ease;
    -moz-transition-property: height, overflow-y;
    -moz-transition-duration: 1s, 0.1s;
    -moz-transition-timing-function: ease, linear;
    -moz-transition-delay: 0, 1s;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
}
#c-menu>ul>li:hover>ul, #c-menu>ul>li.active>ul{
    height: 25px;
    overflow-y: visible;
}
#c-menu>ul>li>ul>li{
    height: 25px;
    min-width: 100px;
    float: left;
    background: #bbb;
    border-style: outset;
    border-color: #555;
    border-width: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0 5px;
    padding: 0 5px;
}
#c-menu>ul>li>ul>li>a{
    padding-left: 16px;
}
#c-menu>ul>li>ul>li a{
    color: #000;
    text-decoration: none;
    display: block;
}
#c-menu>ul>li>ul>li:hover{
    background: #ddd;
    border-style: inset;
}
#c-menu>ul>li>ul>li.separator{
    display: none;
}
#c-menu>ul>li>ul>li>ul{
    height: 0;
    padding-top: 8px;
    transition: height 1s ease;
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
}
#c-menu>ul>li>ul>li:hover>ul{
    height: auto;
}
#c-menu>ul>li>ul>li>ul>li{
    background: #bbb;
    border-style: solid;
    border-color: #333;
    border-width: 0 1px;
}
#c-menu>ul>li>ul>li>ul>li:hover{
    background: #ddd;
}
#c-menu>ul>li>ul>li>ul>li:last-child{
    border-bottom: 1px solid #333;
    border-radius: 0 0 3px 3px;
}