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

Содержание:
  1. Назначение расширения Jansy Bootstrap
  2. Подключение расширения Jansy Bootstrap
  3. Вертикальное навигационное меню
  4. Меню, прикреплённое к левой или правой части экрана
  5. Скрывающееся навигационное меню
  6. Комментарии

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

Назначение расширения Jansy Bootstrap

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

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

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

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

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

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

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

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

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

Подключение расширения Jansy Bootstrap

Для подключения к веб-странице расширения 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 во время создания пользовательской сборки.

Код HTML

<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>

Код CSS

.navmenu {
width: 200px;
}

Меню

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

Меню, прикреплённое к левой или правой части экрана

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

Код HTML

<nav class="navmenu navmenu-default navmenu-fixed-left" role="navigation">
...
</nav>

Код CSS

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 эффектом

    Демо

Комментарии: 97

Ossimoro
Ossimoro
Добрый день, Александр.

Пользуясь случаем, выражаю признательность за столь кропотливую и полезную работу! Материал изложен системно, чётко и доходчиво. Даже для неискушённого «строителя сайтов» (знаю лишь HTML и CSS).

Пара вопросов, правда, возникла:

1. Задача: На странице якорь, ссылка на который есть в меню. Как добиться, чтобы меню (и навбар) автоматически убиралось с экрана после скролла до этого якоря?

2. Как сделать, чтобы в адаптивной вёрстке после перехода по ссылке меню, убирался с экрана (вверх или влево/вправо) весь navbar (не только меню), заменяясь на hamburger (как это и происходит на десктопе)?

Заранее благодарен.
Мария
Мария
Огромное спасибо, Шеф, это то, что я искала. Только у меня возникла проблема, в мобильной версии меню выезжает слева и не прокручивается по оси Y вниз. У меня длинное меню категорий выходящее за нижнее поле, могли бы Вы подсказать как исправить эту ошибку. В консоли пусто. Просто залипает всё в пределах одного экрана и все, чтобы мотнуть страницу вниз — надо закрыть меню.
Александр Мальцев
Александр Мальцев
Пожалуйста! Возьмите за основу это, оно прокручивается вниз.
Serjo
Serjo
Привет шеф, хочу сделать просто адаптивное меню слева на 4 колонки, а остальное место под слайдер и всё это на 100% ширину и высоту. основная проблема в том, что слайдер не принимает нужные мне размеры, картинка большая, но слайдер сам урезается.
Павел
Павел
Добрый вечер Шеф!

Сделал таблицу с ценами услуг, на странице цены, надо ее правильно доработать? Пробовал различные компоненты(pdoResources, pdoField, pdoMenu), знаний не хватает нужна помощь!

В админке, есть категория с двумя под категориями в них содержаться по три статьи с описаниям услуг.



Пока получилась вот такая таблица при помощи компонента pdoMenu, в принципе все устраивает вот только надо чтобы выбирать можно было не по под категориям, а по категории родителю (тоесть не по &parents=`20,24`, а по &parents=`19`) с тем же эффектом. Если будут создавать нового ребенка, пусть он на странице цены добавлялся автоматом.


Код самой выборки
[[pdoMenu?
    &parents=`20,24`
    &level=`3`
    &limit=`0`
    &includeTVs=`prices`
    &sortdir=`ASC`
    &sortby=`pagetitle`
    &hideContainers=`0`
    &showHidden=`1`
    &displayStart=`1`
    &tplOuter=`@INLINE <div class="col-xs-12 col-sm-9 col-sm-offset-1 col-md-9 col-md-offset-1">[[+wrapper]]</div>`
    &tplStart=`@INLINE  <h3>[[+longtitle]]</h3>
                        <div class="table-responsive">
                          <table class="table table-striped">
                            <tbody>
                              [[+wrapper]]
                            </tbody>
                          </table>
                        </div>`
    &tpl=`@INLINE <tr>
                    <td>[[+wf.pagetitle]]</td>
                    <td>от [[+prices:default=`0`]]</td>
                    <td><a href="[[+uri]]" class="btn btn-orange sharp"><i class="fa fa-pencil" aria-hidden="true"></i> Записаться</a></td>
                  </tr>`
  ]]
