Bootstrap 3 - Нестандартное навигационное меню

На этом уроке мы познакомимся с расширением Jasny Bootstrap, которое будем использовать для создания нестандартного навигационного меню.

Jansy Bootstrap – это расширение для платформы Twitter Bootstrap 3, которое предлагает веб-разработчикам дополнительные компоненты и плагины:

  • Кнопки с метками;

    Кнопки с меткой для Twitter Bootstrap

  • Вертикальное навигационное меню;
  • Навигационное меню, которое прикреплено к левой или правой части экрана;
  • Скрывающееся навигационное меню (используя плагин offcanvas);
  • Предупреждения (alerts), прикреплённые к нижней или верхней части экрана;

    Предупреждение (alert), прикреплённое к верхней части экрана

  • Плагин "rowlink.js", который превращает строку таблицы в ссылку;
  • Плагин "inputmask.js", который предназначен для добавления определенной маски к некоторому полю;

    Добавление к элементу HTML маски ввода

  • Плагин "fileinput.js", предназначенный для создания визуального привлекательных виджетов для отображения выбранных файлов или изображений.

    Виджет для загрузки изображений

Для подключения к веб-странице расширения Jansy Bootstrap у Вас должны быть предварительно загружены архивы Twitter Bootstrap 3, jQuery и, конечно же, Jansy Bootstrap. После распаковки данных архивов, их необходимо подключить к веб-странице.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jasny Bootstrap</title>

    <!--Подключаем CSS Twitter Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 
    <!--Подключаем CSS Jasny Bootstrap -->
    <link href="css/jasny-bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Привет, Jasny Bootstrap!</h1>

    <!-- Подключаем jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <!-- Подключаем JavaScript Twitter Bootstrap -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Подключаем JavaScript Jasny Bootstrap -->
    <script src="js/jasny-bootstrap.min.js"></script>
  </body>
</html>

Создать вертикальное навигационное меню в Twitter Bootstrap 3 можно с помощью компонента navmenu. По умолчанию данное меню имеет ширину, равную 300px. Изменить ширину данного меню можно посредством установления необходимой ширины для .navmenu в вашем CSS или с помощью настройки переменной @navmenu-width во время создания пользовательской сборки.

<nav class="navmenu navmenu-default" role="navigation">
  <a class="navmenu-brand" href="#">Название</a>
  <ul class="nav navmenu-nav">
    <li class="active"><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Пункт 3 <b class="caret"></b></a>
      <ul class="dropdown-menu navmenu-nav" role="menu">
        <li><a href="#">Пункт 3.1</a></li>
        <li><a href="#">Пункт 3.2</a></li>
        <li><a href="#">Пункт 3.3</a></li>
        <li><a href="#">Пункт 3.4</a></li>
      </ul>
    </li>
  </ul>
</nav>
.navmenu {
width: 200px;
}

Вертикальное навигационное меню

Для создания навигационного меню, прикреплённого к левой (.navmenu-fixed-left) или правой (.navmenu-fixed-right) границе экрана, необходимо добавить один из выше представленных классов к элементу nav. При этом необходимо помнить, что меню может наложиться на другое содержимое веб-страницы, которое тоже расположено в этой части экрана. Чтобы этого не допустить, необходимо установить дополнительные отступы padding слева или справа (в зависимости от расположения меню) для тега body. Величина отступа должна быть больше или равной ширине навигационного меню. Также необходимо помнить, что Ваш файл CSS, необходимо подключить после подключения CSS файла Jansy Bootstrap.

<nav class="navmenu navmenu-default navmenu-fixed-left" role="navigation">
...
</nav>
body {
padding-left: 300px;
}

Скрывающееся навигационное меню работает на основе плагина offcanvas, который позволяет скрыть navmenu с холста. Это особенно полезно для экранов с небольшим размером диагонали.

