CSS animacje menu :: 4programmers.net

0

Witam, męczę z animacjami w menu... Problem jest taki że elementy mają każde po każdym zjeżdżać z góry na dół a na złość wszystkie zawsze razem lecą nie ważne jak to zrobię...
Każdemu elementowi nadałem klasę np time_0 time_1 każdy element ma inna powinny startować z różnym opóźnieniem a jednak tego nie robią ;p
Jest to menu 2 poziomowe po najechaniu w menu3 pierwszy element to wyjeżdża menu tam tez ma byc animowane... Nie mam pomysłu
Proszę o pomoc :)

O to strona http://jsbin.com/bupevozilu/edit?html,css,output
Trzeba rozszerzyć kolumnę z strona żeby menu się pojawiło

 <!DOCTYPE html>
<html>
  <head>
    <title>DC2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- pliki CSS: -->
    <!-- oryginalny Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- czcionka Open Sans-->    
    <!-- <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin,latin-ext"> -->
<style>
.navbar-top-wrap {
  position: relative;
}


.menu-ico > li {
  position: static;
}

.menu-ico > li a.menu-ico-item {
  color: #545557 ! important;
  cursor: pointer;
  padding-bottom: 14px ! important;
  padding-top: 14px ! important;
  height: 48px;
  text-align: center;
}

.menu-ico > li a.menu-ico-item span {
  display: block;
}

.menu-ico > li:hover div.menu-sub {
  height: 160px;
  padding: 10px 0;
  visibility: visible;
  transition: padding 0.3s ease-out, height 0.3s ease-out;
}

.menu-ico > li:hover div.menu-sub .menu-sub-item {
  visibility: visible;
  transition: visibility 0s linear .4s;
}

.menu-ico > li:hover div.menu-sub .menu-sub-item a.cat-ico {
  opacity: 1;
  transform: translateY(0px);
  transition-duration: 2s;
}

.menu-ico > li:hover div.menu-sub .active.time_0 {
  transition-delay: 140ms;
  -webkit-transition-delay: 140ms;
}

.menu-ico > li:hover div.menu-sub .active.time_1 {
  transition-delay: 260ms;
  -webkit-transition-delay: 260ms;
}

.menu-ico > li:hover div.menu-sub .active.time_2 {
  transition-delay: 380ms;
  -webkit-transition-delay: 380ms;
}

.menu-ico > li:hover div.menu-sub .active.time_3 {
  transition-delay: 500ms;
  -webkit-transition-delay: 500ms;
}

.menu-ico > li:hover div.menu-sub .active.time_4 {
  transition-delay: 620ms;
  -webkit-transition-delay: 620ms;
}

.menu-ico > li:hover div.menu-sub .active.time_5 {
  transition-delay: 740ms;
  -webkit-transition-delay: 740ms;
}

.menu-ico > li:hover a.menu-ico-item {
  color: white ! important;
}

.menu-ico > li:hover a.menu-ico-item::after {
  content: '';
  position: relative;
  bottom: 0;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 12px solid #BFC0C2;
  top: -3px;
}

.menu-ico > li div.menu-sub {
  background: #BFC0C2;
  position: absolute;
  left: 0;
  z-index: 999999;
  width: 100%;
  height: 0px;
  visibility: hidden;
  transition: visibility 0s linear .3s, padding .2s ease, height .2s ease;
}

.menu-ico > li div.menu-sub .menu-sub-item {
  display: inline-block;
  position: static;
  visibility: hidden;
}

.menu-ico > li div.menu-sub .menu-sub-item:hover {
  color: yellow;
}

.menu-ico > li div.menu-sub .menu-sub-item:hover div.menu-sub2 {
  height: 130px;
  visibility: visible;
  opacity: 1;
  transition: padding 0.3s ease-out 0s, height 0.3s ease-out 0s;
}

.menu-ico > li div.menu-sub .menu-sub-item:hover div.menu-sub2 .active.time_0 {
  transition-delay: 170ms;
  -webkit-transition-delay: 170ms;
}

.menu-ico > li div.menu-sub .menu-sub-item:hover div.menu-sub2 .active.time_1 {
  transition-delay: 310ms;
  -webkit-transition-delay: 310ms;
}

.menu-ico > li div.menu-sub .menu-sub-item:hover div.menu-sub2 .active.time_2 {
  transition-delay: 430ms;
  -webkit-transition-delay: 430ms;
}

.menu-ico > li div.menu-sub .menu-sub-item:hover div.menu-sub2 .active.time_3 {
  transition-delay: 550ms;
  -webkit-transition-delay: 550ms;
}

.menu-ico > li div.menu-sub .menu-sub-item:hover div.menu-sub2 .active.time_4 {
  transition-delay: 670ms;
  -webkit-transition-delay: 670ms;
}

.menu-ico > li div.menu-sub .menu-sub-item:hover div.menu-sub2 .line {
  visibility: visible;
  opacity: 1;
  transition: opacity 1.2s;
}

.menu-ico > li div.menu-sub .menu-sub-item:hover div.menu-sub2 .menu-sub2-item {
  visibility: visible;
  transition: linear .7s;
}

.menu-ico > li div.menu-sub .menu-sub-item i.fa {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  z-index: 999;
  color: yellow !important;
  bottom: -10px;
  font-size: 25px;
  left: 27px;
}

.menu-ico > li div.menu-sub .menu-sub-item div.menu-sub2 {
  width: 100%;
  height: 0px;
  background: #BFC0C2;
  position: absolute;
  z-index: 90;
  padding: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: padding 0.3s ease-out 0s, height 0.3s ease-out 0s;
}

.menu-ico > li div.menu-sub .menu-sub-item div.menu-sub2 .line {
  width: 90%;
  visibility: hidden;
  opacity: 0;
}

.menu-ico > li div.menu-sub .menu-sub-item div.menu-sub2 .menu-sub2-item {
  display: inline-block;
  position: static;
  visibility: hidden;
}

.menu-ico > li div.menu-sub .menu-sub-item .MENU_ROZ_2:hover i.fa {
  visibility: visible;
  opacity: 1;
  transition: opacity 1.2s;
}

.menu-ico > li div.menu-sub a.cat-ico {
  opacity: 0;
  transform: translateY(-50px);
  margin: 10px;
  display: inline-block;
  padding: 70px 10px 10px;
  min-width: 77px;
  background-repeat: no-repeat ! important;
  background-position: center top ! important;
  text-decoration: none;
  text-transform: uppercase;
  color: white;
  position: static;
}

.menu-ico > li div.menu-sub a.cat-ico:hover {
  color: yellow;
}

.menu-ico .open > div.menu-sub {
  display: block;
}
</style>
<body>
	<nav class="navbar navbar-inverse header_0">

    <div id="menu">
        <div class="container">
            <div class="row">

                <div class="hidden-xs col-lg-8 col-sm-10 center navbar-top-wrap">
                    <div id="navbar2" class="navbar-collapse collapse mainmenu">
                                            <ul class="nav navbar-nav navbar-top menu-ico"  role="tablist">
                            <li class=""><a title="" class="menu-ico-item" href=""  ><span>MENU1</span></a>
    <div class="menu-sub">
            <div class="menu-sub-item  time_0">
            <a  style="position: relative" class=" cat-ico" title="" href="">ROZWIJALNE1 <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                   </div>
            <div class="menu-sub-item  time_1">
            <a  style="position: relative" class=" cat-ico" title="" href="">ROZWIJALNE2 <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                   </div>
            <div class="menu-sub-item  time_2">
            <a  style="position: relative" class=" cat-ico" title="" href="">ROZWIJALNE3 <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                   </div>
            <div class="menu-sub-item  time_3">
            <a  style="position: relative" class=" cat-ico" title="" href="">ROZWIJALNE4 <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                   </div>
        </div>
</li>
                            <li class=""><a href="" class="menu-ico-item" title=""><span>MENU2_puste</span></a></li>
                            <li class=""><a title="" class="menu-ico-item" href=""  ><span>MENU3</span></a>
    <div class="menu-sub">
            <div class="menu-sub-item MENU_ROZ_2 time_0">
            <a  style="position: relative" class=" cat-ico" title="" href=""> ROZWIJALNE_1 <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                        
            <div class="menu-sub2">
                <div class="line"></div>
                                    <div class="time_0   menu-sub2-item "><a class=" cat-ico " title="" href="" data-category="34">ROZwijalne-2</a></div>
                                    <div class="time_1   menu-sub2-item "><a class=" cat-ico " title="" href="" data-category="36">ROZWIJALNE-2</a></div>
                                    <div class="time_2   menu-sub2-item "><a class=" cat-ico " title="" href="" data-category="37">ROZWIJALNE-2</a></div>
                                    <div class="time_3   menu-sub2-item "><a class=" cat-ico " title="" href="" data-category="38">ROZWIJALNE-2</a></div>
                            </div>
                   </div>
            <div class="menu-sub-item  time_1">
            <a  style="position: relative" class=" cat-ico" title="" href="">ROZWIJALNE_1 <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                   </div>
            <div class="menu-sub-item  time_2">
            <a  style="position: relative" class=" cat-ico" title="" href="">ROZWIJALNE_1 <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                   </div>
            <div class="menu-sub-item time_3">
            <a  style="position: relative" class=" cat-ico" title="" href="">ROZWIJALNE_1 <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                   </div>
        </div>
