Как сделать выпадающее меню отзывчивым?

есть ли кто-нибудь, кто может сделать это выпадающее меню отзывчивым? проблема у меня в том, что при изменении размера браузера коробки плавать слеваКак сделать выпадающее меню отзывчивым?

HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>CSS3 animated & responsive dropdown menu</title> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 

</head> 

<body> 
<nav class="animenu"> 
<button class="animenu__toggle"> 
    <span class="animenu__toggle__bar"></span> 
    <span class="animenu__toggle__bar"></span> 
    <span class="animenu__toggle__bar"></span> 
</button> 
<ul class="animenu__nav"> 
    <li> 
    <a href="#">Home</a> 
    </li> 
    <li> 
    <a href="#">Archive</a> 
    <ul class="animenu__nav__child"> 
     <li><a href="">Sub Item 1</a></li> 
     <li><a href="">Sub Item 2</a></li> 
     <li><a href="">Sub Item 3</a></li> 
    </ul> 
    </li>  
    <li> 
    <a href="#">Categories</a> 
    <ul class="animenu__nav__child"> 
     <li><a href="">Sub Item 1</a></li> 
     <li><a href="">Sub Item 2</a></li> 
     <li><a href="">Sub Item 3</a></li> 
     </ul> 
    </li> 
    <li> 
    <a href="#">About</a> 
    </li> 
    <li> 
     <a href="#">Contact</a> 
    </li>  
    <li> 
    <a href="#">Contact</a> 
    </li> 
    <li> 
    <a href="#">Contact</a> 
    </li> 

    </ul> 
</nav> 

    <script src="js/index.js"></script> 

</body> 
</html>

CSS

*, *:after, *:before { 
    box-sizing: border-box; 
} 

.animenu__toggle { 
    display: none; 
    cursor: pointer; 
    background-color: #111; 
    border: 0; 
    padding: 10px; 
    height: 40px; 
    width: 40px; 
} 
.animenu__toggle:hover { 
    background-color: #0186ba; 
} 

.animenu__toggle__bar { 
    display: block; 
    width: 20px; 
    height: 2px; 
    background-color: #fff; 
    transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55); 
} 
.animenu__toggle__bar + .animenu__toggle__bar { 
    margin-top: 4px; 
} 

.animenu__toggle--active .animenu__toggle__bar { 
    margin: 0; 
    position: absolute; 
} 
.animenu__toggle--active .animenu__toggle__bar:nth-child(1) { 
    transform: rotate(45deg); 
} 
.animenu__toggle--active .animenu__toggle__bar:nth-child(2) { 
    opacity: 0; 
} 
.animenu__toggle--active .animenu__toggle__bar:nth-child(3) { 
    transform: rotate(-45deg); 
} 

.animenu { 
    display: block; 
} 
.animenu ul { 
    padding: 0; 
    list-style: none; 
    font: 0px 'Open Sans', Arial, Helvetica; 
} 
.animenu li, .animenu a { 
    display: inline-block; 
    font-size: 15px; 
} 
.animenu a { 
color: #aaaaaa; 
    text-decoration: none; 
} 

.animenu__nav { 
    background-color: #111; 
} 
.animenu__nav > li { 
    position: relative; 
    border-right: 1px solid #444444; 
} 
.animenu__nav > li > a { 
    padding: 10px 30px; 
    text-transform: uppercase; 
} 
.animenu__nav > li > a:first-child:nth-last-child(2):before { 
content: ""; 
position: absolute; 
border: 4px solid transparent; 
border-bottom: 0; 
    border-top-color: currentColor; 
    top: 50%; 
    margin-top: -2px; 
    right: 10px; 
} 
.animenu__nav > li:hover > ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
} 
.animenu__nav > li:hover > a { 
color: #fff; 
} 

.animenu__nav__child { 
min-width: 100%; 
position: absolute; 
top: 100%; 
left: 0; 
z-index: 1; 
opacity: 0; 
visibility: hidden; 
margin: 20px 0 0 0; 
background-color: #373737; 
transition: margin .15s, opacity .15s; 
} 
.animenu__nav__child > li { 
    width: 100%; 
    border-bottom: 1px solid #515151; 
} 
.animenu__nav__child > li:first-child > a:after { 
    content: ''; 
position: absolute; 
    height: 0; 
    width: 0; 
    left: 1em; 
top: -6px; 
border: 6px solid transparent; 
    border-top: 0; 
    border-bottom-color: inherit; 
    } 
.animenu__nav__child > li:last-child { 
    border: 0; 
} 
.animenu__nav__child a { 
    padding: 10px; 
    width: 100%; 
    border-color: #373737; 
} 
.animenu__nav__child a:hover { 
    background-color: #0186ba; 
    border-color: #0186ba; 
    color: #fff; 
} 

@media screen and (max-width: 767px) { 
.animenu__toggle { 
    display: inline-block; 
} 

    .animenu__nav, 
    .animenu__nav__child { 
    display: none; 
} 

.animenu__nav { 
    margin: 10px 0; 
} 
.animenu__nav > li { 
    width: 100%; 
    border-right: 0; 
    border-bottom: 1px solid #515151; 
} 
.animenu__nav > li:last-child { 
    border: 0; 
} 
.animenu__nav > li:first-child > a:after { 
    content: ''; 
    position: absolute; 
    height: 0; 
    width: 0; 
    left: 1em; 
    top: -6px; 
    border: 6px solid transparent; 
    border-top: 0; 
    border-bottom-color: inherit; 
    } 
.animenu__nav > li > a { 
    width: 100%; 
    padding: 10px; 
    border-color: #111; 
    position: relative; 
} 
.animenu__nav a:hover { 
    background-color: #0186ba; 
    border-color: #0186ba; 
    color: #fff; 
} 

.animenu__nav__child { 
    position: static; 
    background-color: #373737; 
    margin: 0; 
    transition: none; 
    visibility: visible; 
    opacity: 1; 
} 
    .animenu__nav__child > li:first-child > a:after { 
    content: none; 
} 
    .animenu__nav__child a { 
    padding-left: 20px; 
    width: 100%; 
    } 
} 
.animenu__nav--open { 
    display: block !important; 
} 
.animenu__nav--open .animenu__nav__child { 
display: block; 
}

SCSS

// Variables 
$baseMenuBackground: #111;   // Base color theme 
$secondaryMenuBackground: #0186ba; // Secondary color (highlights, triangles...) 
$gutter: 10px;      // Base gutter 

// Latest CSS box model 
*, *:after, *:before { 
    box-sizing: border-box; 
} 

// The classic hamburger icon 
// <button class="animenu__toggle"> 
// <span class="animenu__toggle__bar"></span> 
// <span class="animenu__toggle__bar"></span> 
// <span class="animenu__toggle__bar"></span> 
// </button> 
.animenu__toggle { 
    display: none; 
    cursor: pointer; 
    background-color: $baseMenuBackground; 
    border: 0; 
    padding: 10px; 
    height: 40px; 
    width: 40px; 

    &:hover { 
    background-color: $secondaryMenuBackground; 
    } 
} 

.animenu__toggle__bar { 
    display: block; 
    width: 20px; height: 2px; 
    background-color: #fff;  
    transition: .15s cubic-bezier(0.75, -0.55, 0.25, 1.55); 

    &+.animenu__toggle__bar { 
    margin-top: 4px; 
    } 
} 

.animenu__toggle--active { 
    .animenu__toggle__bar { 
    margin: 0; 
    position: absolute; 

    &:nth-child(1) { 
     transform: rotate(45deg); 
    } 

    &:nth-child(2) { 
     opacity: 0; 
    } 

    &:nth-child(3) { 
     transform: rotate(-45deg); 
    }   
    } 
} 

// Clear some defaults 
.animenu { 
    display: block; 
    ul { 
    padding: 0; 
    list-style: none;  
    font: 0px 'Open Sans', Arial, Helvetica;  
    } 

    li, a { 
    display: inline-block; 
    font-size: 15px; 
    } 

    a { 
    color: lighten($baseMenuBackground, 60%); 
    text-decoration: none; 
    } 
} 

// First level -> main menu items 
// <nav class="animenu"> 
// <ul class="animenu__nav"> 
// ... 
// </ul> 
// </nav> 
.animenu__nav { 
    background-color: $baseMenuBackground;   

> li { 
    position: relative; 
    border-right: 1px solid lighten($baseMenuBackground, 20%); 

    > a { 
     padding: $gutter 3 * $gutter; 
     text-transform: uppercase; 

     &:first-child:nth-last-child(2):before { 
     content:""; 
     position: absolute; 
     border: 4px solid transparent; 
     border-bottom: 0; 
     border-top-color: currentColor; 
     top: 50%; 
     margin-top: -2px; 
     right: 10px; 
     } 
    }  

    &:hover { 
    > ul { 
     opacity: 1; 
     visibility: visible; 
     margin: 0;   
    } 

    > a { 
     color: #fff; 
    } 
    } 
} 
} 

// Second level 
// <nav class="animenu"> 
// <ul class="animenu__nav"> 
//  <li> 
//  <ul class="animenu__nav__child"></ul> 
//  </li> 
// </ul> 
// </nav> 
.animenu__nav__child { 
    min-width: 100%; 
    position: absolute; 
    top: 100%; left: 0; 
    z-index: 1; 
    opacity: 0; 
    visibility: hidden; 
    margin: 2 * $gutter 0 0 0; 
    background-color: lighten($baseMenuBackground, 15%);  
    transition: margin .15s, opacity .15s; 

    > li { 
    width: 100%; 
    border-bottom: 1px solid lighten($baseMenuBackground, 25%); 

    &:first-child > a:after { 
    content: ''; 
    position: absolute; 
    height: 0; width: 0; 
    left: 1em; 
    top: -6px; 
    border: 6px solid transparent; 
    border-top: 0; 
    border-bottom-color: inherit; 
    } 

    &:last-child { 
     border: 0; 
    } 
    } 

    a { 
    padding: $gutter; 
    width: 100%; 
    border-color: lighten($baseMenuBackground, 15%); 

    &:hover { 
    background-color: $secondaryMenuBackground; 
    border-color: $secondaryMenuBackground; 
    color: #fff; 
    } 
    } 
} 

// The main breakpoint is 767px 
// Adjust the first and second levels display 
@media screen and (max-width: 767px) { 
    .animenu__toggle { 
    display: inline-block; 
    } 

    .animenu__nav, 
    .animenu__nav__child { 
    display: none; 
    } 

// First level -> main menu items 
// <nav class="animenu"> 
// <ul class="animenu__nav"> 
// ... 
// </ul> 
// </nav>  
.animenu__nav { 
    margin: $gutter 0; 

    > li { 
    width: 100%; 
    border-right: 0; 
    border-bottom: 1px solid lighten($baseMenuBackground, 25%); 

    &:last-child { 
    border: 0; 
    } 

    &:first-child > a:after { 
     content: ''; 
     position: absolute; 
     height: 0; width: 0; 
     left: 1em; 
     top: -6px; 
     border: 6px solid transparent; 
     border-top: 0; 
     border-bottom-color: inherit; 
     } 

    > a { 
     width: 100%; 
     padding: $gutter; 
     border-color: $baseMenuBackground; 
     position: relative; //dropdown caret 
    } 
    } 

    a:hover { 
    background-color: $secondaryMenuBackground; 
    border-color: $secondaryMenuBackground; 
    color: #fff;  
    } 
} 

// Second level 
// <nav class="animenu"> 
// <ul class="animenu__nav"> 
//  <li> 
//  <ul class="animenu__nav__child"></ul> 
//  </li> 
// </ul> 
// </nav>    
.animenu__nav__child { 
    position: static; 
    background-color: lighten($baseMenuBackground, 15%); 
    margin: 0; 
    transition: none; 
    visibility: visible; 
    opacity: 1;  

    > li:first-child > a:after { 
     content: none; 
    } 

    a { 
    padding-left: 2 * $gutter; 
    width: 100%; 
    }   
    } 
} 

// Expanding the animenu 
// <nav class="animenu"> 
// <ul class="animenu__nav animenu__nav--open"> 
//  <li> 
//  <ul class="animenu__nav__child"></ul> 
//  </li> 
// </ul> 
// </nav> 
.animenu__nav--open { 
    display: block !important; 

    & .animenu__nav__child { 
    display: block; 
    } 
}

