Задача такая. Верстаю выезжающее меню слева. Сначала я всегда делаю простой макет для лучшего понимания и отладки кода, потом уже переношу его в рабочий проект. Меню при загрузке странице всегда скрыто, по нажатию определенной кнопки выползает слева. Со сдвигом контента вправо или поверх него - не так важно, главное, чтобы не появлялся скролл. Сдвиг меню реализую через jquery. Но вопрос не по нему,а по CSS. Изначально вся конструкция отображается сломанной.
Для отладки я открыл меню и сейчас по нажатию кнопки оно скрывается, уезжая влево. Сделал это я потому, что при анимации оно как-то скачет, прыгает с какими-то отступами, которые я не пойму откуда берутся. Решил изначально сделать меню видимым и понял, что дело здесь не в анимации, а в CSS. И вот, когда загружается страница, я вижу такую картину, смотрите вложение. На нем блок меню уже появляется со сдвигом вниз изначально! Что это??? Бесит уже непонимание этого CSS. Все попробовал - не могу выровнять и все. И код простой вроде, и не первый день с этим работаю, но все без толку.
В общем, ХЭЛП, ХЭЛП!
Приведу код.
CSS
html, body{padding:0px;margin:0px;font-family:Arial, Helvetica, sans-serif;}
.wrapper{display:table;width:100%; vertical-align:top; height:500px;}
.menu{background-color:#0099CC;color:#FFFFFF;height:500px; width:300px;}
.menu_open{display:table-cell;}
.menu ul{list-style-type:none;}
.content{display:table-cell;background-color:#99CCFF;height:500px; width:100%;}
.catalog_button{padding:30px;background-color:#0099CC;color:#FFFFFF;cursor:pointer;}
HTML
<div class="wrapper">
<div class="menu">
<ul>
<li>Грабли</li>
<li>Посуда</li>
<li>Горшки</li>
<li>Ручки</li>
<li>Перчатки</li>
</ul>
</div>
<div class="content">
<div class="catalog_button">Каталог</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){
$('.catalog_button').on('click', function(){
$('.menu').animate({width: "toggle"}, 1000);
});
})(jQuery);
</script>