Заранее большое спасибо!!!
Александр Мальцев
Александр Мальцев
Добрый вечер!
Попробуйте сделать так:
[[pdoMenu?
    &parents=`19`
    &resources=`-19`
    ...
Павел
Павел
Шеф Благодарю, все работает!!!
criad
criad
Ссылки в последнем варианте открываются только при двойном нажатии. Подскажите как это исправить?
Александр Мальцев
Александр Мальцев
А в каком браузере и ОС? Это в демо или на вашем сайте?
criad
criad
Во всех браузерах.
alexin-portal.ru/home.php?mod=space&uid=1&do=profile
Александр Мальцев
Александр Мальцев
Это вам необходимо разобраться с вашими скриптами. Скорее всего, код некоторого из них отменяет это действие или происходит какой-то конфликт.
В качестве временного решения можете добавить на страницу этот скрипт после подключения библиотеки jQuery:
jQuery('#toptb .dropdown-menu a').click(function(){
  var href = this.href;
  location.href = href;
});
criad
criad
Александр спасибо за помощь, но временное решение к сожалению не работает.
Александр Мальцев
Александр Мальцев
Для начала необходимо устранить все ошибки в JavaScript, которые отображаются у вас на странице в консоли браузера. И только затем добавить эту конструкцию после всех сценариев JavaScript.
Александр
Александр
Александр, здравствуйте!
Пробовал сделать меню с эффектом reveal с выделенным цветом заголовком страницы, как у Вас на скриншоте. Но цвет не отрисовывается. На демо также этого цвета нет. Пробовал в разных браузерах.
MFNIK
MFNIK
Добрый день Александр! А можно ли реализовать такой вариант?
getuikit.com/docs/introduction
И еще сам побывал реализовывать но только с двумя меню, но думаю в ситуации с modx это будет дополнительная загрузка меню, наверное будет тормозить.

Еще интересно сделано, в боковое меню сливается и верхнее и боковое.

Пока не придумал как сделать, с помощью этого компонента!
Александр Мальцев
Александр Мальцев
Здравствуйте. Попробуйте. В качестве левого меню, можете взять это (которое приведено в статье). А правое меню создать самостоятельно (с помощью списка ul). В левое меню добавить ещё блок с пунктами верхнего меню, который будет отображаться только на мобильных устройствах. Насчёт долгой загрузки не совсем понял, его вообще в MODX можно настроить так, чтобы оно сохранялось в кэш. Тогда оно вообще ни какой нагрузки создавать не будет.
MFNIK
MFNIK
По поводу MODx
К примеру:
<div class="navmenu navmenu-default navmenu-fixed-left">
  <a class="navmenu-brand" href="#">Название сайта</a>
  <ul class="nav navmenu-nav">
  	[[pdoMenu?
    		&parents=`вверхнее меню`
		
	]]
	<hr>
	[[pdoMenu?
    		&parents=`боковое меню`
		
	]]
  </ul>
</div>
это меню для мобильных, оно и так загружается при загрузке страницы, только скрыто стилями и JS.
<div class="container">
  <!-- Основное содержимое веб-страницы -->
	[[pdoMenu?
    		&parents=`вверхнее меню`
		
	]]
  </div>
— основной контент

Получается что 2 меню одновременно загружаются!

Я пока правда не реализовывал в MODX, незнаю вообще будет так работать) два одинаковых сниппета в одном месте.)))

