Многоуровневое горизонтальное меню css – Горизонтальное выпадающее многоуровневое меню

alexxlab

Меню многоуровневое горизонтальное и вертикальное CSS

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

Для того чтоб переделать вертикальное меню в горизонтальное, достаточно изменить лишь одно значение в стилях. О чём я укажу в комментариях в коде.

Я даю только эскиз меню. Оформлять и наводить красоту, каждый будет по своему вкусу.

1. Вертикальное

 

 

2. Горизонтальное

 

Код:

HTML


<div>
<ul>
<li><a href="">Meny1</a>
<ul>
<li><a href="">Meny 1-2</a>
<ul>
<li><a href="">Meny 1-2-1</a></li>
<li><a href="">Meny 1-2-2</a></li>
</ul>
</li>
<li><a href="">Meny 1-3</a>
<ul>
<li><a href="">Meny 1-3-1</a></li>

<li><a href="">Meny 1-3-2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Meny 2</a>
<ul>
<li><a href="">Meny 2-1</a>
<ul>
<li><a href="">Meny 2-1-1</a></li>
<li><a href="">Meny 2-1-2</a></li>
</ul>
</li>
<li><a href="">Meny 2-2</a>
<ul>
<li><a href="">Meny 2-2-1</a></li>
<li><a href="">Meny 2-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Чтоб не выкладывать огромную портянку, я сделал только два блока с двумя уровнями, но вы можете простым копированием добавлять в этот код столько блоков сколько надо и делать столько уровней в каждом блоке, сколько вам потребуется.

Стили для всех блоков, имеющихся и добавленных, будут одинаковыми.

CSS


.nav {
background: white;
text-align: center;
}
.nav a {
text-decoration: none;
display: block;
transition: .5s linear;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.topmenu > li {
display: block;
/*Если вместо block задать inline-block,
меню будет горизонтальным*/
position: relative;
}
.topmenu > li > a {
font-weight: bold;
padding: 10px 30px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: #1c1c1c;
border: 1px solid #999;
}
.submenu {
position: absolute;
left: 10px;
z-index: 5;
width: 240px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: .5s ease-in-out;
}
.submenu li {
position: relative;
border: 1px solid #999;
margin:2px;
}
.submenu a {
background: white;
color: #1c1c1c;
text-align: center;
font-size: 14px;
letter-spacing: 1px;
padding: 10px 20px;
}
.submenu .submenu {
position: absolute;
top: 0;
left: 200px;

}
.nav li:hover > .submenu {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}

Желаю творческих успехов.

В раздел > > >

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

Запись опубликована в рубрике CSS основы, HTML основы. Добавьте в закладки постоянную ссылку.

starper55plys.ru

Многоуровневое горизонтальное меню на HTML и CSS

В продолжение темы про меню я хочу описать еще один вид меню – многоуровневое меню. Если у вас на сайте имеется большое количество разделов – это то что вам нужно. Многоуровневое меню

Делать наше меню заново нету смысла, по-этому сегодня мы просто возьмем за основу “Простое горизонтальное меню”, которое я описывал здесь. Так что вы можете просто скачать исходники нашего меню и дописать всего пару строчек.

HTML

Разметка для нашего меню отличается от исходного только пару строчками, а именно еще одним вложенным списком уже во вложенный ранее список.

<ul>
        <li><a href="#">О нас</a></li>
        <li>
                <a href="#">Статьи</a>
                <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li>
                            <a href="#">jQuery</a>
                            <ul>
                                <li><a href="#">Вступление</a></li>
                                <li><a href="#">Начальный</a></li>
                                <li><a href="#">Продвинутый</a></li>
                            </ul>
                        </li>
                </ul>
        </li>
        <li>
                <a href="#">Видео курс</a>

        </li>
        <li>
                <a href="#">Материалы</a>
        </li>
        <li>
                <a href="#">Форум</a>
        </li>
</ul>

CSS

Стили особого изменения тоже не потерпят. Мы только подвинем наш “вдвойне вложенный” список немного вправо, а все остальное действует аналогично.

#menu {
        padding: 0;
        margin: 0;
        font-family:  Verdana;
        }
#menu li {
        list-style: none;
        float: left;
        height: 30px;
        padding: 0;
        margin: 0;
        width: 150px;
        text-align: center;
        background:  #95DF8E;
        position: relative;
        padding-top: 12px;
        }
#menu li ul{
        list-style: none;
        padding: 0;
        margin: 0;
        width: 150px;
        display: none;
        position: absolute;
        left: 0;
        top: 42px;
        }
