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

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

6 февраля 2020 CSS

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

Подключаем библиотеку jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

HTML-код:

<ul id="nav" class="use-trans">
	<li>
		<a href="https://it-blog.ru">Ссылка</a>
		<div class="submenu">
			<ul>
				<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
				<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
				<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
			</ul>
			<div class="padding"></div>
			<div class="shadow"></div>
		</div>
	</li>
	<li>
		<a href="https://it-blog.ru">Ссылка</a>
		<div class="submenu">
			<ul>
				<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
				<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
				<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
				<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
				<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
				<li>
				<a href="https://it-blog.ru">Ссылка »<span></span></a>
					<div class="submenu">
						<ul>
							<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
							<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
							<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
							<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
							<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
							<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
							<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
							<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
							<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
							<li>
								<a href="https://it-blog.ru">Ссылка »<span></span></a>
								<div class="submenu">
									<div class="submenu_clip">
										<ul>
											<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
											<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
											<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
											<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
											<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
											<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
										</ul>
										<div class="padding"></div>
										<div class="shadow"></div>
										<div class="buffer"></div>
									</div>
								</div>
							</li>
							<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
							<li><a href="https://it-blog.ru">Ссылка<span></span></a></li>
						</ul>
						<div class="padding"></div>
						<div class="shadow"></div>
						<div class="buffer"></div>
					</div>
				</li>
			</ul>
			<div class="padding"></div>
			<div class="shadow"></div>
		</div>
	</li>
</ul>

Здесь вы можете тяговые акб купить

CSS-код

<style>
* {margin:0;padding:0}

/* Исходные стили */
body {
	font: 75% Arial, Helvetica, sans-serif;
	background-color: #444;
	width: 1024px;
	margin: 1em auto 0px;
}

a:link {
	text-decoration: none;
}

/* Выпадающее меню */
#nav {
	background: #111 repeat-x top left;
	height: 37px;
}

#nav, #nav li {
	display: block;
	list-style: none;
	position: relative;
	z-index: 82;
}
#nav > li {
float: left;
z-index: 82;
}
#nav > li:hover {
background: #222 repeat-x top left;
}
   
#nav a {
	display: block;
	line-height: 37px;
	padding: 0 0.5em;
	z-index: 82;
	position: relative;
	color: #ccc;
}
#nav a:hover {
	color: #fff;
}
   
/* Подменю */
#nav .submenu {
	display: none;
	position: absolute;
	z-index: 80;
	background: repeat-x left top #353535;
	border: 1px solid #000;

	left: 0px;
	top: 37px;
	min-width: 100%;

	-o-box-shadow: 2px 2px 3px #000;
	-icab-box-shadow: 2px 2px 3px #000;
	-khtml-box-shadow: 2px 2px 3px #000;
	-moz-box-shadow: 2px 2px 3px #000;
	-webkit-box-shadow: 2px 2px 3px #000;
	box-shadow: 2px 2px 3px #000;
}
#nav .submenu li {
	display: block;
	line-height: 27px !important;
}
#nav .submenu li:hover {
	background: #444 repeat-x top left;
}

#nav .submenu a {
	display: block;
	line-height: 27px !important;
	white-space: nowrap;
}

#nav > li:hover .submenu {
	display: block;
}
/* Скрыть следующий уровень подменю */
#nav > li:hover > .submenu .submenu{
	display: none;
}

#nav .padding {
	display: block;
	position: absolute;
	z-index: 78;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: none !important;
}
/* Отступы для выпадающего списка первого уровня */
#nav > li > .submenu > .padding{
	width: 160%;
	left: -30%;
	height: 140%;
}
   
  #nav .buffer {
	display: block;
	position: absolute;
	bottom: 0px;
	right: 100%;

	width: 100%;
	height: 100%;
	background: none !important;
	}

	#nav .shadow{
	display: none !important;
}
   
/* Третий уровень вложенности */
#nav .submenu .submenu {
	position: absolute;
	left: 100%;
	top: -1px;
}
#nav .submenu .submenu .padding {
	width: 150%;
	top: -35%;
	height: 170%;
}
/* Показать сабменю */
#nav > li:hover .submenu li:hover > .submenu {
	display: block;
	z-index: 70 !important;
}
   

/* CSS3 transition */
#nav.use-trans li > .submenu {
	opacity: 0;
	display: block !important;
	left: -100000px !important;

	-moz-transition: 0.2s opacity ease-in, 0s left linear 0.22s;
	-webkit-transition: 0.2s opacity ease-in, 0s left linear 0.22s;
	-khtml-transition: 0.2s opacity ease-in, 0s left linear 0.22s;
	-icab-transition: 0.2s opacity ease-in, 0s left linear 0.22s;
	-ms-transition: 0.2s opacity ease-in, 0s left linear 0.22s;
	-o-transition: 0.2s opacity ease-in, 0s left linear 0.22s;
	transition: 0.2s opacity ease-in, 0s left linear 0.22s;
}
/* Скрыть сабменю */
#nav.use-trans > li:hover > .submenu .submenu {
	display: block !important;
	left: -10000px !important;
}
   
/* hover */
#nav.use-trans > li:hover > .submenu,
#nav.use-trans > li > .submenu li:hover > .submenu {
	opacity: 1 !important;

	-moz-transition-delay: 0s;
	-webkit-transition-delay: 0s;
	-khtml-transition-delay: 0s;
	-icab-transition-delay: 0s;
	-ms-transition-delay: 0s;
	-o-transition-delay: 0s;
	transition-delay: 0s;
}
#nav.use-trans > li:hover > .submenu {left: 0px !important;}
#nav.use-trans > li > .submenu li:hover > .submenu {left: 100% !important;}

/* Граница в сабменю
- Для стабильной реализации требуется дополнительный тег span в конце каждого тега привязки.
*/
#nav ul a {
	position: relative;
}
#nav ul a span {
	background-color: #5a5a5a;
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 1px;
	width: 100%;
}

/* Outlinine */
.padding {outline-color: red;}
.buffer {outline-color: blue;}

.showbounds .padding,
.showbounds .buffer{
	outline-style: solid;
	outline-width: 1px;
}

/* Внешний вид меню */
#nav {
	outline: 1px solid #111;
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #282828));
	background: -webkit-linear-gradient(#404040, #282828);
	background: -moz-linear-gradient(#404040, #282828);
	background: -o-linear-gradient(#404040, #282828);
	background: linear-gradient(#404040, #282828);
}
#nav > li {
	border-left: 1px solid #333;
	border-right: 1px solid #222;
}
#nav > li:first-child {
	border-left: 0 !important;
}

#nav > li:hover {
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1a1a1a), color-stop(100%, #282828));
	background: -webkit-linear-gradient(#141414, #282828);
	background: -moz-linear-gradient(#141414, #282828);
	background: -o-linear-gradient(#141414, #282828);
	background: linear-gradient(#141414, #282828);
}

#nav .submenu li {
	background-image: -webkit-linear-gradient(#292929, #242424);
}
</style>

JavaScript-код

<script>
jQuery(document).ready(function(){
	if(!$.support.cssProperty("transition")){
	  $("#nav").removeClass("use-trans");
	  $("#nav li").each(function(){
		  var obj = $(this);
		  var submenu = obj.children(".submenu");
		  if(submenu.length > 0) obj
		  .mouseenter(function(){ $(this).children(".submenu").fadeIn(200); })
		  .mouseleave(function(){ $(this).children(".submenu").fadeOut(200); })
		  submenu.hide();
	  });
	}
});
</script>

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Версия сайта для слабовидящих на jQuery и плагин WordPress

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

jQuery data-* атрибуты

data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки "Купить", скрипту передавалось бы название и цена выбранного товара. <div id="157" class="product"> <div class="name">Системный блок</div> Читать далее

Как сделать в Bootstrap 5 колонок

Возникла задача вывести 5 одинаковых адаптивных колонок на сайте с Bootstrap. Помогло это решение. У меня был Bootrstrap 4, но есть аналогичное решение и для 3 версии, там ещё проще. 5 колонок в Bootstrap 4 Добавляем данный код в файл Читать далее

Закрепить блок при прокрутке

Возникла задача сделать прикрепление сайдбара, такое же, как в ВКонтакте. При скролле до верхней границы элемента он закрепляется, а при достижении определенного уровня останавливается и прокручивается до конца вместе со страницей. Раньше приходилось реализовывать подобное с нуля и это было Читать далее

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

Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием jQuery, так и на чистом CSS. При использовании меню на сайте все отлично работает даже с 3 уровнями вложенности. Подключаем библиотеку jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> HTML-код: <ul Читать далее

Кнопка наверх для сайта

Сегодня рассмотрим пример создания кнопки наверх с использованием библиотеки jQuery, которая появляется при скролле страницы и при нажатии на неё слистывает страницу на самый верх. Подключаем библиотеку jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> Код HTML <div class="scroll-up"></div> Код CSS <style> .scroll-up { position:fixed; Читать далее

Плавный якорь jQuery

Данный пример подойдет всем сайтам у которых есть якорные ссылки, особенно будет актуально для лендинг пейдж. При нажатии на ссылку, которая содержит якорь, происходит плавная прокрутка к элементу. Обычно якорная ссылка содержит в атрибуте href ID элемента назначения, со знаком Читать далее

Один комментарий на «Многоуровневое меню CSS»

  1. JonTp:
    10.02.2020 в 09:33

    Отличный пример буду пользоваться! 😉

    Ответить

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

Поиск
Категории
Теги
ACF Ajax amoCRM Bootstrap CentOS Git Instagram jQuery MacOS MySQL SEO Telegram YouTube Битрикс24 Яндекс
Подписаться