Полноэкранное мобильное меню

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

Пример:

Для более наглядного примера, я добавил мобильник и изменил прокрутку. В CSS и JS коде этого нет.

Оригинальный вид страницы с меню можно посмотреть по ссылке

Похожий пример, но с анимацией и без использования подразделов, можно посмотреть в теме: Фиксированное гамбургер-меню.

HTML:

Т.к. иконка-гамбургер и само меню имеют фиксированное позиционирование, HTML-код можно разместить на странице в любом удобном месте.

<div class="mobile-menu">
    <div class="menu-bar">
		<span></span>
	</div>
    <div class="menu">
		<ul>
			<li><a href="#url">Главная</a></li>	
			<li class="has-children">
				<a href="#url">О компании</a>
				<ul>
					<li><a href="#url">Новости</a></li>
					<li><a href="#url">Вакансии</a></li>
					<li><a href="#url">Реквизиты</a></li>			
				</ul>
			</li>
			<li><a href="#url">Фотогалерея</a></li>
			<li class="has-children">
				<a href="#url">Услуги</a>
				<ul>
					<li><a href="#url">Покупка</a></li>
					<li><a href="#url">Продажа</a></li>
					<li><a href="#url">Обмен</a></li>		
				</ul>
			</li>
			<li><a href="#url">Контакты</a></li>
		</ul>
	</div>	
</div>

</div>

<ul>

<li><a href="#url">Главная</a></li>

<a href="#url">О компании</a>

<ul>

<li><a href="#url">Новости</a></li>

<li><a href="#url">Вакансии</a></li>

<li><a href="#url">Реквизиты</a></li>

</ul>

</li>

<li><a href="#url">Фотогалерея</a></li>

<a href="#url">Услуги</a>

<ul>

<li><a href="#url">Покупка</a></li>

<li><a href="#url">Продажа</a></li>

<li><a href="#url">Обмен</a></li>

</ul>

</li>

<li><a href="#url">Контакты</a></li>

</ul>

</div>

CSS:

.menu-bar {
	transition: all 0.3s ease-in-out;
	transition-delay: 0.2s;
	background-color: #337AB7;
	border-radius: 50%;
	border: 4px solid #BFE2FF;
	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.3);
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 50px;
	height: 50px;
	z-index: 9999999;
	box-sizing: content-box;
}
.menu-bar span {
	transition: all 0.3s ease-in-out;
	background-color: #fff;
	display: inline-block;
	height: 3px;
	position: absolute;
	top: 50%;
	left: 10px;
	width: 22px;
}
.menu-bar span:before, 
.menu-bar span:after {
	transition: all 0.3s ease-in-out;
	background-color: #fff;
	content: '';
	display: block;
	height: 3px;
	position: absolute;
	width: 30px;
}
.menu-bar span:before {
	top: -8px;
}
.menu-bar span:after {
	top: 8px;
}
.triggered .menu-bar span {
	width: 0;
}
.triggered .menu-bar span:before {
	transform: rotate(45deg);
	top: 0;
}
.triggered .menu-bar span:after {
	transform: rotate(-45deg);
	top: 0;
}
.menu {
	transition: all 0.3s ease-in-out;
	background-color: #0b4f8a;
	height: 100vh;
	opacity: 0;
	padding: 15px;
	position: fixed;
	top: 0;
	left: 0;
	transform: translateY(-100%);
	width: 100vw;
	z-index: 9999998;
	overflow-y: auto;  
}
.menu ul {
	transition: all 0.3s ease-in-out;
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu ul li {
	transition: all 0.3s ease-in-out;
}
.menu ul li a {
	color: #fff;
	display: inline-block;
	font-family: Verdana, sans-serif;   
	font-size: 20px;
	padding: 8px 15px;
	position: relative;
	text-decoration: none;
	outline: none;
}
.menu ul li span {
	display: inline-block;
	height: 24px;
	top: 5px;
	position: relative;
	width: 24px;
}
.menu ul li span:before, 
.menu ul li span:after {
	background-color: #BFE2FF;
	content: '';
	display: block;
	height: 3px;
	position: absolute;
	width: 15px;
}
.menu ul li span:before {
	top: 50%;
	transform: translateY(-50%);
}
.menu ul li span:after {
	transition: all 0.15s ease-in-out;
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
}
.menu ul li span.subtriggered:after {
	transform: translateY(-50%) rotate(0);
}
.menu ul li ul li a {
	padding: 8px 30px;
	font-size: 18px;
	color: #BFE2FF;
}
.triggered .menu {
	opacity: 1;
	transform: translateY(0);
}
.menu ul ul {
	display: none;
}
.menu ul .subtriggered + ul {
	display: block;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

.menu-bar {

transition: all 0.3s ease-in-out;

transition-delay: 0.2s;

background-color: #337AB7;

border-radius: 50%;

border: 4px solid #BFE2FF;

box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.3);

position: fixed;

bottom: 10px;

right: 10px;

width: 50px;

height: 50px;

z-index: 9999999;

box-sizing: content-box;

}

.menu-bar span {

transition: all 0.3s ease-in-out;

background-color: #fff;

display: inline-block;

height: 3px;

position: absolute;

top: 50%;

left: 10px;

width: 22px;

}

.menu-bar span:before,

.menu-bar span:after {

transition: all 0.3s ease-in-out;

background-color: #fff;

content: '';

display: block;

height: 3px;

position: absolute;

width: 30px;

}

.menu-bar span:before {

top: -8px;

}

.menu-bar span:after {

top: 8px;

}

.triggered .menu-bar span {

width: 0;

}

.triggered .menu-bar span:before {

transform: rotate(45deg);

top: 0;

}

.triggered .menu-bar span:after {

transform: rotate(-45deg);

top: 0;

}

.menu {

transition: all 0.3s ease-in-out;

background-color: #0b4f8a;

height: 100vh;

opacity: 0;

padding: 15px;

position: fixed;

top: 0;

left: 0;

transform: translateY(-100%);

width: 100vw;

z-index: 9999998;

overflow-y: auto;

}

.menu ul {

transition: all 0.3s ease-in-out;

list-style: none;

margin: 0;

padding: 0;

}

.menu ul li {

transition: all 0.3s ease-in-out;

}

.menu ul li a {

color: #fff;

display: inline-block;

font-family: Verdana, sans-serif;

font-size: 20px;

padding: 8px 15px;

position: relative;

text-decoration: none;

outline: none;

}

.menu ul li span {

display: inline-block;

height: 24px;

top: 5px;

position: relative;

width: 24px;

}

.menu ul li span:before,

.menu ul li span:after {

background-color: #BFE2FF;

content: '';

display: block;

height: 3px;

position: absolute;

width: 15px;

}

.menu ul li span:before {

top: 50%;

transform: translateY(-50%);

}

.menu ul li span:after {

transition: all 0.15s ease-in-out;

top: 50%;

transform: translateY(-50%) rotate(90deg);

}

.menu ul li span.subtriggered:after {

transform: translateY(-50%) rotate(0);

}

.menu ul li ul li a {

padding: 8px 30px;

font-size: 18px;

color: #BFE2FF;

}

.triggered .menu {

opacity: 1;

transform: translateY(0);

}

.menu ul ul {

display: none;

}

.menu ul .subtriggered + ul {

display: block;

}

JS:

(function($){
	$('.menu-bar').on('click', function() {
		$('.mobile-menu').toggleClass('triggered');
	}); 
	$('.has-children > a').after('<span></span>');  
	$('.has-children span').on('click', function() {
		$(this).toggleClass('subtriggered');
	});
})(jQuery);

(function($){

$('.menu-bar').on('click', function() {

$('.mobile-menu').toggleClass('triggered');

});

$('.has-children > a').after('<span></span>');

$('.has-children span').on('click', function() {

$(this).toggleClass('subtriggered');

});

})(jQuery);

Иван: 09.08.2022 в 15:16

Как указать путь на js файл

Ответить
- Alexander: 13.08.2022 в 10:08
  
  На какой? на jquery?
  
  Ответить
  - Иван: 13.08.2022 в 12:27
    
    Все получилось у меня в конструкторе надо указывать путь к JS. script src="путь" script
    
    Ответить
Кирилл: 19.04.2021 в 15:17

Здравствуйте!
Подскажите, пожалуйста, как можно сделать так, чтобы после нажатия на пункт меню, оно закрывалось и был виден контент сайта? Иначе приходится жать на кнопку с крестиком, а это не всем будет удобно, полагаю.

Ответить
- Alexander: 19.04.2021 в 15:59
  Если меню по якорям, например для лендинга, то да.
  Меняем:
  
  $('.menu-bar').on('click', function() {
  
  на
  
  $('.menu-bar, .menu a').on('click', function() {
  Ответить
  - Кирилл: 19.04.2021 в 18:08
    
    Спасибо! Всё отлично работает!
    
    Ответить
Валерий: 20.03.2021 в 18:14
Доброго времени суток, уважаемый админ, могли бы подсказать возможно ли как то сделать, внутри самого значка где три полосочки написать слово меню . Пробовал так:
```
 <div class="menu-bar">
<span></span>
  Меню
 </div>
```
Не красиво как то получается, может что то можете подсказать? За ранее благодарен буду за ваш ответ.
Ответить
- Alexander: 22.03.2021 в 06:48
  Меняем menu-bar span на:
  
  .menu-bar span { position: absolute; top: 50%; left: 10px; }
  
  Добавляем:
  
  .menu-bar b { transition: all 0.3s ease-in-out; display: inline-block; position: absolute; top: calc(50% - 6px); left: 10px; color: #FFF; font-size: 10px; font-weight: bold; font-family: Tahoma, sans-serif; } .triggered .menu-bar b { opacity: 0; }
  
  А HTML кнопки такой:
  
  <div class="menu-bar"> <span></span> <b>меню</b> </div>
  Ответить
  - Валерий: 24.03.2021 в 12:54
    
    Спасибо большое, все отлично!
    
    Ответить
Максим: 13.02.2020 в 22:10

Здравствуйте!

Подскажите, куда вставлять код JS ?!

В function.php - выдает ошибку.

Ответить
- Alexander: 14.02.2020 в 05:32
  
  А зачем вы его в function.php вставляете?
  Там PHP коды от темы (если я правильно понял, что речь идет о WordPress).
  JS можно вставить в любой файл ---.js этой же темы (ниже библиотеки jQuery) или отдельным файлом или например в подвал темы в теге script
  
  Ответить
  - Валерий: 26.03.2021 в 19:55
    
    Красивый ответ)
    
    Ответить

Пример:

HTML:

CSS:

JS:

Смотрите также:

Анимированный переход между пунктами меню

Адаптивное мега-меню на jQuery

Простое горизонтальное меню на CSS

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

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