Рассмотрим следующие примеры navmenu с плагином offcanvas:

  • Навигационное меню с эффектом толкания (push). Принцип работы данного меню заключается в толкании всей веб-страницы (<body>...</body>) на величину, равную ширине данного меню. При этом навигационное меню размещается в освободившейся области веб-страницы.

    Код HTML:

    <nav class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
      <a class="navmenu-brand" href="#">Project name</a>
      <ul class="nav navmenu-nav">
      ...
      </ul>  
    </nav>
    <div class="navbar navbar-default navbar-fixed-top">
      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    
    <div class="container">
    <!-- Содержимое веб-страницы-->
    </div>
    

    Код CSS:

    html, body {
      height: 100%;
    }
    body {
      padding: 50px 0 0 0;
    }
    .navbar-toggle {
      float: left;
      margin-left: 15px;
    }
    @media (min-width: 0) {
      .navbar-toggle {
        display: block;
      }
    }
    @media (min-width: 992px) {
      body {
        padding: 0;
      }
      .navbar {
        right: auto;
        background: none;
        border: none;
      }
    }
    

    Навигационное меню с push эффектом

    Демо

  • Навигационное меню, которое изменяет своё расположение в зависимости от ширины рабочей области окна браузера.

    Код HTML:

    <div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm">
      <a class="navmenu-brand visible-md visible-lg" href="#">Название сайта</a>
      <ul class="nav navmenu-nav">
      ...    
      </ul>
    </div>
    <div class="navbar navbar-default navbar-fixed-top hidden-md hidden-lg">
      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="container">
    <!-- Основное содержимое веб-страницы -->
    </div>
    

    Код CSS:

    html, body {
      height: 100%;
    }
    body {
      padding: 50px 0 0 0;
    }
    .navmenu {
      padding-top: 50px;
    }
    .navbar {
      display: block;
      text-align: center;
    }
    .navbar-brand {
      display: inline-block;
      float: none;
    }
    .navbar-toggle {
      position: absolute;
      float: left;
      margin-left: 15px;
    }
    .container {
      max-width: 100%;
    }
    @media (min-width: 1px) {
      .navbar-toggle {
        display: block !important;
      }
    }
    @media (min-width: 992px) {
      body {
        padding: 0 0 0 300px;
      }
      .navmenu {
        padding-top: 0;
      }
      .navbar {
        display: none !important; /* для IE8 */
      }
    }
    

    Навигационное меню с slide эффектом

    Демо

  • Навигационное меню с эффектом смещения (reveal). Принцип работы данного меню заключается в смещении блока div с классом canvas (<div class="canvas">...</div>). Данный блок играет роль контейнера, в котором необходимо поместить всё содержимое страницы кроме данного меню. Во время вызова навигационного меню данный блок div смещается влево или вправо на величину, равную ширине этого меню. В освободившейся области экрана будет располагается navmenu (навигационное меню). Также можно отметить, что данный метод является противоположным методу push.

    Код HTML:

    <div class="navmenu navmenu-default navmenu-fixed-left">
      <a class="navmenu-brand" href="#">Название сайта</a>
      <ul class="nav navmenu-nav">
      ...
      </ul>
    </div>
    <div class="canvas">
      <div class="navbar navbar-default navbar-fixed-top">
        <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="container">
      <!-- Основное содержимое веб-страницы -->
      </div>
    </div>
    

    Код CSS:

    html, body {
      height: 100%;
    }
    .navbar-toggle {
      float: left;
      margin-left: 15px;
    }
    .navmenu {
      z-index: 1;
    }
    .canvas {
      position: relative;
      left: 0;
      z-index: 2;
      min-height: 100%;
      padding: 50px 0 0 0;
      background: #fff;
    }
    @media (min-width: 0) {
      .navbar-toggle {
        display: block; 
      }
    }
    @media (min-width: 992px) {
      body {
        padding: 0;
      }
      .navbar {
        right: auto;
        background: none;
        border: none;
      }
      .canvas {
        padding: 0;
      }
    }
    

    Навигационное меню с reveal эффектом

    Демо



   Bootstrap 0    35107 +1

