Artinblog logo
  • DLE
    • Шаблоны
    • Модули
  • SEO
    • SEO для начинающих
  • Общество
  • jQuery
  • Дизайн
  • Услуги
Главная » jQuery » Мобильное меню для сайта RSS
июн 22 2015 photo

Мобильное меню для сайта

Alessa Shtern 13 283
  • 60
  • 1
  • 2
  • 3
  • 4
  • 5

 

ВМобильное меню для сайта

 

На просторах интернета есть много плагинов, дополнений и просто решений по созданию мобильного меню для сайта, но ни один вариант мне не подошел. Пришлось писать что-то свое. 

Какие были поставлены задачи:

- вертикальное меню с выезжающим подменю, выдвигаться должно вниз, а не появляться сбоку,

- меню должно разворачиваться при клике на кнопку "+", клик на пункт меню ведет на отдельную страницу.

Такое меню отлично подойдет под мобильную версию сайта, так как там не работает эффект :hover и в тоже время видны главные пункты меню, которые обычно скрывают за кнопкой МЕНЮ. Да и просто это вертикальное меню можно использовать на сайте, кому не нравится навигация при помощи ховер-эффектов.

Мое решение может быть не идеальным, но оно работает :)

Не забываем подключить библиотеку jQuery.

Код html:

 

 


	<ul class="menu">
	    <li>
	        <a href="">Сумки</a>
	        <ul>
	            <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>
	        </ul>
	    </li>
	    <li>
	        <a href="">Обувь</a>
	        <ul>
	            <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>
	        </ul>
	    </li>
	    <li><a href="">Шарфы</a></li>
	    <li><a href="">Одежда</a></li>
	    <li><a href="">Аксессуары</a></li>
	</ul>

 

 

Оформим наше меню для мобильного устройства, кнопка "+" будет справа, а текст выравниваем по центру. Код CSS будет такой:

 

 


	.menu {
	    margin: 0;
	    padding: 0;
	    text-align: center;
	}
	.menu>li{
	    height: 40px;
	    margin-bottom: 1px;
	    list-style: none;
	}
	.menu li.sub-menu{
	    height: auto;
	}
	.menu li.sub-menu span{
	    float: right;
	    font-size: 20px;
	    width: 40px;
	    text-align: center;
	    padding-top: 8px;
	    cursor: pointer;
	    font-weight: 300;
	    color: #ADADAD;
	    position: absolute;
	    right: 10px;
	}
	.menu a{
	    text-align: center;
	    font-size: 14px;
	    text-decoration: none;
	    font-family: 'Verdana';
	}
	.menu>li>a{
	    line-height: 40px;
	    font-weight: 300;
	    padding: 0 12px;
	    background: #F6F6F6;
	    display: block;
	    height: 40px;
	    font-size: 14px;
	}
	.menu ul{
	    display: none;
	    margin: 6px 0;
	    padding: 0;
	}
	.menu li:hover>a{
	    color: #EF0505;
	    transition: color 0.5s ease;
	}
	.menu ul li{
	    font-weight: 300;
	    line-height: 20px;
	    list-style: none;
	}

 

 

Стиль меню можно оформить по своему вкусу. Для отображения на мониторах или планшетах нужно ограничить ширину вертикального меню и выравнять текст по левому краю.

И самое главное, небольшой javascript код для нашего выпадающего меню:

 


	jQuery(function($) {
	//Hide and Show Sub-Menu

	    $('.menu li').find('ul').parent().addClass('sub-menu');
	    $('.sub-menu').prepend('<span>+</span>');
	    $('.sub-menu').addClass('hide');
	    var menuShow = {
	        show: function(post){
	            $('.sub-menu ul').slideUp();
	            $(post).parent().removeClass('show');
	            $(post).parent().addClass('hide');
	        },
	        hide: function(post){
	            $('.sub-menu').removeClass('show');
	            $('.sub-menu').addClass('hide');
	            $('.sub-menu ul').slideUp();
	            $(post).parent().find('ul').slideDown();
	            $(post).parent().removeClass('hide');
	            $(post).parent().addClass('show');
	        },
	    };
	    $('.sub-menu span').click(function(){
	        if($(this).parent().attr("class") == 'sub-menu show'){
	            menuShow.show(this);
	        }else if($(this).parent().attr("class") == 'sub-menu hide'){
	            menuShow.hide(this);
	        }
	    });
	});

 

