MENU

[tarzinio]

Witam serdecznie. Mam pewien problem z menu, a mianowicie, nie mogę zanimować menu. A dokładniej:

Chciałbym by po najechaniu na dany element na tym menu w tym przypadku na te napisy CHŁODZENIE, dział, dział dział te podmenu które się pojawia wysuwało się linearnie przez 0.7 sekund. Nie chce żeby mi wyskakiwało jak teraz tylko się powoli wysuwało. Udało mi sie zanimować 2 rzeczy, ale z tym nie mogę sobie poradzić. Kod poniżej


HTML

Kod:

<div id="menu">
            <div class="menu">
                <ol>
                    <li><a href="#">CHŁODZENIE</a>
                      <ul>
                        <li><a href="#">link </a></li>
                        <li><a href="#">link - 2</a></li>
                        <li><a href="#">link - 3</a></li>
                        <li><a href="#">link - 4</a></li>
                        <li><a href="#">link - 5</a></li>
                      </ul>
                    </li>
                    
                    <li><a href="#">DZIAŁ</a>
                      <ul>
                        <li><a href="#">link - 1</a></li>
                        <li><a href="#">link - 2</a></li>
                        <li><a href="#">link - 3</a></li>
                      </ul>
                    </li>
                    
                    <li><a href="#">DZIAŁ</a></li>
                    
                    <li><a href="#">DZIAŁ</a>
                      <ul>
                        <li><a href="#">link - 1</a></li>
                        <li><a href="#">link - 2</a></li>
                        <li><a href="#">link - 3</a></li>
                        <li><a href="#">link - 4</a></li>
                      </ul>
                    </li>
                </ol>
            </div>  
       </div>

CSS

Kod:

/*--------------------------------------
    MENU
--------------------------------------*/
nav{
    background:#000;
    opacity:0.6;
    filter:alpha(opacity=60);
    min-width:985px;
    height:40px;
    margin:0;
}

nav ul {
   clear: left;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   left: 50%;
   text-align: center;
}

nav ul li {
   display: block;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   right: 50%;
}

ul li .a {
   display: block;
   margin: 0 0 0 1px;
   padding: 3px 30px;
   background: #000;
   color: #FFF;
   text-decoration: none;
   line-height: 34px;
  
}


ul li .a:hover {
   background: #FFF;
   color: #000;
   /*powiekszenie czcionki do 30px*/
   font-size: 30px;
   /*rotacja obiektu-obrór*/
   -moz-transform: rotate(5deg);
   -webkit-transform: rotate(5deg);
   transform: rotate(5deg);
   /*czas trwania efektu oraz przebieg czasowy obiektu*/
   -moz-transition-duration: 0.5s;
   -moz-transition-timing-function: linear;
   -webkit-transition-duration: 0.5s;
   -webkit-transition-timing-function: linear;
   transition-duration: 0.5s;
   transition-timing-function: lineart;
  
}


  

/*--------------------------------------
    Menu-Lewa strona
--------------------------------------*/

#menu {
    background:#000;
    opacity:0.6;
    filter:alpha(opacity=60);
    width:150px;
    height:auto;
    border:1px solid;
    margin-top:30px;
    float:left;
    list-style-type: none;
    display: block;
    
}

.menu {
    border:solid 1px #FFF;
    border-left:none;
    border-right:none;
    margin:0;
    margin-top:20px;
    margin-bottom:20px;
    
}


      /* wygląd głównego elementu - ol */
      
      
ol {


        padding:0;
        font-size:18px;
        height:auto;
        line-height:35px;
        text-align:center;

      }

      /* wygląd wszystkich elementów - a - znajdujących się w elemencie - ol */
ol a {
        display:block;
        text-decoration:none;
        color:#FFF;
        padding:0 5px;
        
      }

      /* wygląd elementów - li - wszystkich dzieci elementu - ol */
ol > li {
        float:top;
        width:150px;
        margin-left:0;
        
      }

      /* wygląd elementu - li - pierwszego dziecka elementu - ol */
ol > li:first-child {
        margin-left:0;
        
      }

      /* wygląd elementów - li - wszystkich dzieci elementu - ol - po najechaniu kursorem myszki na element - li */
ol > li:hover {
        background-color:#FFF;
        opacity:0.8;
        -webkit-transform: matrix;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: linear;
      }

      /* wygląd elementu - a - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
ol > li:hover > a {
        color:#000;
      }

      /* wygląd elementu - ul - dziecka elementu - li - będącego dzieckiem elementu - ol - po najechaniu kursorem myszki na element - li */
ol > li:hover > ul {
        display:block;
        
        
      }

      /* ------------------------CZĘŚĆ-ROZWIJANA-MENU------------------------ */

      /* wygląd głównych rozwijanych elementów - ul */
      ol > li > ul {
        display:none;
        list-style-type:none;
        padding:0;
        margin:0;
        
      }

      /* wygląd elementu - li - w części rozwijanej */
      ol > li > ul > li {
        background-color:#000;
        

      }

      /* wygląd elementu - a - w części rozwijanej */
      ol > li > ul > li > a {
        border-top:1px solid #FFF;
        font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
        font-size:14px;
        text-align:left;
        padding-left:30px;
        
      }

      /* wygląd elementu - li - w części rozwijanej, po najechaniu kursorem myszki na dany element - li */
      ol > li > ul > li:hover {
        background-color:#CCC;
        -webkit-transform: matrix;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: linear;
      }

      /* wygląd elementu - a - w części rozwijanej, po najechaniu kursorem myszki na element - li */
      ol > li > ul > li:hover > a {
        color:#06C;
      }

Z góry wielkie dzięki

[prawdziwypiotrek]

Nie zagłębiam się w Twój kod i konkretny rodzaj animacji który chcesz uzyskać, ale moim zdaniem powinno to być zrobione ogółem jakoś tak: ustawiasz max-height na 0 i przy :hover je uwalniasz do jakiegoś tam rozmiaru.

Jak dopiszesz to na końcu swojego CSS-a, to zadziała Dopracuj sobie sam.[/code]

Kod:

ol > li > ul{
     max-height:0;
     display:block;
     overflow:hidden;
     -webkit-transition: all 1s ease-out;
     -moz-transition: all 1s ease-out;
     -o-transition: all 1s ease-out;
     transition: all 1s ease-out;
}

ol > li:hover > ul{
           max-height:999px;
}