Для блока слева создай отдельный элемент на странице. Например, div с id "menu". В него помещай все, что тебе нужно. Умеешь подключать JQuery? На всякий случай, объясню.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <!-- JQUERY -->
Вот эту строчку впихни в head своей страницы. Теперь у нас подключен JQuery.
Что мы делаем дальше? Дальше нам надо отловить клик по нашему "бутерброду" и после клика, собственно, и выдвинуть менюху. Как это делается:
$(document).ready(function() {
$("#menu").click(function() {
$(this).addClass("show");
});
});
Этот код просто выдели в отдельный .js файл (ну и подключи его как простой .js скрипт, разумеется. Только он должен быть подключен после того, как подключишь JQuery).
Короче, что мы сделали: мы отловили клик по этому элементу и повесили на него функцию, которая к нашему div'у добавит класс "show". Дальше уже чистый css.
#menu {
/* тут твои стили */
left: -350px;
}
#menu.show {
/* тут твои стили */
left: 0px;
}
Я думаю, суть ясна. Когда у менюхи появляется класс "show", то тогда мы просто "выдвигаем" ее из-за левого края страницы. По желанию можно сделать это плавным:
#menu {
/* тут твои стили */
transition: left ease 0.2s;
left: -350px;
}
#menu.show {
/* тут твои стили */
left: 0px;
}
Кстати, этот код написан под менюху, шириной в 350px.
Теперь ее надо закрыть. Тут 2 способа. Хотя нет, 3.
Можно отловить в нашем скрипте уход мышки с элемента и просто убрать класс "show" (mouseleave, removeClass()). А можно отловить клик по НЕэлементу див. Это тоже в JQ.
А можно еще расставить флаги, и контролировать, когда меню открыта, при нажатии на бутерброд, делать одно, и когда закрыта - другое.
Простой
Простой
