Горизонтальное адаптивное голубое меню
Бесплатные скрипты
Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню - "три точки".
Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
Есть особенность в работе скрипта. Родитель горизонтального меню, должен иметь размер в пикселях, а не %.
Сам код меню в верхнюю часть сайта
Подключим стили между head /head или в верхнюю часть перед кодам меню
<link href="/css/normalize.css" rel="stylesheet" type='text/css'>
<link href="/css/styles.css" rel="stylesheet" type='text/css'>
Подключаем jQuery если уже подключена то вам этот пункт можно пропустить
и затем сам скрипт. Его можно поместить в файл.
Теперь скачайте архив и залейте файлы css в папку css.
При желании можно подружить данный скрипт и с уже выпадающими горизонтальными меню.
Запись добавлена
Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
Есть особенность в работе скрипта. Родитель горизонтального меню, должен иметь размер в пикселях, а не %.
Установка:
Сам код меню в верхнюю часть сайта
Код
<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>
<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>
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.
При желании можно подружить данный скрипт и с уже выпадающими горизонтальными меню.
нет уведомлений
Официальный сайт
Совместимость
Сайты Ucoz
Размер
4.7 Kb
Нет комментариев
Добавлять комментарии могут только зарегистрированные пользователи, Войдите на сайт под своим именем.