.JS

// CSS3 animated & responsive dropdown menu 
// Latest version: https://github.com/catalinred/Animenu 

(function(){ 
    var animenuToggle = document.querySelector('.animenu__toggle'), 
     animenuNav = document.querySelector('.animenu__nav'), 
     hasClass = function(elem, className) { 
      return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); 
     }, 
     toggleClass = function(elem, className) { 
      var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' '; 
      if(hasClass(elem, className)) { 
       while(newClass.indexOf(' ' + className + ' ') >= 0) { 
        newClass = newClass.replace(' ' + className + ' ' , ' '); 
       } 
       elem.className = newClass.replace(/^\s+|\s+$/g, ''); 
      } else { 
       elem.className += ' ' + className; 
      } 
     },   
     animenuToggleNav = function(){   
      toggleClass(animenuToggle, "animenu__toggle--active"); 
      toggleClass(animenuNav, "animenu__nav--open");   
     } 

if (!animenuToggle.addEventListener) { 
    animenuToggle.attachEvent("onclick", animenuToggleNav); 
} 
    else { 
     animenuToggle.addEventListener('click', animenuToggleNav); 
    } 
})()

Любая помощь будет оценена, спасибо заранее!

В принципе, это то, что происходит, если я изменяю размер страницы.

источник

2017-01-30 DAN

