Меню Toggle с анимацией

Question

У меня есть анимация меню Toggle в моем Меню категорий. Идея - это когда пользователь нажимает на элемент toggler, содержимое нажимается вниз, и появляется меню. При повторном нажатии содержимое возвращается в нормальное место, и меню исчезает.

Я думаю, что я нахожусь на правильном пути, но если я не использую свойство display:none и display: block, там будет пустое место (где находится меню). И, переход не работает ...

Вот ссылка с проблемой: http://alsite.com.br/festas/azul/categoria.asp

BASIC HTML:

<section id="menu_categorias"> 
<div class="category_bar"> 
    <div class="container"> 

     <div class="row"> 

      <div class="col-md-5"> 
       <div class="menu_categorias"> 
        <a href="#menu" id="toggle"><span></span></a> 

       </div> 
      </div> 

     </div> 

    </div> 
</div> 

<div id="menu"> 
    <div class="container"> 
     <div class="col-md-3 col_menu"> 
      <ul> 
       <li> 
        <a href="#">CATEGORIA TESTE</a> 
        <ul class="submenu"> 
         <li><a href="">teste teste teste</a></li> 
         <li><a href="">teste teste teste</a></li> 
         <li><a href="">teste teste teste</a></li> 
         <li><a href="">teste teste teste</a></li> 
         <li><a href="">teste teste teste</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 

    </div> 
</div> 

SCRIPT:

var theToggle = document.getElementById('toggle'); 

      // based on Todd Motto functions 
      // http://toddmotto.com/labs/reusable-js/ 

      // hasClass 
      function hasClass(elem, className) { 
       return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); 
      } 
      // addClass 
      function addClass(elem, className) { 
       if (!hasClass(elem, className)) { 
        elem.className += ' ' + className; 
       } 
      } 
      // removeClass 
      function removeClass(elem, className) { 
       var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' '; 
       if (hasClass(elem, className)) { 
        while (newClass.indexOf(' ' + className + ' ') >= 0) { 
         newClass = newClass.replace(' ' + className + ' ', ' '); 
        } 
        elem.className = newClass.replace(/^\s+|\s+$/g, ''); 
       } 
      } 
      // toggleClass 
      function toggleClass(elem, className) { 
       var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, " ") + ' '; 
       if (hasClass(elem, className)) { 
        while (newClass.indexOf(" " + className + " ") >= 0) { 
         newClass = newClass.replace(" " + className + " " , " "); 
        } 
        elem.className = newClass.replace(/^\s+|\s+$/g, ''); 
       } else { 
        elem.className += '' + className; 
       } 
      } 

      theToggle.onclick = function() { 
       toggleClass(this, 'on'); 
       if ($(this).hasClass('on')) { 
        $('#menu').css({ 
         opacity: '1', 
         visibility: 'visible' 
        }); 

       } else { 
        $('#menu').css({ 
         opacity: '0', 
         visibility: 'hidden' 
        }); 
       }; 
       return false; 

      } 

CSS:

.category_bar { 
    padding: 20px; 
    padding-bottom: 10px; 
    background-color: #274566; 
} 

.category_bar .menu_categorias span.cat{ 
    position: absolute; 
    line-height: 43px; 
    color: #ffffff; 
    font-size: 25px; 
    display: inline-block; 
    margin-left: 10px; 
    font-family: 'Roboto Condensed', sans-serif; 
} 

#menu { 
    background-color: #274566; 
    padding: 15px; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transition: all 400ms ease; 
    -moz-transition: all 400ms ease; 
    -ms-transition: all 400ms ease; 
    -o-transition: all 400ms ease; 
    transition: all 400ms ease; 
} 

.col_menu { 
    border-right: 1px solid #eeeeee; 
} 

#menu ul{ 
    list-style: none; 
    color:#ffffff; 
} 

    #menu ul li{ 
     margin: 5px 0; 
     padding: 0 10px; 
     margin-bottom: 15px; 
    } 

     #menu ul li a{ 
      color: #ffeb3b; 
      text-decoration: none; 
     } 

     #menu ul.submenu{ 
      padding-left: 10px; 
     } 

     #menu ul.submenu li{ 
      margin-bottom: 5px; 
     } 

     #menu ul.submenu a{ 
      color: #ffffff; 
     } 

#toggle { 
    display: inline-block; 
    width: 28px; 
    height: 30px; 
    margin: 18px auto 10px; 
} 

#toggle span:after, 
#toggle span:before { 
    content: ""; 
    position: absolute; 
    left: 0; 
    top: -9px; 
} 
#toggle span:after{ 
    top: 9px; 
} 
#toggle span { 
    position: relative; 
    display: block; 
} 

#toggle span, 
#toggle span:after, 
#toggle span:before { 
    width: 100%; 
    height: 5px; 
    background-color: #ffffff; 
    transition: all 0.3s; 
    backface-visibility: hidden; 
    border-radius: 2px; 
} 

/* on activation */ 
#toggle.on span { 
    background-color: transparent; 
} 
#toggle.on span:before { 
    transform: rotate(45deg) translate(5px, 5px); 
} 
#toggle.on span:after { 
    transform: rotate(-45deg) translate(7px, -8px); 
} 
#toggle.on + #menu { 
    opacity: 1; 
    visibility: visible; 
} 

Answer 1

Действительно ли это JSFiddle делать то, что вы хотите?

Это, вероятно, не самый чистый способ сделать это, но я изменил вашу функцию theToggle.onclick, как

theToggle.onclick = function() { 
    $('#menu').css({ 
     height: $("#menu").get(0).scrollHeight, 
     opacity: 1, 
     marginBottom: '15px', 
     visibility: 'visible' 
    }); 

    toggleClass(this, 'on'); 

    if (!$(this).hasClass('on')) { 
     $('#menu').css({ 
      opacity: 0, 
      marginBottom: 0, 
      height: 0, 
      visibility: 'hidden' 
     }); 
    } 

    return false; 
} 

и просто отрегулировать свой отступы на #menu в

padding: 15px 15px 0; 

Надежда это собираюсь помочь вам