D.iK.iJ
 
Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2016 год

RSS лента новостей, Подписка по Email

      Адаптивное меню на 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.

         
         
Главная, 1,
( 44 )