В данной статье хочу предложить вашему вниманию пример создания выезжающего меню. Данный пример выезжающего меню создан с помощью CSS и jQuery.
Меню выезжает сверху при нажатии на «кнопку» расположенную по центру в самом верху.
После того как меню выехало, вся остальная область страницы становится недоступной для выделения мышкой.
Изменить скорость с которой меню выезжает вниз или прячется вверх очень просто, для этого необходимо изменить значения нескольких строчек скрипта:
Для изменения скорости выезжания меню измените числовое значение в строчке:
slideMenu.slideDown(300);
Для изменения скорости заезжания меню вверх измените числовое значение в строчке:
slideMenu.slideUp(300);
Чем больше числовое значение, тем медленнее будет эффект выезжания или заезжания меню.
Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery.
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.
Демо СкачатьHTML
<div class="slide_container"> <nav id="menu"> <ul> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 2</a></li> <li><a href="#">Меню 3</a></li> <li><a href="#">Меню 4</a></li> <li><a href="#">Меню 5</a></li> </ul> </nav> <div id="btn"><span></span></div> </div> <div class="container"> <header id="header"> <h1>Выезжающее меню ↑ Нажмите</h1> </header> <div class="content"> <p> Револьверы стрелка перешли к Роланду от отца, но так как Роланд оказался крупнее и мощнее его, они были специально утяжелены металлическими пластинами.</p> <p> Револьверы описываются как огромные и тяжёлые, с рукоятками жёлтого цвета из самой лучшей сандаловой древесины. Когда Роланд разыскивает патроны для своего оружия в Нью-Йорке («Извлечение троих») оказывается, что ему подходят патроны от винчестера сорок пятого калибра (в оригинале от лонг кольта того же калибра).</p> <p> Для справки, первые "универсальные" патроны .44-40 Winchester применялись и в рычажной винтовке Winchester Model 1873, и револьвере Colt Peacemaker 1878; Под патрон .45 Long Colt компании Navy Arms, Rossi, Marlin и Winchester выпускают для современной "ковбойской" стрельбы винтовки «Ливер экшн» со скобой Генри и подствольным магазином, этот же патрон использовался в переделках Peacemaker и Colt Single Action Army.</p> </div> </div>
CSS
body { border-top: 10px solid #ff725d; } h1 { margin: 90px 0 50px; color: #666; text-align: center; font-size: 50px; } .content { margin: 0 auto 20px; max-width: 680px; padding: 0 3%; } .content img { width: 260px; height: auto; border: solid 10px #fff; box-shadow: 0 1px 2px #999; float: left; margin: 0 3% 3%; } p { font-size: 110%; text-align: center; line-height: 1.5; margin: 0 0 15px; } .slide_container { width: 100%; position: absolute; top: 0; z-index: 999; } #menu { padding: 50px 0; border-bottom: solid 10px #ff725d; background: #fff; display: none; } #menu ul { overflow: hidden; margin: 0 auto; padding: 0; max-width: 800px; width: 100%; } #menu li { float: left; padding: 0; width: 20%; list-style: none; } #menu li a { display: block; margin: 0 5%; padding: 20px 0; border: solid 1px #333; background: #fff; color: #666; text-align: center; text-decoration: none; font-size: 18px; } #menu li a:hover { border: solid 1px #12a1c6; color: #12a1c6; } #menu li a:active { border: solid 1px #0e7b97; color: #0e7b97; } #btn { margin: 0 auto; width: 200px; height: 30px; border-radius: 0 0 5px 5px; background: #ff725d; cursor: pointer; } #btn span { position: relative; top: 12px; left: 50%; display: block; margin-left: -25px; width: 50px; height: 5px; border-radius: 5px; background: #fff; box-shadow: inset 1px 1px 2px #ddd; } .layer { position: fixed; top: 0; width: 100%; height: 100%; background-color: #ff725d; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; opacity: 0.5; } @media screen and (max-width: 480px) { #menu { padding: 5%; } #menu li { width: 100%; } #menu li a { border-top: none; } #menu li a:hover { margin-top: -1px; } #menu li:first-child a { border-top: solid 1px #333; } #menu li:first-child a:hover { margin-top: 0; border-top: solid 1px #12a1c6; } }
JS
$(function() { var openBtn = $('#btn'), slideMenu = $('#menu'), layer = $('<div />').addClass('layer'); openBtn.on("click", function() { if (slideMenu.is(':hidden')) { layer.appendTo('body'); slideMenu.slideDown(300); } else { slideMenu.slideUp(300); layer.remove(); } }); });
Обзор
Проголосуйте за статью
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Можно ли использовать данное меню для вордпресс? в качестве второго меню…
Можно, главное правильно все интегрировать.
Поделитесь?
Готового плагина нету, но можно же добавить просто код в тему и все будет работать, правда ссылки в таком меню будут меняться не в привычном меню админки, а в коде.
спасибо)))
Забрал))