Домой / Для сайта / Выезжающее меню с помощью CSS и jQuery
Выезжающее меню с помощью CSS и jQuery

Выезжающее меню с помощью CSS и jQuery

В данной статье хочу предложить вашему вниманию пример создания выезжающего меню. Данный пример выезжающего меню создан с помощью 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();
 }
 });
});
В данной статье хочу предложить вашему вниманию пример создания выезжающего меню. Данный пример выезжающего меню создан с помощью CSS и jQuery. Меню выезжает сверху при нажатии на "кнопку" расположенную по центру в самом верху. После того как меню выехало, вся остальная область страницы становится недоступной для выделения мышкой. Изменить скорость с которой меню выезжает вниз или прячется вверх очень просто, для этого необходимо изменить значения нескольких строчек скрипта: Для изменения скорости выезжания меню измените числовое значение в строчке: Для изменения скорости заезжания меню вверх измените числовое значение в строчке: Чем больше числовое значение, тем медленнее будет эффект выезжания или заезжания меню. Важно! Для работы с данным&hellip;

Обзор

Проголосуйте за статью

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.24 ( 11 голосов )
100

6 комментариев

  1. Аватар
    светлана

    Можно ли использовать данное меню для вордпресс? в качестве второго меню…

  2. Аватар
    светлана

    Поделитесь?

    • Аватар

      Готового плагина нету, но можно же добавить просто код в тему и все будет работать, правда ссылки в таком меню будут меняться не в привычном меню админки, а в коде.

  3. Аватар
    светлана

    спасибо)))

Оставить комментарий

Ваш email не будет опубликован.

*