MFNIK
MFNIK
Не нормально работает! _http://nikandlc.beget.tech/справочник/введение/
А вы не знаете, как решить проблему ScrollSpy в данной странице. Почему перезагружает страницу?
Александр Мальцев
Александр Мальцев
Потому что у вас ссылки в правом меню, где используется ScrollSpy имеют такой вид:
<a href="#m2">Для чего он нужен?</a>
Тег base имеет следующий код:
<base href="http://nikandlc.beget.tech/">
Следовательно, ссылки, у вас будут ссылаться на главную страницу. Например, вышеприведённая будет указывать на:
http://nikandlc.beget.tech/#m2
А должна на текущую страницу (в вашем примере):
http://nikandlc.beget.tech/справочник/введение#m2
Для этого вам необходимо формировать полный адрес ссылки (а не только его хэш часть).
Но для того чтобы сохранить функциональность ScrollSpy (он не может работать с такими адресами) дополнительно использовать атрибут data-target.
Т.е. ссылки формировать для меню в таком варианте:
<a href="http://nikandlc.beget.tech/справочник/введение#m2" data-target="#m2">Для чего он нужен?</a>
Александр Мальцев
Александр Мальцев
На одной странице можно использовать хоть сколько вызовов одних и тех же сниппетов.
MFNIK
MFNIK
Вот решение!
<a href="[[~[[*id]]? &scheme=`full`]]#m[[+idx]]" data-target="#m[[+idx]]">[[+menutitle]]</a>
Александр Мальцев
Александр Мальцев
Молодец!
Саша
Саша
Александр, здравствуйте!
Никак не могу порешать одну задачу: необходимо, чтобы после уменьшения экрана до sm и меньше левый блок исчезал и появлялся по нажатию на левую кнопку слева, а правый исчезал на xs, а появлялся по нажатию на правую кнопку справа.
Сам пытаюсь реализовать — получается только как выпадающее сверху меню
Визуально как-то так
Александр Мальцев
Александр Мальцев
Здравствуйте. Не понятно как эти блоки должны отображаться на xs и sm. Т.е. как у вас изображено или поверх центрального блока.
Саша
Саша
Поверх центрального
Александр Мальцев
Александр Мальцев
Это можно сделать следующим образом:
1. Основное содержимое страницы:
<body>
<!-- Навигационное меню -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
      <a class="navbar-brand" href="#">Название сайте</a>
	  <!-- Кнопка, переключающее левое меню -->
	  <button class="toggle-left navbar-btn btn btn-default hidden-md hidden-lg" href="#">Left</button>
	  <!-- Кнопка, переключающее правое меню -->
	  <button class="toggle-right navbar-btn btn btn-default hidden-sm hidden-md hidden-lg" href="#">Right</button>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Пункт меню</a></li>
      </ul>
    </div>
  </div>
</nav>

<div id="wrapper">
  <div id="canvas">
    <div id="left" class="col-md-3" style="background: yellow;">
      Содержимое левого меню...
    </div>
    <div id="main" class="col-sm-8 col-md-6" style="background: green;">
      Основное содержимое...
    </div>	
    <div id="right" class="col-sm-4 col-md-3" style="background: brown;">
      Содержимое правого меню...
    </div>
  </div>
</div>
</body>
Назначение основных элементов HTML-кода:
wrapper — используется для скрытия элементов, расположенных за его областью
canvas — элемент, который будем двигать влево или вправо, и тем самым отображать левое или правое меню.
left — левое меню
right — правое меню
middle — блок, для помещения в него основного содержимого.

2. CSS-стили:
 /* xs и sm */
@media screen and (max-width:991px) {
  #wrapper {
    position: relative;
	overflow: hidden;
	width: 100%;
  }
  #canvas {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform: translateX(0);
	transform: translateX(0);
    -webkit-transition: .3s ease all;
    transition: .3s ease all;
  }
  #left {
    width: 300px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -300px;
    background: #428bca;
    padding: 15px;
  }
  #wrapper.show-left #canvas {
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
  }
}
/* xs */
@media screen and (max-width:767px) { 
  #right {
    width: 300px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -300px;
  }
  #wrapper.show-right #canvas {
    -webkit-transform: translateX(-300px);
    transform: translateX(-300px);
  }  
}
#wrapper, #main, #left, #right {
  height: 2000px; /* для отладки */
}
Для показа левого меню необходимо добавить к элементу с id=«wrapper» класс show-left. Для правого — соотвественно класс show-right.

3. Код JavaScript, который будет отображать при нажатию кнопку Left или Right соответствующий блок:
<script>
$(function() {
  $('.toggle-left').click(function() {
    toggleLeft();
  });
  $('.toggle-right').click(function() {
    toggleRight();
  });
  function toggleLeft() {
    if ($('#wrapper').hasClass('show-right')) {
      $('#wrapper').toggleClass('show-right');
    }
    $('#wrapper').toggleClass('show-left');
  }
  function toggleRight() {
    if ($('#wrapper').hasClass('show-left')) {
      $('#wrapper').toggleClass('show-left');
    }
    $('#wrapper').toggleClass('show-right');
  }
});
</script>
Dima
Dima
Использую меню которое подстраивается под размер рабочей области, можно ли на его основе сделать трехуровневое меню?
Александр Мальцев
Александр Мальцев
Если постараться наверно можно что угодно сделать… Или как вариант можно поискать что-нибудь готовое. Например: _http://tympanus.net/Development/MultiLevelPushMenu/index2.html
Серега
Серега
Здравствуйте Александр. Использую “Навигационное меню, которое изменяет своё расположение в зависимости от ширины рабочей области окна браузера” (предпоследнее). Если добавить больше пунктов меню, и посмотреть при ширине до 320px (портретный разворот 4.5 дюймового смартфона) меню не влазит по высоте и не появляется вертикальный скролл! При альбомном повороте работает отлично. Что можно придумать? Заранее спасибо.
Серега
Серега
P.s Проблема для версии 3.1.3. обсуждается тут: github.com/jasny/bootstrap/issues/348
Но решения я не нашел…
Александр Мальцев
Александр Мальцев
Скорее всего, оно находится за пределами области экрана телефона.
Попробуйте в CSS добавить следующее правило:
.navmenu,
.navbar-offcanvas {
  width: 200px;
}
Вместо 200px можете подобрать необходимое значение.
Серега
Серега
Дело не в этом, оно помещается по ширине. Если Вы раскроете меню при альбомном развороте девайса – скролл есть. Потом переворачиваем девайс в портретный вид (при этом меню не скрываем) – тоже есть. А теперь пробуем открыть меню сразу в портретном развороте – скролла нет и меню нельзя пролистать до конца по высоте.
Тестировал на устройствах, плагином Chrome и банальным масштабированием окна.

Решилось переходом на версию 3.1.2 и изменением на visible:
$('body').css('overflow', 'visible')
в jasny-bootstrap.js
skolm5
skolm5
Навигационное меню с push не работает вообще.
Александр Мальцев
Александр Мальцев
Наверно, вы не подключили к Bootstrap расширение Jansy Bootstrap. Проверьте этот момент…
Vlad
Vlad
Здравствуйте. Сколько перелопатил подобных менюшек, никак не могу найти вариант, чтобы кнопка вызова менюшки могла располагаться не абсолютно, а относительно. Чтобы она появлялась при ресайзе в строго заданном месте, а не в верхнем углу поверх всего. Есть ли какие то способы?
Александр Мальцев
Александр Мальцев
Два варианта. Либо создать самому кнопку и необходимый функционал, который она будет открывать. Второй способ — найти готовое меню и изменить в нём расположение кнопки на нужное.
Лорик
Лорик
Добрый день, Александр!
Огромное спасибо за уроки.

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

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