</li>
                            <li class=""><a title="" class="menu-ico-item" href=""  ><span>MENU4</span></a>
    <div class="menu-sub">
            <div class="menu-sub-item time_0">
            <a  style="position: relative" class="cat-ico" title="" href="">ROZWIJALNE_1 <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                   </div>
            <div class="menu-sub-item time_1">
            <a  style="position: relative" class="cat-ico" title="" href="">ROZWIJALNE_1 <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                   </div>
            <div class="menu-sub-item time_2">
            <a  style="position: relative" class="cat-ico" title="" href="">ROZWIJALNE_1 <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                   </div>
            <div class="menu-sub-item time_3">
            <a  style="position: relative" class="cat-ico" title="" href="">ROZWIJALNE_1 <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                   </div>
            <div class="menu-sub-item time_4">
            <a  style="position: relative" class="cat-ico" title="" href="">ROZWIJALNE_1 <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                   </div>
        </div>
</li>

                               
                        </ul>
                                        </div>
                </div>

            </div>
        </div>
    </div>
</nav>
	
<section>
	    <!-- sekcja JavaScript  -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>






</body>
</html>

1

Zobacz, zrobiłeś:
`.menu-ico > li:hover div.menu-sub .menu-sub-item a.cat-ico {
opacity: 1;
transform: translateY(0px);
transition-duration: 2s;
}

.menu-ico > li:hover div.menu-sub .active.time_0 {
transition-delay: 140ms;
-webkit-transition-delay: 140ms;
}Pierwszy selektor tyczy się elementua, drugi elementu div(rodzica elementua), w ten sposób to nie zadziała, bo jak? Jeżeli go zmienisz na .menu-ico > li:hover div.menu-sub .time_0 .cat-ico {
transition-delay: 140ms;
-webkit-transition-delay: 140ms;
}To powinno działać tak jak chcesz. Przy okazji - po co Ci tak rozbudowane selektory? Stosuj możliwie krótkie i oparte na klasy żeby potem było je łatwo nadpisać. Klasy są ok, bo ułatwiają zapanowanie nad tym co się dzieje w stylach, jak użyjesz elementów to jesteś uzależniony od struktury strony (ktoś zmienidiv.menu-subna elementnavi trzeba grzebać po stylach,.menu-ico > li:hovemożna zmienić na.klasa_elementu_li_pierwszego_poziomu:hoveri jest prościej itp. itd.). Poczytaj o <a href="https://www.w3.org/TR/selectors/#specificity">"sile" selektorów</a>, powinno Ci to ułatwić temat. Jeszcze lepiej poczytaj o BEM, ułatwia odnalezienie się w cssach kolejnym ludziom (również Tobie gdy będziesz musiał coś zmienić za jakiś czas!), <a href=".menu-ico > li:hove">tutaj</a> masz fajny tekst o BEMie i jak go wykorzystać żeby było jeszcze lepiej (prefiksy, media itp.). Poświęć też trochę czasu na preprocesor (np. SASS) bo ułatwia robotę. Zamiast używać oddzielnej klasy dla każdego elementu menu (!) możesz napisać pętlę która użyje:nth-child` i ograniczysz ilość napisanych linii. No i wtedy podzielisz cssy na sensowne pliki.
Unikaj też styli inline (czyli atrybut style w htmlu), important, pisania domyślnych styli (position:static), dbaj o poprawne formatowanie (odpowiednia ilość wcięć)) i pewnie jeszcze by się tam coś znalazło jakby skupić swoją uwagę (bo ogólnie jest niechlujnie i trzeba sporo dobrej woli żeby po pracy rozkminiać co jest do czego) ;)

0

Dzięki za pomoc. Nie jest to mój kod ja miałem za zadanie dodać animacje. Jest to menu wycięte z strony na potrzeby 4programers :P.
Na co dzień używam LESS tam to wygląda przejrzyściej ale i tak coś mi cały czas nie działało teraz widzę gdzie błąd robiłem.
Dzięki za pomocne rady :) na pewno z nich skorzystam :)

CSS animacje menu

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami