Ссылки Поиск Написать В избранное NO
  • Bookkeeping 101

    Tutorial to Bookkeeping 101: everything you need to know.

    www.bookstime.com

Адаптивное меню на Jquery и CSS

Как вариант - Адаптивное меню на JavaScript и CSS - с работающим примером. Тут же я решил опубликовать Жиквери версию. Причем, сам я обычно делаю скрипт чуть проще, размещая кнопку закрытия прямо в блоке с левым меню.


<div id="buter" style="display: none;" onclick="buter();"></div>

<div id="zakr" style="display: none;" onclick="zakr();">X</div>


<script type="text/javascript">

$("#buter").click(function () {

$("#leftmenu").css("display", "block");

setTimeout('$("#leftmenu").css("left", "0px");', 100);

setTimeout('$("#zakr").css("display", "block");', 1000);

$("body").css("overflow", "hidden");

});

$("#zakr").click(function () {

setTimeout('$("#leftmenu").css("display", "none"); $("body").css("overflow", "auto");', 1000);

$("#leftmenu").css("left", "-100%");

$("#zakr").css("display", "none");

});

</script>


<style>

#leftmenu {float: none !important; margin: 0px; padding: 0px; width: 100% !important; max-height: 100%; height: 100%; overflow: auto; position: fixed; display: none; background-color: #fff; top: 0px; left: -100%; right: 0px; z-index: 201; -webkit-transition: left 1s; -moz-transition: left 1s; -o-transition: left 1s; transition: left 1s;}

#buter {border: 1px solid #dfe6e8; opacity: 0.9; width: 32px; height: 23px; cursor: pointer; background: url('buter.png') center no-repeat; display: block !important; padding: 6px; position: fixed; top: 0px; left: 0px; z-index: 200; background-size: 32px 23px !important; background-color: #fff; border-radius: 0 3px 3px 0;}

#buter:hover {opacity: 1 !important;}

#zakr {z-index: 99999990 !important; cursor: pointer; color: #db3029; position: fixed; right: 2%; top: 1%; padding: 0; font-size: 25px; line-height: 25px}

#zakr:hover {color: #ff0a00 !important;}

</style>


Отличный вариант для применения - трехколоночный (табличный или блочный) сайт, когда при адаптации левая колонка меню идет выше контента. Хотя, именно такое фиксированное меню «бутерброд» подходит не для всех сайтов.

А еще, код можно сделать в 10 раз короче, используя $("#leftmenu").slideToggle("slow"); (или другие специальные функции) - он умеет и сворачивать и разворачивать блоки, но делает это сверху вниз. В принципе, отличное решение. Но я, по привычке, пользовался анимацией CSS и таймерами, как делаю это в JavaScript.