#menu li ul li{
        float: none;
        height: 30px;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #95DF8E;
        }
#menu li a{
        display: block;
        width: 150px;
        height: 30px;
        color:    #006A35;
        text-decoration: none;
        }

  #menu li:hover ul{
          display: block;
          }
  #menu li:hover{
          background: #35C835;
          }
  #menu li ul li ul{
    left:150px;
    top: 0;
  }
  #menu li ul li ul li{display: none;}
  #menu li ul li:hover ul li{display: block;}

Готово

Вот и все – наше превращение закончено. Но не увлекайтесь – больше не значит лучше. Подсказка: если в вашем меню не все пункты меню разворачиваются – пометьте те, которые могут развернутся(например, знаком “+”, или картинкой на фоне)

webcomplex.com.ua

Адаптивное горизонтальное меню

адаптивное горизонтальное менюВ наше время для сайта всё чаще становится актуальным воплощение адаптивного горизонтального меню, это то меню, которое на мобильных устройствах будет схлопываться и принимать удобный для навигации вид. Чтобы внедрить адаптивное горизонтальное меню на странице, достаточно применить навыки в css и в некоторых случаях дополнить его скриптом js.

В этой статье хочу поведать вам несколько примеров, где будут рассмотрены: адаптивное горизонтальное многоуровневое меню с использованием js скрипта и без него, и адаптивное горизонтальное меню выполненное чисто на css.

В основном навигацию располагают в видимой области сайта и как правило в шапке страницы, и далее вы узнаете, как можно сделать адаптивное горизонтальное меню, где будут показаны несколько примеров.
А уже какой из вариантов вы будете использовать, — это решать вам.

Представленные ниже на DEMO примеры для меню прошли проверку на корректность отображения и адаптивность в основных браузерах. Есть некоторая погрешность всего в 1-2 px для некоторых не значительных элементов в горизонтальном меню при просмотре через браузер IE, но это можно подправить, либо вовсе проигнорировать.

Адаптивное горизонтальное меню на css.

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

адаптивное горизонтальное меню на CSS

СУЖАЙТЕ на DEMO браузер по ГОРИЗОНТАЛИ.

Очень внимательно!
Выбрав на DEMO расположение меню ( слева, по центру или справа ), скопируйте код css и html и вставьте к себе на страницу html.

Вот этот код @media screen and (max-width: 700px)… и отвечает за схлопывание ( адаптацию ) меню, где на маленьких устройствах горизонтальная часть меню посредством css скрывается, и в этот же момент становится видимым навигационное меню, которое в полном объёме умещается на мобильном экране пользователя.
Здесь каждый пропишет своё количество пикселей.

стрелка вниз Скачать адаптивное горизонтальное меню на CSS

Этот вариант меню так же адаптирован и выполнен на css без использования js скриптов подойдет тем, у кого на сайте присутствует огромное количество категорий и пунктов меню, и без многоуровневого меню просто не обойтись.

Многоуровневое адаптивное меню на css

СУЖАЙТЕ на DEMO браузер по ГОРИЗОНТАЛИ.

Будьте внимательны!
Выбрав на DEMO расположение многоуровневого меню ( слева, по центру или справа ), скопируйте кусок кода css и замените его на аналогичный в файле style.css ( на архив ссылка ниже ).

стрелка вниз Скачать многоуровневое адаптивное меню на CSS

Горизонтальное адаптивное меню на JS

СУЖАЙТЕ на DEMO браузер по ГОРИЗОНТАЛИ.

В первом и во втором примере адаптивного меню на JS можно по желанию удалить логотип.

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

стрелка вниз Скачать горизонтальное адаптивное меню на JS

Многоуровневое адаптивное меню на JS

СУЖАЙТЕ на DEMO браузер по ГОРИЗОНТАЛИ.

Схлопывание меню здесь регулируется как в CSS ( описание в предыдущих примерах ), так и в скрипте, строка: var mediasize = 800;.
Для нужного местоположения меню, — копируете полученный код и заменяете им исходный у себя.

стрелка вниз Скачать многоуровневое адаптивное меню на JS

Дата публикации: 04.04.2019

Похожие статьи

Добавить комментарий

age-dragon.com

Многоуровневое вертикальное меню HTML и CSS

18 Ноябрь, 2015     7 485     1

На днях быстро нужно было сделать простое многоуровневое меню при помощи только css и html. Потратил на поиски минут 15, чего то подходящего что б не переделывать так и не нашел. По этому решил быстрее написать новое чем чистить чужой код. Вот что получилось

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

