Sozdaiblog.ru
Назад

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

Опубликовано: 19.06.2013
Время на чтение: 20 мин
10
7

вертикальное меню для сайта Приветствую всех читателей – 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="https://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="https://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.

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

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

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

Поделиться
Похожие записи
Комментарии:
  • Серёжа
    Опубликовано: 19.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 19.07.2013 Ответить на сообщение

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

  • Павел
    Опубликовано: 19.07.2013 Ответить на сообщение

    ссупер!!!!!
    спасибо

    • Денис Черников
      Опубликовано: 19.07.2013 Ответить на сообщение

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

  • Александр x3m
    Опубликовано: 20.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 20.07.2013 Ответить на сообщение

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

  • Junk Junk-nnru
    Опубликовано: 20.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 20.07.2013 Ответить на сообщение

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

  • Дима
    Опубликовано: 18.08.2015 Ответить на сообщение

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

  • камиль
    Опубликовано: 28.04.2016 Ответить на сообщение

    Можете отправить код сайта для html5 без css/ Только в html коде

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.