Что не реагирует на это? У этой скрипты (https://fiddle.jshell.net/40rwzts9/show/light/) нет такой же проблемы? –

Да, да. вещь, которую я не понимаю, поэтому, когда я изменяю размер страницы, контакт коробки идет под кнопкой логотипа и так далее. – DAN

<!doctype html> 
<html lang='en'> 
<head> 
    <meta charset='utf-8'> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <style> 
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); 
#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 { 
    width: auto; 
    border-radius: 5px; 
    background: #660033; 
} 
#cssmenu.align-center > ul { 
    font-size: 0; 
    text-align: center; 
} 
#cssmenu.align-center ul ul { 
    text-align: left; 
} 
#cssmenu.align-center > ul > li { 
    display: inline-block; 
    float: none; 
} 
#cssmenu.align-right > ul > li { 
    float: right; 
} 
#cssmenu.align-right ul ul { 
    text-align: right; 
} 
#cssmenu > ul > li { 
    float: left; 
} 
#cssmenu > ul > li > a { 
    padding: 10px 54px; 
    color: #ffffff; 
    font-weight: 700; 
    text-decoration: none; 
    background: #660033; 
} 
#cssmenu > ul > li:hover > a, 
#cssmenu > ul > li > a:hover, 
#cssmenu > ul > li.active > a { 
    color: #fff; 
} 
#cssmenu > ul > li.has-sub > a { 
    padding-right: 40px; 
} 
#cssmenu ul > li.has-sub > a:after { 
    content: ''; 
    position: absolute; 
    right: 5px; 
    top: 17.5px; 
    display: block; 
    width: 18px; 
    height: 18px; 
    border-radius: 9px; 
    background: #3db2e1; 
    background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%); 
    background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%); 
    background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%); 
    background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%); 
    background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%); 
    box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb; 
    background-size: 36px 36px; 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    -webkit-transition: all 0.1s ease-out; 
    -moz-transition: all 0.1s ease-out; 
    -ms-transition: all 0.1s ease-out; 
    -o-transition: all 0.1s ease-out; 
    transition: all 0.1s ease-out; 
} 
#cssmenu ul > li.has-sub:hover > a:after { 
    background-position: 0 -18px; 
} 
#cssmenu ul > li.has-sub > a:before { 
    content: ''; 
    position: absolute; 
    right: 11px; 
    top: 25.5px; 
    display: block; 
    width: 0; 
    height: 0; 
    border: 3px solid transparent; 
    border-top-color: #ffffff; 
    z-index: 99; 
} 
#cssmenu ul > li.has-sub:hover > a:before { 
    border-top-color: #19799f; 
} 
#cssmenu ul ul { 
    position: absolute; 
    left: -9999px; 
    opacity: 0; 
    -webkit-transition: top .2s ease, opacity .2s ease; 
    -moz-transition: top .2s ease, opacity .2s ease; 
    -ms-transition: top .2s ease, opacity .2s ease; 
    -o-transition: top .2s ease, opacity .2s ease; 
    transition: top .2s ease, opacity .2s ease; 
} 
#cssmenu > ul > li > ul { 
    top: 91px; 
    padding-top: 8px; 
    border-radius: 5px; 
} 
#cssmenu > ul > li:hover > ul { 
    left: auto; 
    top: 51px; 
    opacity: 1; 
} 
#cssmenu.align-right > ul > li:hover > ul { 
    right: 0; 
} 
#cssmenu ul ul ul { 
    top: 40px; 
} 
#cssmenu ul ul > li:hover > ul { 
    top: 0; 
    left: 178px; 
    padding-left: 10px; 
    opacity: 1; 
} 
#cssmenu.align-right ul ul > li:hover > ul { 
    left: auto; 
    right: 178px; 
    padding-left: 0; 
    padding-right: 10px; 
    opacity: 1; 
} 
#cssmenu ul ul li a { 
    width: 180px; 
    padding: 12px 25px; 
    font-size: 13px; 
    font-weight: 700; 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); 
    color: #ffffff; 
    text-decoration: none; 
    background: #3db2e1; 
    -webkit-transition: color .2s ease; 
    -moz-transition: color .2s ease; 
    -ms-transition: color .2s ease; 
    -o-transition: color .2s ease; 
    transition: color .2s ease; 
} 
#cssmenu ul ul li:hover > a, 
#cssmenu ul ul li > a:hover, 
#cssmenu ul ul li.active > a { 
    color: #fff; 
} 
#cssmenu ul ul li:first-child > a { 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    box-shadow: inset 0 2px 2px #88d0ed; 
} 
#cssmenu ul ul li:last-child > a { 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    box-shadow: inset 0 -3px 0 #27a9de, inset 0 -3px 3px #1f9acc, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13); 
} 
#cssmenu ul ul > li.has-sub > a:after { 
    right: 12px; 
    top: 9.5px; 
    background: #3db2e1; 
    background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%); 
    background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%); 
    background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%); 
    background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%); 
    background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%); 
    box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb; 
    background-size: 36px 36px; 
    background-position: 0 0; 
    background-repeat: no-repeat; 
} 
#cssmenu.align-right ul ul > li.has-sub > a:after { 
    right: auto; 
    left: 12px; 
} 
#cssmenu ul ul > li.has-sub:hover > a:after { 
    background-position: 0 -18px; 
} 
#cssmenu ul ul > li.has-sub > a:before { 
    top: 15.5px; 
    right: 16px; 
    border-top-color: transparent; 
    border-left-color: #ffffff; 
} 
#cssmenu.align-right ul ul > li.has-sub > a:before { 
    top: 15.5px; 
    right: auto; 
    left: 16px; 
    border-top-color: transparent; 
    border-right-color: #ffffff; 
    border-left-color: transparent; 
} 
#cssmenu ul ul > li.has-sub:hover > a:before { 
    border-top-color: transparent; 
    border-left-color: #1c89b5; 
} 
#cssmenu.align-right ul ul > li.has-sub:hover > a:before { 
    border-top-color: transparent; 
    border-left-color: transparent; 
    border-right-color: #1c89b5; 
} 
@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, 
    #cssmenu ul ul, 
    #cssmenu ul ul ul, 
    #cssmenu > ul, 
    #cssmenu.align-center > ul, 
    #cssmenu > ul > li > ul, 
    #cssmenu > ul > li:hover > ul, 
    #cssmenu ul ul li:hover > ul, 
    #cssmenu ul ul ul li:hover > ul, 
    #cssmenu.align-right ul ul, 
    #cssmenu.align-right ul ul li:hover > ul, 
    #cssmenu.align-right ul ul ul li:hover > ul { 
    position: relative; 
    left: 0; 
    right: auto; 
    top: 0; 
    width: 100%; 
    display: none; 
    padding: 0; 
    opacity: 1; 
    text-align: left; 
    } 
    #cssmenu ul li { 
    width: 100%; 
    border-top: 1px solid rgba(120, 120, 120, 0.2); 
    } 
    #cssmenu > ul > li > a, 
    #cssmenu ul ul li a, 
    #cssmenu ul ul li:first-child > a, 
    #cssmenu ul ul li:last-child > a { 
    width: 100%; 
    border-radius: 0; 
    box-shadow: none; 
    background: none; 
    background: #660033; 
    color: #fff; 
    border-top: 1px solid #fff; 
    } 
    #cssmenu ul li a { 
    padding-left: 12.5px; 
    } 
    #cssmenu ul ul li a { 
    padding: 14px 25px 14px 27.5px; 
    } 
    #cssmenu ul ul ul li a { 
    padding-left: 42.5px; 
    } 
    #cssmenu ul ul ul ul li a { 
    padding-left: 57.5px; 
    } 
    #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 { 
    position: relative; 
    display: block; 
    padding: 20px; 
    padding-left: 12.5px; 
    cursor: pointer; 
    font-size: 13px; 
    color: #ffffff; 
    background: #660033; 
    font-weight: 700; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    } 
    #cssmenu .submenu-button { 
    position: absolute; 
    right: 0; 
    display: block; 
    width: 53px; 
    height: 53px; 
    border-left: 1px solid rgba(120, 120, 120, 0.2); 
    z-index: 10; 
    cursor: pointer; 
    } 
    #cssmenu ul ul .submenu-button { 
    height: 41px; 
    } 

    #cssmenu ul .submenu-button.submenu-opened:after, 
    #cssmenu #menu-button.menu-opened:after { 
    background-position: 0 -28px; 
    } 
    #cssmenu ul ul .submenu-button:after { 
    top: 6.5px; 
    } 
    #cssmenu #menu-button:before, 
    #cssmenu .submenu-button:before { 
    content: ''; 
    position: absolute; 
    right: 22.5px; 
    top: 25.5px; 
    display: block; 
    width: 0; 
    height: 0; 
    border: 4px solid transparent; 
    border-top-color: #ffffff; 
    z-index: 99; 
    } 
    #cssmenu ul ul .submenu-button:before { 
    top: 19.5px; 
    } 
    #cssmenu #menu-button.menu-opened:before, 
    #cssmenu .submenu-button.submenu-opened:before { 
    border-top-color: #19799f; 
    } 
} 

    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script> 
    <script> 
     (function($) { 

      $.fn.menumaker = function(options) { 

       var cssmenu = $(this), settings = $.extend({ 
       title: "&#9776;", 
       format: "dropdown", 
       sticky: false 
       }, options); 

       return this.each(function() { 
       cssmenu.prepend('<div id="menu-button" class="icon">' + settings.title + '</div>'); 
       $(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('<span class="submenu-button"></span>'); 
        cssmenu.find('.submenu-button').on('click', function() { 
        $(this).toggleClass('submenu-opened'); 
        if ($(this).siblings('ul').hasClass('open')) { 
         $(this).siblings('ul').removeClass('open').hide(); 
        } 
        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() <= 768) { 
        cssmenu.find('ul').hide().removeClass('open'); 
        } 
       }; 
       resizeFix(); 
       return $(window).on('resize', resizeFix); 

       }); 
      }; 
     })(jQuery); 

     (function($){ 
     $(document).ready(function(){ 

     $("#cssmenu").menumaker({ 
      title: "&#9776;", 
      format: "multitoggle" 
     }); 


     }); 
     })(jQuery); 
    </script> 
    <title>Resposnive menu</title> 
</head> 
<body> 

<div id='cssmenu'> 
<ul> 
    <li><a href='#'>Home</a></li> 
    <li class='active'><a href='#'>Products</a> 
     <ul> 
     <li><a href='#'>Product 1</a> 
      <ul> 
       <li><a href='#'>Sub Product</a></li> 
       <li><a href='#'>Sub Product</a></li> 
      </ul> 
     </li> 
     <li><a href='#'>Product 2</a> 
      <ul> 
       <li><a href='#'>Sub Product</a></li> 
       <li><a href='#'>Sub Product</a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href='#'>About</a></li> 
    <li><a href='#'>Contact</a></li> 
</ul> 
</div> 

</body> 
<html>

источник

2017-09-27 10:15:31

Как сделать выпадающее меню отзывчивым?

ответ

Смежные вопросы