ul{
	list-style: none;
	background-color: #484f61;
	width: 200px;
	border: 1px solid #2a323f;
	border-bottom: none;
	color: #fff;
}
ul li{
	border-bottom: 1px solid #2a323f;
	position: relative;
}
ul li:hover{
	background-color: #2a323f;
}
ul li:hover ul{
	display: block;
}
ul li:hover ul li ul{
	display: none;
}
ul li a{
	color: #fff;
	padding: 10px 20px;
	display: block;
	text-decoration: none;
	font-weight: bold;
}
ul li a:hover{
	background-color: #5d99cf;
	color: #fff;
}
ul li ul li:hover ul{
	display: block;
}
ul li ul{
	position: absolute;
	left: 200px;
	top: 0px;
	display: none;
}

ul{ list-style: none; background-color: #484f61; width: 200px; border: 1px solid #2a323f; border-bottom: none; color: #fff; } ul li{ border-bottom: 1px solid #2a323f; position: relative; } ul li:hover{ background-color: #2a323f; } ul li:hover ul{ display: block; } ul li:hover ul li ul{ display: none; } ul li a{ color: #fff; padding: 10px 20px; display: block; text-decoration: none; font-weight: bold; } ul li a:hover{ background-color: #5d99cf; color: #fff; } ul li ul li:hover ul{ display: block; } ul li ul{ position: absolute; left: 200px; top: 0px; display: none; }

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Новости</a></li>
	<li><a href="#">Прайс</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li><a href="#">Услуга 1</a></li>
			<li><a href="#">Услуга 2</a></li>
			<li><a href="#">Услуга 3</a>
				<ul>
					<li><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>
			</li>
			<li><a href="#">Услуга 4</a></li>
			<li><a href="#">Услуга 5</a></li>
		</ul>
	</li>
	<li><a href="#">Контакты</a></li>
</ul>

<ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>Прайс</a></li> <li><a href=»#»>Услуги</a> <ul> <li><a href=»#»>Услуга 1</a></li> <li><a href=»#»>Услуга 2</a></li> <li><a href=»#»>Услуга 3</a> <ul> <li><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> </li> <li><a href=»#»>Услуга 4</a></li> <li><a href=»#»>Услуга 5</a></li> </ul> </li> <li><a href=»#»>Контакты</a></li> </ul>

Вам также может понравиться

php.in.ua

Адаптивное многоуровневое меню на CSS

Это многоуровневый код на горизонтальное меню, которое имеет поиск внутренний и также название сайта, что пишется знаками а не логотипом. Здесь оно просто доработано и поставлена кнопка в поиск, и под меню, что у этого материала имеется сделаны под основную стилистику. На все мониторы идет и также мобильные аппараты как смартфон, что будет корректно отображаться. До этого уже был такой файл на навигацию, но там только не было кнопки и цветовая гамма немного другая у под категорий.

Так что решил отдельным материалом его поставить, так как подключил шрифтовые иконки и немного изменил дизайн. Если говорить о первом многозначном панели и также горизонтального меню, то вы можете посмотреть и выбрать, какое вам больше подойдет или понравится, в общем как посчитаете для себя. Что по кнопкам, сильно не выбирал по тематическому наклонению, а просто поставил, чтоб видно было в работе способности и визуально они присутствуют. Цвет вы сами поставите на основу, здесь он идет темный, если по вашей стилистике не подходит, то меняем в стилях, которые нужно скачать и потом поместить в CSS.

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

Но это вам решать, быть ему на интернет ресурсе или нет, просто если возьмем и поставим стандартный шаблон он конструктора и там сразу заменим вверх, то вы уже увидите какое изменение будет. Так вы можете собрать свой неповторимый и уникальный сайт.

Имеет ли смысл ставить сюда мини профиль?

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

Будет стандартный шаблон адаптивный с этой панелью?

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

Что даст изменение на портале?

Если говорить о стандартном, то вы уже имеете в панели поиск и название и навигацию, а там только будет горизонтальное меню. И от сюда можно с уверенностью сказать, что более функционален станет и сам стиль изменится.

Это изображение под разными функциями и размерами.

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

Когда поставите, то так визуально будет все выглядеть.

Это вы если зайдете на сайт с мобильного устройства.

Приступаем к установке:

Здесь подключены шрифтовые иконки в самом верху кода, это стили, что будут выводить их. А так копируем и ставим вверх сайта, прежде от туда все нужно снести.

Код

<header>
<link rel=»stylesheet» href=»//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css»>  
<div>  
<div>  
<div><a href=»/»>ZORNET.RU</a></div>  
<div>  
<nav>  
<div><ul>  
<li><a href=»/»><span><i aria-hidden=»true»></i> Главная</span></a></li>  
<li><a href=»zornet.ru/load/81″><span><i aria-hidden=»true»></i> Скрипты</span></a></li>  
<li><a href=»zornet.ru/load/142″><span><i aria-hidden=»true»></i> Шаблоны</span></a></li>  
<li><a href=»zornet.ru/index/0-3″><span><i aria-hidden=»true»></i> Обратная связь</span></a></li>  
<li><a href=»http://#»><span><i aria-hidden=»true»></i> Еще категорий</span></a><ul>  
<li><a href=»/»><span><i aria-hidden=»true»></i> Категория новость</span></a></li>  
<li><a href=»/»><span><i aria-hidden=»true»></i> Категория файлы</span></a></li>  
<li><a href=»/»><span><i aria-hidden=»true»></i> Категория блог</span></a></li>  
<li><a href=»/»><span><i aria-hidden=»true»></i> Гостевая книга</span></a></li>  
<li><a href=»/»><span><i aria-hidden=»true»></i> О компаний</span></a></li></ul></li></ul></div>  
</nav>  
<div><div><span></span><span></span><span></span></div></div>  
</div>  
<div>  
<div>  
<form onsubmit=»this.sfSbm.disabled=true» method=»get» action=»/search/»>  
<input type=»submit» name=»sfSbm» value=»»>  
<input type=»text» size=»20″ maxlength=»40″ name=»q» value=»Поиск по сайту…» onfocus=»if(this.value == ‘Поиск по сайту…’){this.value = »}» onblur=»if(this.value == »){this.value = ‘Поиск по сайту…’}»>  
</form>  
</div>  
</div>  
</header>


Стили идут в текстовом документе, нажимаем скачать и они появятся, что копируем и ставим в CSS и все сохранить не забыть.

zornet.ru

Выпадающее многоуровневое навигационное меню на CSS3

#nav {

     float: left;

   font: bold 12px Arial, Helvetica, Sans-serif;

     border: 1px solid #121314;

     border-top: 1px solid #2b2e30;

     -webkit-border-radius: 5px;

     -moz-border-radius: 5px;

     border-radius: 5px;

     overflow: hidden;

}

 

