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

menujs-1-7533561

6 февраля 2020 CSS jQuery

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

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

HTML-код:

CSS-код

* {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);
}

JavaScript-код

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();
          });
        }
});

menujs-1024x581-1851740

Читайте также: