Горизонтальное отзывчивое меню jQuery + CSS

1
Pirat 14.01.2019 Статьи 2 комментария
Горизонтальное отзывчивое меню jQuery + CSS


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

Плюс этого материала заключается в том, что оно отлично сделано и удобное для мобильных устройств для кроссплатформенных интернет страниц и также приложений. Можно рассмотреть построение самой навигаций, так как вся основа поставлена на стилистике CSS, что полностью отвечает за создание адаптивных веб алиментов.

Здесь представлено HTML, CSS и jQuery, где все сделано для того, чтобы заставить эти мобильные дружественные меню функционировать под разные размеры аппаратов, где все производится автоматически, и не нужно самому что-то добавлять, за это отвечает CSS3.

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

HTML
<!--THE MOBILE MENU IS FULLY FUNCTIONAL WHEN YOU RELOAD THE PAGE-->

<!--JQUERY VALID-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--HTML-->
<div id="menuresp-ct">
	<div id="menuresp">
		<div class="menucross">
			<div class="menucross-ct">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="menuct">
			<ul>
				<li><a href="#" class="home">Accueil</a></li>
				<li><a href="#">LINK #1</a></li>
				<li><a href="#">LINK #2</a></li>
				<li class="sousmenu"><a class="smenu">LINK SUB #3<i class="material-icons">&#xE313;</i></a>
					<ul>
						<li><a href="#">SUB #1</a></li>
						<li><a href="#">SUB #2</a></li>
						<li><a href="#">SUB #3</a></li>
						<li><a href="#">SUB #4</a></li>
					</ul>
				</li>
				<li class="sousmenu"><a class="smenu">LINK SUB #4<i class="material-icons">&#xE313;</i></a>
					<ul>
						<li><a href="#">SUB #1</a></li>
						<li><a href="#">SUB #2</a></li>
						<li><a href="#">SUB #3</a></li>
						<li><a href="#">SUB #4</a></li>
					</ul>
				</li>
				<li><a href="#">LINK #5</a></li>
				<li><a href="#">LINK #6</a></li>
				<li><a href="#">LINK #7</a></li>
			</ul>
		</div>
	</div>
	<div class="pb-ombre"></div>
</div>

CSS
/*FONTS*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/*MENU DESKTOP*/
body {background:#FFC600;margin:0;padding:0;}
#menuresp-ct {z-index:500;position:relative;width:100%;}
#menuresp-ct a {transition:all .25s ease;-webkit-transition:all .25s ease;}
#menuresp {position:relative;display:block;background:#222;color:#fff;width:100%;text-align:center;height:80px;font-size:17px;line-height:80px;font-family:'Roboto Condensed',Arial,Sans-Serif;font-weight:500;text-transform:uppercase;}
#menuresp ul {display:inline-block;margin:0 auto;padding:0;list-style:none;list-style-image:none;vertical-align:top;}
#menuresp li {float:left;}
#menuresp li.sousmenu {position:relative;display:block;}
#menuresp li.sousmenu > a i {position:absolute;bottom:12px;left:50%;margin-left:-10px;font-size:20px;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
#menuresp li.sousmenu a i.rotation {-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
#menuresp li.sousmenu ul {background:#f6f6f6;z-index:2;position:absolute;height:0;left:0;top:80px;width:250px;overflow:hidden;}
#menuresp li.sousmenu:hover {cursor:default;}
#menuresp li.sousmenu:hover ul {height:initial;}
#menuresp li.sousmenu li {float:none;text-align:left;padding:0;margin:0;line-height:60px;}
#menuresp li.sousmenu li a {display:block;padding:0 20px;margin:0;color:#222;}
#menuresp li.sousmenu li a:hover {background:none;color:#999;}
#menuresp li a {display:block;color:#fff;text-decoration:none;padding:0 30px;}
#menuresp li a:hover {color:#FFC600;}
/*MENU MOBILE*/
@media screen and (max-width:1000px) {
#menuresp-ct {overflow:hidden;}
#menuresp {background:#fff;overflow:hidden;text-align:left;}
#menuresp.menuheight {height:auto;}
#menuresp .menucross {position:absolute;top:0;left:0;width:80px;height:80px;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;}
#menuresp .menucross .menucross-ct {position:relative;width:30px;height:30px;margin:25px 30px 25px 15px;}
#menuresp .menucross span {display:block;position:absolute;height:3px;width:100%;background:#fff;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;}
#menuresp .menucross span:nth-child(1) {top:5px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center;}
#menuresp .menucross span:nth-child(2) {top:13px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center;}
#menuresp .menucross span:nth-child(3) {top:21px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center;}
#menuresp .menucross.open span:nth-child(1) {-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:3px;left:4px;}
#menuresp .menucross.open span:nth-child(2) {width:0%;opacity:0;}
#menuresp .menucross.open span:nth-child(3) {-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);top:25px;left:4px;}
#menuresp ul {width:100%;}
#menuresp li .home div {display:block;}
#menuresp li .home span {position:relative;}
#menuresp li .home span:before {content:'';position:absolute;left:-22px;top:-5px;width:14px;height:40px;background-size:100%;}
#menuresp li a.home {font-size:24px;border:0;text-align:center;}
#menuresp li:first-child {background:#222;}
#menuresp li:first-child a {color:#fff!important;}
#menuresp li:first-child a:hover {color:#fff!important;}
#menuresp li {float:none;border-bottom:1px solid #f6f6f6;}
#menuresp li a {color:#000;}
#menuresp li a:hover {color:#222!important;}
#menuresp li.sousmenu {height:80px;overflow:hidden;}
#menuresp li.sousmenu.sousmenuheight {height:initial;}
#menuresp li.sousmenu > a i {left:auto;top:0;right:0;margin-left:0;bottom:auto;font-size:24px;padding:28px;}
#menuresp li.sousmenu ul {position:relative;width:100%;height:initial;top:0;}
#menuresp li.sousmenu ul li {text-align:left;background:none;color:#000;border-bottom:0;}
#menuresp li.sousmenu ul li:first-child a {background:#f6f6f6;background-size:100% auto;color:#000!important;}
#menuresp li.sousmenu ul li {border-top:1px solid #fff;line-height:60px;}
#menuresp li.sousmenu li a:hover {background:none;}
#menuresp li.sousmenu ul li a {padding-left:60px;}
#menuresp li a:hover {background:inherit;color:inherit;}
}

JS
//MENU GLOBAL
$(document).ready(function(){
	$('.menucross').click(function(){
		$('#menuresp').toggleClass('menuheight', 400, 'easeOutSine');
		$(this).toggleClass('open');
		$('html, body').animate({ scrollTop: $('#menuresp').offset().top}, 'slow');
	});
	//MENU MOBILE VS DESKTOP
	if ($(window).width() < 1000) {
		$('li.sousmenu').click(function() {
			$(this).find('i').toggleClass('rotation');
			$(this).toggleClass('sousmenuheight', 400, 'easeOutSine');
      $('html, body').animate({ scrollTop: $(this).offset().top}, 'slow');
		});
	}
});

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

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

Чтоб вам было понятна работа и все прикрепленные трюки к материалу, то для этого предоставляется demo страница, на которой выстроено полностью по настройкам аналогичная навигация.
[center][/center]
Также рекомендуем

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

Выезжающее боковое меню на CSS
Выезжающее боковое меню на CSS

Отзывчивое навигационное меню для мобильных устройств
Отзывчивое навигационное меню для мобильных устройств
Zveraboy
Zveraboy
23 февраля 2020 14:24
как скопировать ???? материал что-бы поставить себе на сайт !!
Pirat
Pirat
24 февраля 2020 01:28
Zveraboy, Исправил, теперь можно скопировать себе на сайт
Качественные рипы. Недорого.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.