#nav ul {

margin:0;

padding:0;

list-style:none;

}

 

#nav ul li {

float:left;

}

 

#nav ul li a {

   float: left;

color:#d4d4d4;

     padding: 10px 20px;

text-decoration:none;

     background:#3C4042;

background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );

background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );

background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;

border-left: 1px solid rgba(255, 255, 255, 0.05);

        border-right: 1px solid rgba(0,0,0,0.2);

text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);

}

 

#nav li ul {

     background:#3C4042;

     background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );

     background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );

     background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );

     border-radius: 0 0 10px 10px;

     -moz-border-radius: 0 0 10px 10px;

     -webkit-border-radius: 0 0 10px 10px;

     left: -999em;

     margin: 35px 0 0;

     position: absolute;

     width: 160px;

     z-index: 9999;

     box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;

     -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;

     -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;

     border: 1px solid rgba(0, 0, 0, 0.5);

}

 

#nav li ul a {

     background: none;

     border: 0 none;

     margin-right: 0;

     width: 120px;

     box-shadow: none;

     -moz-box-shadow: none;

     -webkit-box-shadow: none;

     border-bottom: 1px solid transparent;

     border-top: 1px solid transparent;

}

2web-master.ru

Многоуровневое меню

<!—Основной контейнер —>

<div>

<!— кнопка раскрытия меню на мобильных устройствах —>

<button aria-label=»Open Menu»><span></span></button>

<!— Меню —>

<nav>

<!— Кнопка закрытия меню на мобильных устройствах —>

<button aria-label=»Close Menu»><span></span></button>

<div>

<ul data-menu=»main»>

<li><a data-submenu=»submenu-1″ href=»#»>Vegetables</a></li>

<li><a data-submenu=»submenu-2″ href=»#»>Fruits</a></li>

<li><a data-submenu=»submenu-3″ href=»#»>Grains</a></li>

<li><a data-submenu=»submenu-4″ href=»#»>Mylk & Drinks</a></li>

</ul>

<!— Подменю 1 —>

<ul data-menu=»submenu-1″>

<li><a href=»#»>Stalk Vegetables</a></li>

<li><a href=»#»>Roots & Seeds</a></li>

<li><a href=»#»>Cabbages</a></li>

