ГлавнаяCSS, JQuery, JavaScript › Вертикальное меню для сайта с эффектом Swipeable


Вертикальное меню для сайта с эффектом Swipeable


вертикальное меню для сайта Приветствую всех читателей – Sozdaiblog.ru!

В этом уроке я покажу, как сделать вертикальное меню для сайта с эффектом Swipeable.

Примечание: Этот урок требует JQuery библиотеки, поэтому убедитесь, что Вы включили последнюю JQuery библиотеку в HTML страницы, прежде чем продолжить.

1. Структура.



HTML

<div class="container">
<div id="sidebar">
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Разделы</a></li>
	<li><a href="#">Регистрация</a></li>
	<li><a href="#">Выход</a></li>
</ul>
</div>
<div class="main-content"></div>
</div>



CSS


body, html {
    height: 100%;
    margin: 0;
    overflow:hidden;
    font-family: helvetica;
    font-weight: 100;
}
.container {
    position: relative;
    height: 100%;
    width: 100%;
}
#sidebar {
    position: absolute;
    background: #DF314D;
    width: 240px;
    height: 100%;
    box-sizing: border-box;
   -moz-box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
}




На первом этапе мы создаём основную структуру вертикального меню и добавляем несколько CSS стилей, которые Вы можете изменить по своему желанию.

2. Сокрытие.



HTML

 <div class="container">
      <div id="sidebar">
          <ul>
              <li><a href="#">Главная</a></li>
              <li><a href="#">Разделы</a></li>
              <li><a href="#">Регистрация</a></li>
                  <li><a href="#">Выход</a></li>
          </ul>
      </div>
      <div class="main-content">
          <div class="swipe-area"></div>
          <a href="#" data-toggle=".container" id="sidebar-toggle">
              <span class="bar"></span>
              <span class="bar"></span>
              <span class="bar"></span>
          </a>
          <div class="content">
              <h1>Вертикальное меню для сайта.</h1>
              <p>"Чтобы увидеть меню, необходимо нажать на квадратную иконку в верхнем левом углу!
			  Для возвращения на сайт нажмите на <a href="http://sozdaiblog.ru">ссылку</a>."</p>
          </div>
      </div>
    </div>



CSS

body, html {
    height: 100%;
    margin: 0;
    overflow:hidden;
    font-family: helvetica;
    font-weight: 100;
}
.container {
    position: relative;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition:  left 0.4s ease-in-out;
    -moz-transition:  left 0.4s ease-in-out;
    -ms-transition:  left 0.4s ease-in-out;
    -o-transition:  left 0.4s ease-in-out;
    transition:  left 0.4s ease-in-out;
}

.container.open-sidebar {
    left: 240px;
}
#sidebar {
    position: absolute;
    left: -240px;
    background: #DF314D;
    width: 240px;
    height: 100%;
    box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
}
.main-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}
.main-content .content{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
padding-left: 60px;
width: 100%;
}
.main-content .content h1{
    font-weight: 100;
}
.main-content .content p{
    width: 100%;
    line-height: 160%;
}
.main-content #sidebar-toggle {
    background: #DF314D;
    border-radius: 3px;
    display: block;
    position: relative;
    padding: 10px 7px;
    float: left;
}
.main-content #sidebar-toggle .bar{
     display: block;
    width: 18px;
    margin-bottom: 3px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child{
     margin-bottom: 0;
}



JS


$(document).ready(function() {
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-sidebar");
  });
});




Теперь, мы прячем наше меню в левой стороне окна браузера при помощи position:relative и left: -240px (число эквивалентно ширине боковой панели).

Затем добавляем кнопку и JQuery скрипт, который позволит выдвигать наше вертикальное меню для сайта в один клик (горизонтально выпадающее меню).

3. Swipeable для стандартных браузеров и браузеров мобильных устройств.



HTML

 <div class="container">
      <div id="sidebar">
          <ul>
              <li><a href="#">Главная</a></li>
              <li><a href="#">Разделы</a></li>
              <li><a href="#">Регистрация</a></li>
                  <li><a href="#">Выход</a></li>
          </ul>
      </div>
      <div class="main-content">
          <div class="swipe-area"></div>
          <a href="#" data-toggle=".container" id="sidebar-toggle">
              <span class="bar"></span>
              <span class="bar"></span>
              <span class="bar"></span>
          </a>
          <div class="content">
              <h1>Вертикальное меню для сайта.</h1>
              <p>"Чтобы увидеть меню, необходимо нажать на квадратную иконку в верхнем левом углу!
			  Для возвращения на сайт нажмите на <a href="http://sozdaiblog.ru">ссылку</a>."</p>
          </div>
      </div>
    </div>



CSS

body, html {
    height: 100%;
    margin: 0;
    overflow:hidden;
    font-family: helvetica;
    font-weight: 100;
}
.container {
    position: relative;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition:  left 0.4s ease-in-out;
    -moz-transition:  left 0.4s ease-in-out;
    -ms-transition:  left 0.4s ease-in-out;
    -o-transition:  left 0.4s ease-in-out;
    transition:  left 0.4s ease-in-out;
}
.container.open-sidebar {
    left: 240px;
}

.swipe-area {
    position: absolute;
    width: 50px;
    left: 0;
top: 0;
    height: 100%;
    background: #f3f3f3;
    z-index: 0;
}
#sidebar {
    background: #DF314D;
    position: absolute;
    width: 240px;
    height: 100%;
    left: -240px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
}
.main-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}
.main-content .content{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
padding-left: 60px;
width: 100%;
}
.main-content .content h1{
    font-weight: 100;
}
.main-content .content p{
    width: 100%;
    line-height: 160%;
}
.main-content #sidebar-toggle {
    background: #DF314D;
    border-radius: 3px;
    display: block;
    position: relative;
    padding: 10px 7px;
    float: left;
}
.main-content #sidebar-toggle .bar{
     display: block;
    width: 18px;
    margin-bottom: 3px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child{
     margin-bottom: 0;
}



JS

$(document).ready(function() {
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-sidebar");
  });

});
$(".swipe-area").swipe({
    swipeStatus:function(event, phase, direction, distance, duration, fingers)
        {
            if (phase=="move" && direction =="right") {
                 $(".container").addClass("open-sidebar");
                 return false;
            }
            if (phase=="move" && direction =="left") {
                 $(".container").removeClass("open-sidebar");
                 return false;
            }
        }
});




Наиболее сложная часть этого урока, это сделать в боковом меню эффект Swipeable на браузерах для смартфонов и обычных Веб-браузерах.

Поэтому здесь подключается специальный плагин TouchSwipe, который придумал Мэтт Брайсон. Он позволяет нашему меню работать одинаково правильно, как в смартфонах, так и на стационарных компьютерах.


ДЕМО СКАЧАТЬ



Заключение.

Теперь у Вас есть собственное вертикальное меню для сайта, которое Вы можете использовать для создания любого Веб-проекта без использования CMS.

На этом урок закончен. В ближайшее время таких уроков будет много. Чтобы их не пропустить советую подписаться на новые статьи блога.

Всем всего наилучшего!

С уважением, Денис Черников!




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




9 комментариевА что думаете Вы?

  1. Серёжа

    Хорошая статья и проделанная с ней работа! Благодарю

    [Ответить]

    Денис Черников ответил:

    Спасибо, Сергей!

    [Ответить]

  2. Павел

    ссупер!!!!!

    спасибо

    [Ответить]

    Денис Черников ответил:

    Пожалуйста! Рад, что Вам понравилось!

    [Ответить]

  3. Александр x3m

    Меню конечно не пригодится... а где такую стрелку мышки сделать? прикольно!

    [Ответить]

    Денис Черников ответил:

    Есть пост на эту тему, поищите через поиск или карту!

    [Ответить]

  4. Junk [Junk-nn.ru]

    Кнопки «демо / скачать» лучше дублировать в начале статьи, т.к. после того как увидишь демо, станет понятно стоит ли читать (листать) статью до конца или же нет.

    [Ответить]

    Денис Черников ответил:

    Спасибо, за подсказку!

    [Ответить]

  5. Дима

    Последние 5-6 часов (ночь почти прошла) искал реализацию этой идеи, или как эту фишку скачать с одного готового сайта...

    Спасибо!!!!!!!

    [Ответить]

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

Вверх