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

Меню многоуровневое горизонтальное и вертикальное 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 ;
width : 200px ;
>
. 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) ;
>

Источник

Делаем многоуровневое горизонтальное меню на CSS + jQuery

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

HTML

CSS

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button < margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >#cssmenu:after, #cssmenu > ul:after < content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; >#cssmenu #menu-button < display: none; >#cssmenu < font-family: Montserrat, sans-serif; background: #333333; >#cssmenu > ul > li < float: left; >#cssmenu.align-center > ul < font-size: 0; text-align: center; >#cssmenu.align-center > ul > li < display: inline-block; float: none; >#cssmenu.align-center ul ul < text-align: left; >#cssmenu.align-right > ul > li < float: right; >#cssmenu > ul > li > a < padding: 17px; font-size: 12px; letter-spacing: 1px; text-decoration: none; color: #dddddd; font-weight: 700; text-transform: uppercase; >#cssmenu > ul > li:hover > a < color: #ffffff; >#cssmenu > ul > li.has-sub > a < padding-right: 30px; >#cssmenu > ul > li.has-sub > a:after < position: absolute; top: 22px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; >#cssmenu > ul > li.has-sub > a:before < position: absolute; top: 19px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; >#cssmenu > ul > li.has-sub:hover > a:before < top: 23px; height: 0; >#cssmenu ul ul < position: absolute; left: -9999px; >#cssmenu.align-right ul ul < text-align: right; >#cssmenu ul ul li < height: 0; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; >#cssmenu li:hover > ul < left: auto; >#cssmenu.align-right li:hover > ul < left: auto; right: 0; >#cssmenu li:hover > ul > li < height: 35px; >#cssmenu ul ul ul < margin-left: 100%; top: 0; >#cssmenu.align-right ul ul ul < margin-left: 0; margin-right: 100%; >#cssmenu ul ul li a < border-bottom: 1px solid rgba(150, 150, 150, 0.15); padding: 11px 15px; width: 170px; font-size: 12px; text-decoration: none; color: #dddddd; font-weight: 400; background: #333333; >#cssmenu ul ul li:last-child > a, #cssmenu ul ul li.last-item > a < border-bottom: 0; >#cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover < color: #ffffff; >#cssmenu ul ul li.has-sub > a:after < position: absolute; top: 16px; right: 11px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; >#cssmenu.align-right ul ul li.has-sub > a:after < right: auto; left: 11px; >#cssmenu ul ul li.has-sub > a:before < position: absolute; top: 13px; right: 14px; display: block; width: 2px; height: 8px; background: #dddddd; content: ''; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; >#cssmenu.align-right ul ul li.has-sub > a:before < right: auto; left: 14px; >#cssmenu ul ul > li.has-sub:hover > a:before < top: 17px; height: 0; >@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) < #cssmenu < width: 100%; >#cssmenu ul < width: 100%; display: none; >#cssmenu.align-center > ul < text-align: left; >#cssmenu ul li < width: 100%; border-top: 1px solid rgba(120, 120, 120, 0.2); >#cssmenu ul ul li, #cssmenu li:hover > ul > li < height: auto; >#cssmenu ul li a, #cssmenu ul ul li a < width: 100%; border-bottom: 0; >#cssmenu > ul > li < float: none; >#cssmenu ul ul li a < padding-left: 25px; >#cssmenu ul ul ul li a < padding-left: 35px; >#cssmenu ul ul li a < color: #dddddd; background: none; >#cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > a < color: #ffffff; >#cssmenu ul ul, #cssmenu ul ul ul, #cssmenu.align-right ul ul < position: relative; left: 0; width: 100%; margin: 0; text-align: left; >#cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before < display: none; >#cssmenu #menu-button < display: block; padding: 17px; color: #dddddd; cursor: pointer; font-size: 12px; text-transform: uppercase; font-weight: 700; >#cssmenu #menu-button:after < position: absolute; top: 22px; right: 17px; display: block; height: 4px; width: 20px; border-top: 2px solid #dddddd; border-bottom: 2px solid #dddddd; content: ''; >#cssmenu #menu-button:before < position: absolute; top: 16px; right: 17px; display: block; height: 2px; width: 20px; background: #dddddd; content: ''; >#cssmenu #menu-button.menu-opened:after < top: 23px; border: 0; height: 2px; width: 15px; background: #ffffff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); >#cssmenu #menu-button.menu-opened:before < top: 23px; background: #ffffff; width: 15px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#cssmenu .submenu-button < position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: 1px solid rgba(120, 120, 120, 0.2); height: 46px; width: 46px; cursor: pointer; >#cssmenu .submenu-button.submenu-opened < background: #262626; >#cssmenu ul ul .submenu-button < height: 34px; width: 34px; >#cssmenu .submenu-button:after < position: absolute; top: 22px; right: 19px; width: 8px; height: 2px; display: block; background: #dddddd; content: ''; >#cssmenu ul ul .submenu-button:after < top: 15px; right: 13px; >#cssmenu .submenu-button.submenu-opened:after < background: #ffffff; >#cssmenu .submenu-button:before < position: absolute; top: 19px; right: 22px; display: block; width: 2px; height: 8px; background: #dddddd; content: '+'; >#cssmenu ul ul .submenu-button:before < top: 12px; right: 16px; >#cssmenu .submenu-button.submenu-opened:before < display: none; >>