Если вкратце, то скрипт ищет пункт меню где есть суб-меню и добавляет кнопку "+", а далее прописывается функция открывающая и закрывающая наше меню. 

ДЕМО

Теги: jquery адаптивное меню вертикальное меню меню

HashFlare
Другие новости по теме:
  • Фиксированное меню при прокрутке страницы
  • Красивое вертикальное меню на CSS
  • JQuery горизонтальное выпадающее меню
  • Горизонтальное меню на CSS
  • Выпадающее меню на jQuery

Комментарии к: Мобильное меню для сайта (6)

    1. №1  Дмитрий 24-05-2016 Цитировать
      оно у тебя закрывается при перезагрузке страницы))
    1. №2  Alessa Shtern 26-07-2016 Цитировать

      Что вполне логично) меню не привязано в демо к каким либо страницам. Не буду же я куки приплетать ради демо)

    1. №3  Сергей 24-02-2017 Цитировать

      Как сюда можно добавить еще одну вложенность? Пробовал, но стили перебивают и вложеность открыта постоянно.

    1. №4  Alessa Shtern 27-02-2017 Цитировать

      ох...) добавьте свой класс третьему уровню мен и пропишите стили, а может еще и скрипт. В общем это в двух словах не описать, но вполне реально :)

    1. №5  Антон 17-01-2018 Цитировать

      У меня не работает ваш скрипт и скорее всего ни у кого не работает.

      Скопировал ваш код к себе на сайт вместе с html и итог такой в li c классом sub-menu hide внуть добавляется span соотвественно этот блок спрятан и все что в нем тоже спрятано. И как тогда он будет работать по клику на span если он спрятан?? Вы уж потрудитесь объяснить.

    1. №6  Alessa Shtern 26-01-2018 Цитировать

      Цитата: Антон
      У меня не работает ваш скрипт и скорее всего ни у кого не работает.
      Скопировал ваш код к себе на сайт вместе с html и итог такой в li c классом sub-menu hide внуть добавляется span соотвественно этот блок спрятан и все что в нем тоже спрятано. И как тогда он будет работать по клику на span если он спрятан?? Вы уж потрудитесь объяснить.

      В хроме работает. Вы уж потрудитесь понять, что статья вам дана бесплатно) В li спрятан только ul, а не span

Имя:*
Комментарий:
Сервис не доступен
Похожие статьи:
  • Фиксированное меню при прокрутке страницы
  • Красивое вертикальное меню на CSS
  • JQuery горизонтальное выпадающее меню
  • Горизонтальное меню на CSS
  • Выпадающее меню на jQuery
  • Популярное
  • Авторизация
  • Как выявить дополнительные резервы для продвижения в поиске
  • Как закрыть ссылку от индексации при помощи javascript
  • Принципы резиновой верстки сайта
  • Оптимизация изображений — обзор 8 онлайн сервисов
  • Лучшие движки для сайтов: преимущества и недостатки
  • Парсер контента от Datacol
  • Плавная прокрутка страницы сайта
  • На каком движке делать интернет-магазин. PrestaShop или OpenCart?
  • Как подобрать ключевые слова?
  • Мета-теги для сайта. Мета-тег DESCRIPTION и KEYWORDS
Войти
Забыли? Регистрация
HashFlare
  • Обратная связь
  • Карта сайта
При копировании материалов ссылка на источник Artinblog.ru обязательна. Copyright © 2012 - 2015