Главная
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="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;
}


$(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;
}

$(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.

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

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

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

Серёжа

Ответить

Хорошая статья и проделанная с ней работа! Благодарю
1. Денис Черников
  
  Ответить
  
  Спасибо, Сергей!
Павел

Ответить

ссупер!!!!!
спасибо
1. Денис Черников
  
  Ответить
  
  Пожалуйста! Рад, что Вам понравилось!
Александр x3m

Ответить

Меню конечно не пригодится… а где такую стрелку мышки сделать? прикольно!
1. Денис Черников
  
  Ответить
  
  Есть пост на эту тему, поищите через поиск или карту!
Junk Junk-nnru

Ответить

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

Ответить

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

Ответить

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

Ответить

ый взгляд, код выглядит достаточно простым и легким для понимания. С помощью данного кода можно создать вертикальное меню для сайта с эффектом Swipeable.
Структура HTML состоит из контейнера, в котором размещается сайдбар и основное содержимое. В сайдбаре размещается список ссылок в виде списка ul. Ссылки стилизуются с помощью CSS.

В CSS определены стили для body, html, container, sidebar и ссылок внутри сайдбара. Контейнер имеет фиксированную высоту и ширину 100%, а сайдбар занимает 240px слева. Ссылки имеют свои стили, включая фон при наведении.

В целом, данный код выглядит достаточно простым и понятным для использования. Важно убедиться, что в HTML страницу добавлена последняя версия JQuery библиотеки перед продолжением работы с данным кодом.

Ваш комментарий

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