jQuery

(function($) < $.fn.menumaker = function(options) < var cssmenu = $(this), settings = $.extend(< title: "Menu", format: "dropdown", sticky: false >, options); return this.each(function() < cssmenu.prepend('
'); $(this).find("#menu-button").on('click', function() < $(this).toggleClass('menu-opened'); var mainmenu = $(this).next('ul'); if (mainmenu.hasClass('open')) < mainmenu.hide().removeClass('open'); >else < mainmenu.show().addClass('open'); if (settings.format === "dropdown") < mainmenu.find('ul').show(); >> >); cssmenu.find('li ul').parent().addClass('has-sub'); multiTg = function() < cssmenu.find(".has-sub").prepend('else < $(this).siblings('ul').addClass('open').show(); >>); >; if (settings.format === 'multitoggle') multiTg(); else cssmenu.addClass('dropdown'); if (settings.sticky === true) cssmenu.css('position', 'fixed'); resizeFix = function() < if ($( window ).width() >768) < cssmenu.find('ul').show(); >if ($(window).width() >; resizeFix(); return $(window).on('resize', resizeFix); >); >; >)(jQuery); (function($)< $(document).ready(function()< $("#cssmenu").menumaker(< title: "Menu", format: "multitoggle" >); >); >)(jQuery);

Источник

16 CSS Horizontal Menus

Collection of hand-picked free HTML and CSS horizontal menu code examples from codepen and other resources. Update of December 2018 collection. 5 new items.

Related Articles

Author

Links

Made with

About the code

Pure CSS Magic Line Navbar

It’s pure CSS. All links need to have a consistent dimensions for this to work. You have to set everything up yourself in terms of telling the nav how many items there are and where the .line should move to whenever one of the links gets hovered.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Author

Links

Made with

About the code

Position Sticky Subnav

Sticky subnavigation in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Perspective Menus

CSS only perspective menus.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Hover Effect for Horizontal Menu

Pure CSS fading out for siblings menu options on option hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Menu Hover Line Effect

Nice and simple horizontal menu with hover line effect in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS Horizontal Menu

Pure CSS horizontal menu concept with clip-path property.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Strikethrough Hover Effect for Menu

Hover effect for menu links. Use only one pseudo-element on link.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Lavalamp CSS Menu

Horizontal CSS menu with lavalamp hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Horizontal Icon Navigation

Simple SVG icon horizontal navigation with shadows using flex-box .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Slide Horizontal Menu

This is a CSS only horizontal slide menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Skewed Menu in HTML and CSS

Using CSS3 properties to make a no-mainstream skewed menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Horizontal Navigation Effects

Beautiful hover effects for horizontal navigation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Simple Menu Navigation

Just a simple horizontal menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Transparent Fading Navigation Bar

Transparent fading horizontal navigation bar with mask image.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник

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

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

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

HTML

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

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 #menu li ul li:hover ul li

Готово

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

Источник