<li><a href=»#»>Salad Greens</a></li>

<li><a href=»#»>Mushrooms</a></li>

<li><a data-submenu=»submenu-1-1″ href=»#»>Sale %</a></li>

</ul>

<!— Подменю 1-1 —>

<ul data-menu=»submenu-1-1″>

<li><a href=»#»>Fair Trade Roots</a></li>

<li><a href=»#»>Dried Veggies</a></li>

<li><a href=»#»>Our Brand</a></li>

<li><a href=»#»>Homemade</a></li>

</ul>

<!— Подменю 2 —>

<ul data-menu=»submenu-2″>

<li><a href=»#»>Citrus Fruits</a></li>

<li><a href=»#»>Berries</a></li>

<li><a data-submenu=»submenu-2-1″ href=»#»>Special Selection</a></li>

<li><a href=»#»>Tropical Fruits</a></li>

<li><a href=»#»>Melons</a></li>

</ul>

<!— Подменю 2-1 —>

<ul data-menu=»submenu-2-1″>

<li><a href=»#»>Exotic Mixes</a></li>

<li><a href=»#»>Wild Pick</a></li>

<li><a href=»#»>Vitamin Boosters</a></li>

</ul>

<!— Подменю 3 —>

<ul data-menu=»submenu-3″>

<li><a href=»#»>Buckwheat</a></li>

<li><a href=»#»>Millet</a></li>

<li><a href=»#»>Quinoa</a></li>

<li><a href=»#»>Wild Rice</a></li>

<li><a href=»#»>Durum Wheat</a></li>

<li><a data-submenu=»submenu-3-1″ href=»#»>Promo Packs</a></li>

</ul>

<!— Подменю 3-1 —>

<ul data-menu=»submenu-3-1″>

<li><a href=»#»>Starter Kit</a></li>

<li><a href=»#»>The Essential 8</a></li>

<li><a href=»#»>Bolivian Secrets</a></li>

<li><a href=»#»>Flour Packs</a></li>

</ul>

<!— Подменю 4 —>

<ul data-menu=»submenu-4″>

<li><a href=»#»>Grain Mylks</a></li>

<li><a href=»#»>Seed Mylks</a></li>

<li><a href=»#»>Nut Mylks</a></li>

<li><a href=»#»>Nutri Drinks</a></li>

<li><a data-submenu=»submenu-4-1″ href=»#»>Selection</a></li>

</ul>

<!— Подменю 4-1 —>

<ul data-menu=»submenu-4-1″>

<li><a href=»#»>Nut Mylk Packs</a></li>

<li><a href=»#»>Amino Acid Heaven</a></li>

<li><a href=»#»>Allergy Free</a></li>

</ul>

</div>

</nav>

<div>

<p>Please choose a category</p>

<!—контент, загруженный через Ajax —>

</div>

</div>

<!— /вид —>

<script src=»js/classie.js»></script>

<script src=»js/dummydata.js»></script>

<script src=»js/main.js»></script>

<script>

(function() {

var menuEl = document.getElementById(‘ml-menu’),

mlmenu = new MLMenu(menuEl, {

// breadcrumbsCtrl : true, // отображает хлебные крошки

// initialBreadcrumb : ‘all’, // инициализирует текст хлебных крошек

backCtrl : false, // отображает кнопку назад

// itemsDelayInterval : 60, // задержка между анимацией каждого пункта меню

onItemClick: loadDummyData // колбек: при клике по пункту без подменю — onItemClick([событие], [inner HTML кликнутого пункта меню])

});

 

// переключатель меню на мобильном устройстве

var openMenuCtrl = document.querySelector(‘.action—open’),

closeMenuCtrl = document.querySelector(‘.action—close’);

 

openMenuCtrl.addEventListener(‘click’, openMenu);

closeMenuCtrl.addEventListener(‘click’, closeMenu);

 

function openMenu() {

classie.add(menuEl, ‘menu—open’);

}

 

function closeMenu() {

classie.remove(menuEl, ‘menu—open’);

}

 

// симуляция загрузки сетки

var gridWrapper = document.querySelector(‘.content’);

 

function loadDummyData(ev, itemName) {

ev.preventDefault();

 

closeMenu();

gridWrapper.innerHTML = »;

classie.add(gridWrapper, ‘content—loading’);

setTimeout(function() {

classie.remove(gridWrapper, ‘content—loading’);

gridWrapper.innerHTML = ‘<ul>’ + dummyData[itemName] + ‘<ul>’;

}, 700);

}

})();

</script>

webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *