Боба
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

Для добавления необходима авторизация
Граффити
Форма входа

Закрыть

Горизонтальное адаптивное голубое меню
Скрипты

Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню - "три точки".
Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
Есть особенность в работе скрипта. Родитель горизонтального меню, должен иметь размер в пикселях, а не %.

Установка:


Сам код меню в верхнюю часть сайта
Код
<div class="wrapper"><nav>
  <div class="container">
  <ul id="nav">
  <li><a href="#">Главная</a></li>
  <li><a href="#">О компании</a></li>
  <li><a href="#">Каталог</a></li>
  <li><a href="#">Услуги</a></li>
  <li><a href="#">Портфолио</a></li>
  <li><a href="#">Проекты</a></li>
  <li><a href="#">Акции</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">Доставка</a></li>
  <li><a href="#">Форум</a></li>
  <li><a href="#">Блог</a></li>
  <li><a href="#">Сотрудники</a></li>
  <li><a href="#">Отзывы</a></li>
  <li><a href="#">Вакансии</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Статьи</a></li>
  <li><a href="#">Клиенты</a></li>
  <li><a href="#">Партнеры</a></li>
  <li><a href="#">История</a></li>
  <li><a href="#">Фотогалерея</a></li>
  <li><a href="#">Видео</a></li>
  <li><a href="#">Сервис</a></li>
  <li class="more">
  <span>...</span>
  <ul id="overflow">
  </ul>
  </li>
  </ul>
  </div>
  </nav>
  </div>

Подключим стили между head /head или в верхнюю часть перед кодам меню
Код

<link href="/css/normalize.css" rel="stylesheet" type='text/css'>
  <link href="/css/styles.css" rel="stylesheet" type='text/css'>

Подключаем jQuery если уже подключена то вам этот пункт можно пропустить
Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

и затем сам скрипт. Его можно поместить в файл.
Код
<script>window.onresize = navigationResize;
   
  navigationResize();
   
  function navigationResize() {  
   
  $('#nav li.more').before($('#overflow > li'));
   
  var navItemMore = $('#nav > li.more'),
  navItems = $('#nav > li:not(.more)'),
  navItemWidth = navItemMore.width(),
  windowWidth = $('#nav').parent().width(),
  navOverflowWidth;
   
  navItems.each(function(){
  navItemWidth += $(this).width();
  });
   
  navItemWidth > windowWidth ? navItemMore.show() : navItemMore.hide();
   
  while (navItemWidth > windowWidth) {
  navItemWidth -= navItems.last().width();
  navItems.last().prependTo('#overflow');
  navItems.splice(-1,1);
  }
  navOverflowWidth = $('#overflow').width();
   
  }</script>

Теперь скачайте архив и залейте файлы css в папку css.

При желании можно подружить данный скрипт и с уже выпадающими горизонтальными меню.

Особености:

Тематика
Для любого cайта
Браузеры
Одинаково работаее на всех браузерах последней версии
Адаптация
Есть
Архив
Все нужные файлы
Размер
4.4Kb

Скачивать файлы могут только зарегистрированные пользователи, Войдите на сайт под своим именем.

Запись добавлена

Комментарии

Нет комментариев

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