Комментарии (71)

  1. Александр # +1
    Спасибо за хороший урок!
    У автора расширения есть ещё пример с off canvas navbar:
    Демо на сайте автора
    Но он не работает! Автор немного забросил это расширение и прекратил своевременно обновлять поддержку новых версий bootstrap. Это настораживает.
    Рабочий пример (из коммита на гитхабе): через htmlpreview.github.io

    И у меня вопрос к автору поста. Я открыл исходный код ваших примеров в браузере и мое внимание привлекли вот эти строки:

    Зачем условные комментарии HTML-escaped? Это какой-то специальный хак?
    Лично я пишу вот так:
    <!--[if lt IE 9]>
      <!-- Загружаем последние версии html5shiv и respond с jsDelivr CDN одним файлом -->
      <script src="https://cdn.jsdelivr.net/g/html5shiv,respond"></script>
      <!-- fallback на локальную копию (для параноиков, на случай падения CDN) -->
      <script>window.html5||document.write('<script src="ie/js/html5shiv.respond.min.js"><\/script>')</script>
    
      <!-- Хак для работы respond с bootstrap, подключенным через BootstrapCDN -->
      <link href="https://maxcdn.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
      <link href="ie/img/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
      <script src="ie/js/respond.proxy.js"></script>
    <![endif]-->
    1. Александр Мальцев # 0
      Добрый вечер, Александр.

      Спасибо за информацию, это не какой не хак, это так парсер обработал.
      Демки поправил.
      1. Роман # 0
        Буду очень благодарен если кто-нибудь объяснит как сделать выдвижное меню прикрепленное к левой части экрана как на этом сайте (при нажатии кнопки Меню) — www.needforspeed.com/ru_RU/news
        Пытался найти инфу в гугле ничего не нашел, но возможно я неправильно ставил вопрос.
      2. Василий # 0
        Полезная штука. Подскажите пожалуйста, как сделать, чтоб при нажатии на пункт меню, оно пряталось обратно.
        1. Александр Мальцев # 0
          Написать скрипт, который при нажатию на ссылку будет вызывать метод offcanvas('hide').
          Например так:
          //документ полностью загружен
          $(document).ready(function() {
            //при нажатию на ссылку
            $("div.navmenu li>a").click(function() {
              //скрывать меню
              $(".navmenu").offcanvas('hide');
            });
          });
          
        2. Денис # 0
          Chief, большое спасибо за Ваши уроки. Подскажите, как модифицировать меню, меняющее свою ширину в зависимости от ширины рабочей области окна браузера, чтобы верхний бар присутствовал всегда (не исчезал на высоких разрешениях). Если убрать из
          <div class="navbar navbar-default navbar-fixed-top hidden-md hidden-lg">
          
          hidden-md и hidden-lg все равно пропадает…
          1. Александр Мальцев # 0
            Денис, так просто не получится модифицировать меню от Jansy Bootstrap.
            Наиболее простое решение использовать 2 вида меню:
            1 меню — для устройств с большим экраном, которое с помощью классов hidden-xs и hidden-sm скрывать на устройствах с небольшим экраном.
            2 меню — для устройств с небольшим экраном, которое с помощью классов hidden-md и hidden-lg скрывать на устройствах с большим экраном.
            Например:
            <!--1 меню (например: стандартное от Twitter Bootstrap 3) -->
            <div class="hidden-xs hidden-sm">
            
            </div>
            <!--2 меню (например: от Jasny Bootstrap)-->
            <div class="hidden-md hidden-lg">
            
            </div>
            
            Тут ещё конечно надо проверить, что со стилями, чтобы они не переопределились там, где не надо.
            1. Olga Erushenko # 0
              я в css прописала
              @media (min-width: 3000px) {
                body {
                  padding: 0;
                }
              
              вместо
              @media (min-width: 992px)
              и работает как вы хотите. Можно еще больше задать ширину экрана. чтобы наверняка
            2. Сергей # 0
              Почему то не работает на мобильном пример itchief.ru/demo/demo-navmenu-with-slide-effect
              Выпадающие подпункты из пункта 4 на мобильных устройствах не кликабельны. Как поправить?
              1. Александр Мальцев # 0
                Да, есть такое. Кстати автор этого компонента знает об этой проблеме и она пока ещё не решена. Когда автор исправит её, достаточно будет только обновить файлы компонента.
                На текущий момент можно воспользоваться следующим решением:
                .navmenu-nav.dropdown-menu { position:relative; }
                dropdown-backdrop { position: static; }
                
                Пример поправил :)
                1. Сергей # 0
                  а что это?:
                  dropdown-backdrop { position: static; }
                  точка не нужна перед dropdown-backdrop? Это не класс?
                  1. Александр Мальцев # 0
                    Извини, за опечатку.
                    .dropdown-backdrop — это, конечно же, класс, он добавляется при открытии dropdown меню на мобильных устройствах. Был введён для правильной поддержки устройств на базе iOS.
                    .navmenu-nav.dropdown-menu { position:relative; }
                    .dropdown-backdrop { position: static; }
                    
                    1. Сергей # 0
                      Работает! Благодарю Вас.
              2. Роман # 0
                Действительно полезная вещь, если можно присоединюсь к общим вопросам)
                1) как сделать чтоб не пропадал скролинг, при выдвижном меню и при скроллинге меню пряталось.
                2) в моб версии, делая вертикальное движение по сенсору влево при открытом меню, страница «уезжает» влево при этом меню остается отрытым. Можно ли как то зафиксировать это положение? вот на примере colove.esy.es/
                1. Александр Мальцев # 0
                  Роман, привет!
                  Такие вопросы лучше конечно писать разработчику этого компонента.
                  Прямо сейчас не обещаю, но немного попозже посмотрю, как это можно доделать.

                2. Роман # 0
                  Подскажите, пожалуйста, как при использовании
                  itchief.ru/demo/demo-navmenu-with-slide-effect
                  Если меню шири и выше чем размер экрана, то появляются полосы прокрутки как от фрейма.
                  Как это можно исправить?
                  1. Александр Мальцев # 0
                    Добавить overflow: hidden; в нужных местах.

                    Например:
                    @media (min-width: 992px)
                    .navmenu {
                        padding-top: 0;
                        overflow: hidden;
                    }
                    
                  2. Ольга # 0
                    Здравствуйте. хочу в этом чудесном меню поменять: во-первых шрифт. в каком классе это сделать, чтобы шрифт всего меню поменялся? во-вторых: приделать класс nav-pills nav-stacked чтобы пункты были кнопками. но что-то пока ничего не вышло. может кто подскажет?
                    1. Александр Мальцев # 0
                      Здравствуйте.

                      Изменить шрифт меню:
                      1. Подключаем шрифт в разделе head с помощью link или каким-то другим способом:
                      <link href='https://fonts.googleapis.com/css?family=Comfortaa&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
                      
                      2. Указываем шрифт меню с помощью CSS:
                      .navmenu {
                        font-family: 'Comfortaa', cursive;
                      }
                      
                      Сделать пункты меню в виде nav-pills nav-stacked:
                      <div class="navmenu navmenu-default navmenu-fixed-left">
                        <a class="navmenu-brand" href="#">Название сайта</a>
                        <ul class="nav nav-pills nav-stacked">
                          <li class="active"><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>
                      </div>
                      <div class="canvas">
                        <div class="navbar navbar-default navbar-fixed-top">
                          <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                        </div>
                        <div class="container">
                        <!-- ... -->
                        </div>
                      </div>
                      
                      1. Ольга # 0
                        Шриф попробую. спасибо. а насчет меню: я делала так, как вы предлагаете, но названия пунктов становяться синего цвета. оформления кнопок нет. ну я как-то уже худо-бедно в своем css их выделила закругленной границей. но вот в выпадающем меню каждый пункт отделить визуально границей вообще никак. не подскажете где копать. хочу чтобы пункты были выделены границей, а при наведении цвет пункта становился в цвет границы. по-аналогии вот с этим
                        <div class="navbar navbar-default navbar-fixed-top">
                            <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                            </button>
                          </div>
                        1. Александр Мальцев # 0
                          Ольга, проверьте подключили ли Вы Jansy Bootstrap (jasny-bootstrap.min.css и jasny-bootstrap.min.js), Bootstrap 3 (bootstrap.min.css и bootstrap.min.js) и jQuery. Все необходимые стили для работы этого меню находятся в файлах jasny-bootstrap.min.css и bootstrap.min.css.
                          1. Алексей # 0
                            Здравствуйте, можете помочь реализовать данную возможность в мой код?
                            Все делаю с телефона и не выходит у меня все верно сделать
                            Заранее спасибо
                            Моя почта
                            o-5@mail.ru
                    2. Ольга # 0
                      Здравствуйте. Подскажите как сделать это меню наоборот: чтобы на маленьких экранах верхняя полоса скрывалась, а на больших была видна. сейчас оно работает наоборот.
                      1. Александр Мальцев # 0
                        Здравствуйте, Вам это надо для какого вида меню push, slide in, reveal?
                        1. Ольга # 0
                          я использую push
                          1. Александр Мальцев # 0
                            Изменить в CSS эту строчку
                            @media (min-width: 992px) {
                            
                            на эту
                            @media (min-width: 0px) and (max-width: 992px) {
                            
                            1. Ольга # 0
                              написала просто
                              @media (max-width: 992px)
                              С min-width не работало. navbar не скрывался
                      2. Ольга # 0
                        я раньше не замечала или раньше не было этой фигни: когда мы нажимаем на пункты меню в DOM клонируется меню.
                        <nav class="navmenu navmenu-default navmenu-fixed-left offcanvas offcanvas-clone in canvas-slid" role="navigation" style="right: 0px;"></nav>
                        <nav class="navmenu navmenu-default navmenu-fixed-left offcanvas offcanvas-clone" role="navigation" style=""></nav>
                        <nav class="navmenu navmenu-default navmenu-fixed-left offcanvas offcanvas-clone" role="navigation" style=""></nav>
                        Это интересно так и должно быть. Что за класс offcanvas-clone
                        1. Александр Мальцев # 0
                          За это отвечает параметр recalc.
                          Он рассчитывает, необходимо ли off canvas отключить для этой ширины области экрана при его изменении или нет.
                          Если Вам этого не надо, то можете добавить атрибут data-recalc со значением false к меню:
                          <div class="navmenu navmenu-default navmenu-fixed-left offcanvas" data-recalc="false">
                          ...
                          
                        2. Евгений # 0
                          здравствуйте, как сделать так чтобы левая колонка пряталась при любом разрешений экрана, но кнопка раскрытия оставалась не подвижным и была видна всегда? спасибо!
                          1. Александр Мальцев # 0
                            Здравствуйте, Евгений.
                            Не совсем понятен вопрос, расскажите подробнее, что и где необходимо сделать?
                            1. Евгений # 0
                              мне нужно что бы navbar прятался для всех экранов и при нажатий navbar-toggle раскрывался navbar.
                              1. Александр Мальцев # 0
                                Измените, например, для меню push строчку в CSS:
                                @media (min-width: 992px) {
                                
                                на
                                @media (min-width: 0px) {
                                
                                1. Евгений # 0
                                  а как сделать что бы кнопка раскрытия оставалась на месте?
                                  1. Александр Мальцев # 0
                                    Это доработка потянет изменения не только в CSS, но и в части JavaScript. Так что попробуйте поискать какой-либо другой компонент или самостоятельно изменить его…

                          2. Игорь # 0
                            Здравствуйте, Александр. Подскажите пожалуйста, как вставить скрывающееся навигационное меню в шаблон Joomla 3 (я его на Bootstrap 3) пишу. jQuery и Jansy Bootstrap подключил. Вообщем меню «работает», но когда прописываю CSS начинает жестко глючить мое горизонтальное меню (оно находится ниже по коду чем вертикальное). Оно выглядит так:
                            <nav class="navbar navbar-inverse">
                                      <div class="container-fluid">
                            			<!-- Brand and toggle get grouped for better mobile display -->
                            			<div class="navbar-header">
                                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topmenu" aria-expanded="false">
                                            <span class="sr-only">Toggle navigation</span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                          </button>
                                        </div>
                                        <!-- Collect the nav links, forms, and other content for toggling -->
                                        <div class="collapse navbar-collapse" id="topmenu">
                                          <jdoc:include type="modules" name="position-1" style="none" />
                                        </div><!-- /.navbar-collapse -->
                                      </div><!-- /.container-fluid -->
                                    </nav>
                            Я так понимаю, что происходит какой-то конфликт на уровне стилей. Помогите пожалуйста.
                            1. Денис # 0
                              А можно ли как то меню «Навигационное меню с эффектом смещения (reveal).» переделать, чтоб изначально на больших экранах оно открыто, а на маленьких появляется кнопка его открытия?
                              1. Дмитрий # 0
                                Подскажите плизззз
                                Как сделать что б вертикальное меню сдвигала основную часть контекста, но при этом что б справа не заезжало за экран. (т е середина сужалась0?
                                1. Александр Мальцев # 0
                                  А как же мобильные пользователи :) Если Вам необходимо создать меню для больших экранов и переключать его видимость с помощью кнопки.
                                  То можно это сделать так:
                                  <div class="container">
                                    <!-- Меню -->
                                    <div id="nav"></div>
                                    <!-- Основной блок -->
                                    <div id="main"></div>
                                  </div>
                                  
                                  А на кнопку повесить событие, которое будет переключать видимость меню:
                                  $(function() {
                                    $('#btn-menu').click(function(){
                                      $('#nav').toggle();
                                    });
                                  });
                                  
                                2. Петр Кондратенко # 0
                                  Александр, добрый день.
                                  Не могу победить следующий момент.
                                  Вертикальное меню, аккордеон раскрывающиеся при нажатии.
                                  При нажатии на ссылку в суб меню, это меню сворачивается.
                                  Как сделать, чтобы оно оставалось открытым после нажатия на ссылку и открытии следующей страницы, так как это сделано у вас в сайтбаре, зеленое меню аккордеон…
                                  Спасибо.
                                  1. Александр Мальцев # 0
                                    Здравствуйте.
                                    Петр, когда Вы задаёте вопрос, формулируйте то, что Вы хотите сделать. В таком варианте задавать вопросы не совсем корректно (сделать как у другого). Потому что непонятно, что хотите получить именно Вы?
                                    Для запоминая вкладки, использую LocalStorage.
                                    $(document).ready(function () {
                                      //при открытии панели пользователем, записываем значение её атрибута id в LocalStorage (ключ bootstrapAccordion)
                                      $("#bootstrap").on('shown.bs.collapse', function () {
                                        var active = $("#bootstrap .in").attr('id');
                                        localStorage.setItem("bootstrapAccordion", active);
                                      });
                                      //при закрытии панели удаляем bootstrapAccordion из LocalStorage
                                      $("#bootstrap").on('hidden.bs.collapse', function () {
                                        localStorage.removeItem("bootstrapAccordion");
                                      });
                                      // после загрузки страницы получаем последнюю активную панель из LocalStorage
                                      var last = localStorage.getItem("bootstrapAccordion");
                                      // если оно там есть, то открываем её
                                      if (last != null) {
                                        $("#bootstrap .panel-collapse").removeClass('in');
                                        $("#" + last).addClass("in");
                                      }
                                    });
                                    
                                    1. Петр Кондратенко # 0
                                      Александр, спасибо вам большое.
                                      Извините, что не корректно задаю вопросы, не образован еще в общей терминологии сайтостроения.
                                      Могли бы вы подсказать на каком движке собран ваш сайт? Я создал шаблон на бустрап, но ни как не могу найти подходящую CMS, что посоветуете?
                                      Спасибо.
                                      1. Александр Мальцев # 0
                                        Если создаёшь для себя, то выбирай ту, с которой ты сможешь реализовать всё задуманное. Так же не маловажный фактор — это удобство в работе, прозрачность того, что ты делаешь и т.д. У любой CMS можно найти положительные и отрицательные стороны. Поэтому тут лучших нет. На любой CMS, если хорошо разобраться можно создавать потрясающие сайты. Поэтому тут больше субъективное мнение, чем объективное. CMS очень много различных, осталось только выбрать :)
                                  2. Дмитрий # 0
                                    О… благодарю…
                                    Но текст заезжает за пределы правой части экрана.
                                    1. Александр Мальцев # 0
                                      А что тут может заезжать. Я просто показал, как можно с помощью кнопки переключать видимость блока.
                                      Начать делать можно так:
                                      <div class="container">
                                        <div class="row">
                                            <!-- Меню -->
                                            <div id="nav" class="col-sm-3">
                                              Меню
                                            </div>
                                            <!-- Основной блок -->
                                            <div id="main" class="col-xs-9"> 
                                              <button id="btn-menu">Переключить меню</button>
                                              Основной контент
                                            </div>
                                         </div>
                                      </div>
                                      
                                      <script>
                                      $(function() {
                                        $('#btn-menu').click(function(){
                                          $('#nav').toggle();
                                          if ( $('#nav').is(':visible') ) {
                                            $('#main').removeClass('col-xs-12');
                                            $('#main').addClass('col-xs-9');      
                                          }
                                          else {
                                            $('#main').removeClass('col-xs-9');
                                            $('#main').addClass('col-xs-12'); 
                                          }
                                        });
                                      });
                                      </script>
                                      
                                      1. Дмитрий # 0
                                        Добрый день!
                                        Спасибо меню очень интересное.
                                        Александр подскажите почему при нажатии на пункт подменю, на мобильных устройствах меню сворачивается и переход по ссылке не осуществляется? Второй день голову ломаю, не пойму в чём дело.
                                        Вот пациент: _http://www.alexin-portal.ru/info.php?mod=list&subcat_id=26
                                        Подробный поиск.
                                        1. Александр Мальцев # 0
                                          Попробуйте исправить ошибки, которые появляются в Console (Ctrl+Shift+I).
                                          1. Дмитрий # 0
                                            В js полный 0, в консоли не одной ошибки не увидел. Про какие ошибки идёт речь? Честно говоря надеялся на более объективный ответ ). Но всё равно спасибо.
                                        2. Игорь # 0
                                          Здравствуйте. Изначально при загрузке страницы навигационное меню с эффектом толкания (или с эффектом смещения) скрыто и вызывается нажанием кнопки. Подскажите пожалуйста, как сделать так, чтобы это меню было открыто при загрузке страницы, а в дальнейшем так же скрывалось и открывалось нажатием кнопки?
                                          1. Александр Мальцев # 0
                                            <script>
                                            $(function() {
                                              $('.navmenu').offcanvas({
                                                toggle: "offcanvas",
                                                target: ".navmenu",
                                                canvas: "body"
                                              }).offcanvas('show');
                                            });
                                            </script>
                                            
                                          2. Евгений # 0
                                            Доброго времени суток!
                                            Необходимо к этому меню прикрутить Google Maps API. Если задать height дива с картой в пикселях, то карта заданного размера отображается на странице, а если в процентах (например 100%), то она не отображается. Хотелось бы, чтобы карта была во все окно браузера. На чистой странице без меню карта отображается так, как нужно. Подскажите пожалуйста, как решить данную проблему.
                                            1. Александр Мальцев # 0
                                              Здравствуйте, попробуйте использовать абсолютное позиционирование:
                                              <div id="map" style="position: relative; overflow: hidden; display: block; height: 100%;">
                                                <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%;">
                                                  ...
                                                </div>
                                              </div>
                                              
                                              1. Евгений # 0
                                                Спасибо большое! Это решило проблему.
                                            2. Антон # 0
                                              Здравствуйте. Подскажите пожалуйста, как сделать так, чтобы навигационное меню не закрывалось при нажатии на другую область экрана, а закрывалось только нажатием на кнопку.
                                              1. Адель # 0
                                                Скажите пожалуйста как сделать трехуровневое меню, т.е. мне надо чтоб при нажатии Прайс, открывались новые подпункты Для лица, для тела итд, а в Для лица, например, Тени? Пробовала делать по аналогии с Для лица, но подпункт не открывается
                                                1. Александр Мальцев # 0
                                                  Воспользуйтесь SmartMenus.
                                                2. Роман # 0
                                                  Здравствуйте.
                                                  Буду очень благодарен если кто-нибудь объяснит как сделать выдвижное меню прикрепленное к левой части экрана как на этом сайте (при нажатии кнопки Меню) — www.needforspeed.com/ru_RU/news
                                                  Пытался найти инфу в гугле ничего не нашел, но возможно я неправильно ставил вопрос
                                                  1. Александр Мальцев # 0
                                                    Такое меню называется offcanvas. Попробуйте поискать с таким запросом.
                                                    Вот один из примеров такого меню:
                                                    _http://mmenu.frebsite.nl/examples.html
                                                  2. Pashaster (cccp-blog.com) # 0
                                                    Спасибо за библиотеку, очень выручили) Не люблю фронтэнд — а тут пришлось столкнуться, так что информация пришлась как нельзя кстати)))
                                                    1. Лорик # 0
                                                      Добрый день, Александр!
                                                      Огромное спасибо за уроки.

                                                      Вопрос по последнему примеру «Навигационное меню с эффектом смещения (reveal)»

                                                      Если у нас сверху есть шапка сайта на всю ширину. И эффектное меню, схлопывающееся на небольших экранах необходимо под ним воткнуть.
                                                      top = высота шапки, решает задачу НО при скролинге все меню отрывается от шапки на высоту top (


                                                      Подскажите пожалуйста как можно решить такую проблему?
                                                      1. Александр Мальцев # 0
                                                        Здравствуйте, Лорик. Спасибо. Это из-за того что в этом меню используется фиксированное позиционирование.
                                                        Попробуйте сделать так. После шапки сайта добавить 2 блока. Содержимое страницы помещаете между ними:
                                                        <body>
                                                          <div style="height: 100px; background: pink;">Шапка сайта</div>
                                                          <div style="position: relative; min-height: 100%;">
                                                            <div style="position: absolute;top: 0;left: 0;min-height: 100%;width: 100%;">
                                                            ... <!-- Содержимое вместе с меню reveal -->
                                                           </div>
                                                          </div>
                                                        </body>
                                                        
                                                        А также изменить позиционирование следующих элементов на абсолютное.
                                                        CSS код:
                                                        .navbar-fixed-top {
                                                          position: absolute;
                                                        }
                                                        .navmenu-fixed-left.in {
                                                          position: absolute;
                                                        }
                                                        .navmenu-fixed-left, .navbar-offcanvas.navmenu-fixed-left {
                                                          position: absolute;
                                                        }
                                                        
                                                      2. Vlad # 0
                                                        Здравствуйте. Сколько перелопатил подобных менюшек, никак не могу найти вариант, чтобы кнопка вызова менюшки могла располагаться не абсолютно, а относительно. Чтобы она появлялась при ресайзе в строго заданном месте, а не в верхнем углу поверх всего. Есть ли какие то способы?
                                                        1. Александр Мальцев # 0
                                                          Два варианта. Либо создать самому кнопку и необходимый функционал, который она будет открывать. Второй способ — найти готовое меню и изменить в нём расположение кнопки на нужное.
                                                        2. skolm5 # 0
                                                          Навигационное меню с push не работает вообще.
                                                          1. Александр Мальцев # 0
                                                            Наверно, вы не подключили к Bootstrap расширение Jansy Bootstrap. Проверьте этот момент…
                                                          2. Серега # 0
                                                            Здравствуйте Александр. Использую “Навигационное меню, которое изменяет своё расположение в зависимости от ширины рабочей области окна браузера” (предпоследнее). Если добавить больше пунктов меню, и посмотреть при ширине до 320px (портретный разворот 4.5 дюймового смартфона) меню не влазит по высоте и не появляется вертикальный скролл! При альбомном повороте работает отлично. Что можно придумать? Заранее спасибо.
                                                            1. Серега # 0
                                                              P.s Проблема для версии 3.1.3. обсуждается тут: github.com/jasny/bootstrap/issues/348
                                                              Но решения я не нашел…
                                                              1. Александр Мальцев # 0
                                                                Скорее всего, оно находится за пределами области экрана телефона.
                                                                Попробуйте в CSS добавить следующее правило:
                                                                .navmenu,
                                                                .navbar-offcanvas {
                                                                  width: 200px;
                                                                }
                                                                
                                                                Вместо 200px можете подобрать необходимое значение.
                                                                1. Серега # 0
                                                                  Дело не в этом, оно помещается по ширине. Если Вы раскроете меню при альбомном развороте девайса – скролл есть. Потом переворачиваем девайс в портретный вид (при этом меню не скрываем) – тоже есть. А теперь пробуем открыть меню сразу в портретном развороте – скролла нет и меню нельзя пролистать до конца по высоте.
                                                                  Тестировал на устройствах, плагином Chrome и банальным масштабированием окна.

                                                                  Решилось переходом на версию 3.1.2 и изменением на visible:
                                                                  $('body').css('overflow', 'visible')
                                                                  в jasny-bootstrap.js
                                                              2. Dima # 0
                                                                Использую меню которое подстраивается под размер рабочей области, можно ли на его основе сделать трехуровневое меню?
                                                                1. Александр Мальцев # 0
                                                                  Если постараться наверно можно что угодно сделать… Или как вариант можно поискать что-нибудь готовое. Например: _http://tympanus.net/Development/MultiLevelPushMenu/index2.html

                                                                Вы должны авторизоваться, чтобы оставлять комментарии.