Подскажите пожалуйста как можно решить такую проблему?
Александр Мальцев
Александр Мальцев
Здравствуйте, Лорик. Спасибо. Это из-за того что в этом меню используется фиксированное позиционирование.
Попробуйте сделать так. После шапки сайта добавить 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;
}
Аноним
Аноним
Спасибо за библиотеку, очень выручили) Не люблю фронтэнд — а тут пришлось столкнуться, так что информация пришлась как нельзя кстати)))
Аноним
Аноним
Здравствуйте.
Буду очень благодарен если кто-нибудь объяснит как сделать выдвижное меню прикрепленное к левой части экрана как на этом сайте (при нажатии кнопки Меню) — www.needforspeed.com/ru_RU/news
Пытался найти инфу в гугле ничего не нашел, но возможно я неправильно ставил вопрос
Александр Мальцев
Александр Мальцев
Такое меню называется offcanvas. Попробуйте поискать с таким запросом.
Вот один из примеров такого меню:
_http://mmenu.frebsite.nl/examples.html
Аноним
Аноним
Скажите пожалуйста как сделать трехуровневое меню, т.е. мне надо чтоб при нажатии Прайс, открывались новые подпункты Для лица, для тела итд, а в Для лица, например, Тени? Пробовала делать по аналогии с Для лица, но подпункт не открывается
Александр Мальцев
Александр Мальцев
Воспользуйтесь SmartMenus.
Аноним
Аноним
Здравствуйте. Подскажите пожалуйста, как сделать так, чтобы навигационное меню не закрывалось при нажатии на другую область экрана, а закрывалось только нажатием на кнопку.
Аноним
Аноним
Доброго времени суток!
Необходимо к этому меню прикрутить Google Maps API. Если задать height дива с картой в пикселях, то карта заданного размера отображается на странице, а если в процентах (например 100%), то она не отображается. Хотелось бы, чтобы карта была во все окно браузера. На чистой странице без меню карта отображается так, как нужно. Подскажите пожалуйста, как решить данную проблему.
Александр Мальцев
Александр Мальцев
Здравствуйте, попробуйте использовать абсолютное позиционирование:
<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>
Аноним
Аноним
Спасибо большое! Это решило проблему.
Аноним
Аноним
Здравствуйте. Изначально при загрузке страницы навигационное меню с эффектом толкания (или с эффектом смещения) скрыто и вызывается нажанием кнопки. Подскажите пожалуйста, как сделать так, чтобы это меню было открыто при загрузке страницы, а в дальнейшем так же скрывалось и открывалось нажатием кнопки?
Александр Мальцев
Александр Мальцев
<script>
$(function() {
  $('.navmenu').offcanvas({
    toggle: "offcanvas",
    target: ".navmenu",
    canvas: "body"
  }).offcanvas('show');
});
</script>
Аноним
Аноним
Добрый день!
Спасибо меню очень интересное.
Александр подскажите почему при нажатии на пункт подменю, на мобильных устройствах меню сворачивается и переход по ссылке не осуществляется? Второй день голову ломаю, не пойму в чём дело.
Вот пациент: _http://www.alexin-portal.ru/info.php?mod=list&subcat_id=26
Подробный поиск.
Александр Мальцев
Александр Мальцев
Попробуйте исправить ошибки, которые появляются в Console (Ctrl+Shift+I).
Аноним
Аноним
В js полный 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>
Аноним
Аноним
О… благодарю…
Но текст заезжает за пределы правой части экрана.
Аноним
Аноним
Александр, добрый день.
Не могу победить следующий момент.
Вертикальное меню, аккордеон раскрывающиеся при нажатии.
При нажатии на ссылку в суб меню, это меню сворачивается.
Как сделать, чтобы оно оставалось открытым после нажатия на ссылку и открытии следующей страницы, так как это сделано у вас в сайтбаре, зеленое меню аккордеон…
Спасибо.
Александр Мальцев
Александр Мальцев
Здравствуйте.
Петр, когда Вы задаёте вопрос, формулируйте то, что Вы хотите сделать. В таком варианте задавать вопросы не совсем корректно (сделать как у другого). Потому что непонятно, что хотите получить именно Вы?
Для запоминая вкладки, использую 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");
  }
});
Аноним
Аноним
Александр, спасибо вам большое.
Извините, что не корректно задаю вопросы, не образован еще в общей терминологии сайтостроения.
Могли бы вы подсказать на каком движке собран ваш сайт? Я создал шаблон на бустрап, но ни как не могу найти подходящую CMS, что посоветуете?
Спасибо.
Александр Мальцев
Александр Мальцев
Если создаёшь для себя, то выбирай ту, с которой ты сможешь реализовать всё задуманное. Так же не маловажный фактор — это удобство в работе, прозрачность того, что ты делаешь и т.д. У любой CMS можно найти положительные и отрицательные стороны. Поэтому тут лучших нет. На любой CMS, если хорошо разобраться можно создавать потрясающие сайты. Поэтому тут больше субъективное мнение, чем объективное. CMS очень много различных, осталось только выбрать :)
Аноним
Аноним
Подскажите плизззз
Как сделать что б вертикальное меню сдвигала основную часть контекста, но при этом что б справа не заезжало за экран. (т е середина сужалась0?
Александр Мальцев
Александр Мальцев
А как же мобильные пользователи :) Если Вам необходимо создать меню для больших экранов и переключать его видимость с помощью кнопки.
То можно это сделать так:
<div class="container">
  <!-- Меню -->
  <div id="nav"></div>
  <!-- Основной блок -->
  <div id="main"></div>
</div>
А на кнопку повесить событие, которое будет переключать видимость меню:
$(function() {
  $('#btn-menu').click(function(){
    $('#nav').toggle();
  });
});
Аноним
Аноним
А можно ли как то меню «Навигационное меню с эффектом смещения (reveal).» переделать, чтоб изначально на больших экранах оно открыто, а на маленьких появляется кнопка его открытия?
Игорь
Игорь
Здравствуйте, Александр. Подскажите пожалуйста, как вставить скрывающееся навигационное меню в шаблон 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>
Я так понимаю, что происходит какой-то конфликт на уровне стилей. Помогите пожалуйста.
Аноним
Аноним
здравствуйте, как сделать так чтобы левая колонка пряталась при любом разрешений экрана, но кнопка раскрытия оставалась не подвижным и была видна всегда? спасибо!
Александр Мальцев
Александр Мальцев
Здравствуйте, Евгений.
Не совсем понятен вопрос, расскажите подробнее, что и где необходимо сделать?
Аноним
Аноним
мне нужно что бы navbar прятался для всех экранов и при нажатий navbar-toggle раскрывался navbar.
Александр Мальцев
Александр Мальцев
Измените, например, для меню push строчку в CSS:
@media (min-width: 992px) {
на
@media (min-width: 0px) {
Аноним
Аноним
а как сделать что бы кнопка раскрытия оставалась на месте?
Александр Мальцев
Александр Мальцев
Это доработка потянет изменения не только в CSS, но и в части JavaScript. Так что попробуйте поискать какой-либо другой компонент или самостоятельно изменить его…

Аноним
Аноним
я раньше не замечала или раньше не было этой фигни: когда мы нажимаем на пункты меню в 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
Александр Мальцев
Александр Мальцев
За это отвечает параметр recalc.
Он рассчитывает, необходимо ли off canvas отключить для этой ширины области экрана при его изменении или нет.
Если Вам этого не надо, то можете добавить атрибут data-recalc со значением false к меню:
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas" data-recalc="false">
...
Аноним
Аноним
Здравствуйте. Подскажите как сделать это меню наоборот: чтобы на маленьких экранах верхняя полоса скрывалась, а на больших была видна. сейчас оно работает наоборот.
Александр Мальцев
Александр Мальцев
Здравствуйте, Вам это надо для какого вида меню push, slide in, reveal?
Аноним
Аноним
я использую push
Александр Мальцев
Александр Мальцев
Изменить в CSS эту строчку
@media (min-width: 992px) {
на эту
@media (min-width: 0px) and (max-width: 992px) {
Аноним
Аноним
написала просто
@media (max-width: 992px)
С min-width не работало. navbar не скрывался
Аноним
Аноним
Здравствуйте. хочу в этом чудесном меню поменять: во-первых шрифт. в каком классе это сделать, чтобы шрифт всего меню поменялся? во-вторых: приделать класс nav-pills nav-stacked чтобы пункты были кнопками. но что-то пока ничего не вышло. может кто подскажет?
Александр Мальцев
Александр Мальцев
Здравствуйте.

Изменить шрифт меню:
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>
Аноним
Аноним
Шриф попробую. спасибо. а насчет меню: я делала так, как вы предлагаете, но названия пунктов становяться синего цвета. оформления кнопок нет. ну я как-то уже худо-бедно в своем 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>
Александр Мальцев
Александр Мальцев
Ольга, проверьте подключили ли Вы 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.
Аноним
Аноним
Здравствуйте, можете помочь реализовать данную возможность в мой код?
Все делаю с телефона и не выходит у меня все верно сделать
Заранее спасибо
Моя почта
o-5@mail.ru
Аноним
Аноним
Подскажите, пожалуйста, как при использовании
itchief.ru/examples/lab.php?topic=bootstrap&file=b3-navbar-jansy-slide
Если меню шири и выше чем размер экрана, то появляются полосы прокрутки как от фрейма.
Как это можно исправить?
Александр Мальцев
Александр Мальцев
Добавить overflow: hidden; в нужных местах.

Например:
@media (min-width: 992px)
.navmenu {
    padding-top: 0;
    overflow: hidden;
}
Аноним
Аноним
Действительно полезная вещь, если можно присоединюсь к общим вопросам)
1) как сделать чтоб не пропадал скролинг, при выдвижном меню и при скроллинге меню пряталось.
2) в моб версии, делая вертикальное движение по сенсору влево при открытом меню, страница «уезжает» влево при этом меню остается отрытым. Можно ли как то зафиксировать это положение?
Александр Мальцев
Александр Мальцев
Роман, привет!
Такие вопросы лучше конечно писать разработчику этого компонента.
Прямо сейчас не обещаю, но немного попозже посмотрю, как это можно доделать.

Аноним
Аноним
Почему то не работает на мобильном пример itchief.ru/examples/lab.php?topic=bootstrap&file=b3-navbar-jansy-slide
Выпадающие подпункты из пункта 4 на мобильных устройствах не кликабельны. Как поправить?
Александр Мальцев
Александр Мальцев
Да, есть такое. Кстати автор этого компонента знает об этой проблеме и она пока ещё не решена. Когда автор исправит её, достаточно будет только обновить файлы компонента.
На текущий момент можно воспользоваться следующим решением:
.navmenu-nav.dropdown-menu { position:relative; }
dropdown-backdrop { position: static; }
Пример поправил :)
Аноним
Аноним
а что это?:
dropdown-backdrop { position: static; }
точка не нужна перед dropdown-backdrop? Это не класс?
Александр Мальцев
Александр Мальцев
Извини, за опечатку.
.dropdown-backdrop — это, конечно же, класс, он добавляется при открытии dropdown меню на мобильных устройствах. Был введён для правильной поддержки устройств на базе iOS.
.navmenu-nav.dropdown-menu { position:relative; }
.dropdown-backdrop { position: static; }
Аноним
Аноним
Работает! Благодарю Вас.
Аноним
Аноним
Chief, большое спасибо за Ваши уроки. Подскажите, как модифицировать меню, меняющее свою ширину в зависимости от ширины рабочей области окна браузера, чтобы верхний бар присутствовал всегда (не исчезал на высоких разрешениях). Если убрать из
<div class="navbar navbar-default navbar-fixed-top hidden-md hidden-lg">
hidden-md и hidden-lg все равно пропадает…
Александр Мальцев
Александр Мальцев
Денис, так просто не получится модифицировать меню от 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>
Тут ещё конечно надо проверить, что со стилями, чтобы они не переопределились там, где не надо.
Olga Erushenko
Olga Erushenko
я в css прописала
@media (min-width: 3000px) {
  body {
    padding: 0;
  }
вместо
@media (min-width: 992px)
и работает как вы хотите. Можно еще больше задать ширину экрана. чтобы наверняка
Аноним
Аноним
Полезная штука. Подскажите пожалуйста, как сделать, чтоб при нажатии на пункт меню, оно пряталось обратно.
Александр Мальцев
Александр Мальцев
Написать скрипт, который при нажатию на ссылку будет вызывать метод offcanvas('hide').
Например так:
//документ полностью загружен
$(document).ready(function() {
  //при нажатию на ссылку
  $("div.navmenu li>a").click(function() {
    //скрывать меню
    $(".navmenu").offcanvas('hide');
  });
});
Аноним
Аноним
Спасибо за хороший урок!
У автора расширения есть ещё пример с 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]-->
Александр Мальцев
Александр Мальцев
Добрый вечер, Александр.

Спасибо за информацию, это не какой не хак, это так парсер обработал.
Демки поправил.
Аноним
Аноним
Буду очень благодарен если кто-нибудь объяснит как сделать выдвижное меню прикрепленное к левой части экрана как на этом сайте (при нажатии кнопки Меню) — www.needforspeed.com/ru_RU/news
Пытался найти инфу в гугле ничего не нашел, но возможно я неправильно ставил вопрос.