Hello! I make a website based on the Materialize framework (perhaps it matters), I ran into a problem when creating the mobile version of the menu - the items have sub-items, i.e. need a traveling list. I did it, and everything seems to be fine, but when I click on such a menu item, it expands in such a way that subsequent items do not move down. Interestingly, a similar list with the same structure and script outside the mobile menu works correctly.
Screenshots illustrate what I'm talking about.
Menu items, of course, do not have absolute positioning .. Why is this behavior possible? Please help, my enthusiasm has dried up .. Link to the layout .
UPD: If someone doesn’t want to download the archive, a bit of the "go" layout on codepen.io (Narrow the screen until the hamburger appears).
UPDD: Do not look at the code below - absolutely everything has gone here, I don’t have time for editing, but I inserted it just because it doesn’t allow me to add a link to Kodpen.
$(".main-menu-mob").sideNav(); $(".fade-scroll-menu .multi-item").click(function () { $(this).parent('.fade-scroll-menu > li').find('.submenu').slideToggle("200"); $(this).find('.arrow-down').toggleClass('rotate-icon'); }); /* ======= css reset ======= */ div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img, iframe { border: 0; } ul, nav { list-style: none; } input:focus, textarea:focus, select:focus { outline: none !important; } button:focus, a:focus { outline: none !important; } /* ======= css reset ======= */ @media only screen and (min-width: 1201px) { .container { max-width: 1920px; padding: 0 60px; } } @media only screen and (min-width: 1024px) and (max-width: 1200px) { .container { width: 100%; padding: 0 30px; } } @media only screen and (min-width: 980px) and (max-width: 1023px) { .container { width: 100%; padding: 0 20px; } } @media only screen and (min-width: 320px) and (max-width: 979px) { .container { width: 100%; padding: 0 16px; } } /*.container {*/ /*max-width: 1830px;*/ /*padding: 0 15px;*/ /*}*/ /*.container .row {*/ /*margin: 0 -15px;*/ /*}*/ /*.container .col {*/ /*padding: 0 15px;*/ /*}*/ body { font: 16px/36px 'GothamProRegular', verdana, sans-serif; background: #fff; min-width: 320px; max-width: 100%; overflow-x: hidden; overflow-y: auto; color: #000; margin: 0; } a { color: #000000; text-decoration: none; } a:hover, a:active, a:focus { color: #8aa5bd; text-decoration: none; } *, *:before, *:after { -webkit-box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } h1, h2, h3, h4, h5 { font-family: 'GothamProBold',verdana,sans-serif; line-height: 1.2; color: #8aa5bd; margin-bottom: 15px; font-weight: normal; } h1 { font-size: 36px; } h2 { font-size: 34px; } h3 { font-size: 32px; } h4 { font-size: 30px; } h5 { font-size: 28px; } select, input, textarea { background: #edeff3; border: 1px solid #edeff3; } select:focus, input:focus, textarea:focus { background: #fff; border-color: #516087; } a img { border: none; } b, strong { font-weight: normal; font-family: 'GothamProBold',verdana,sans-serif; } img { max-width: 100%; max-height: 100%; display: block; } .container:after, .container:before, .clearfix:after, .clearfix:before { display: table; content: ''; } .container:after, .clearfix:after { clear: both; } .wrapper { position: relative; padding-top: 120px; max-width: 100%; } /* =============================================== */ /* ------------------- HEADER -------------------- */ /* =============================================== */ .header { position: fixed; left: 0; right: 0; top: 0; z-index: 500; } /* ================== Header-top ================= */ .header-top { position: relative; width: 100%; height: 40px; background: #34363c; } .main-menu-mob { display: none; } /* ------ logo-stick ------ */ .logo-stick { position: absolute; left: 0; top: 3px; width: 33px; height: 34px; } .logo-stick img { width: 100%; } /* ------ logo-stick ------ */ /* ---- fade-scroll-menu --- */ .fade-menu { display: flex; height: 40px; align-items: center; } .fade-scroll-menu { display: flex; font-size: 18px; } .fade-scroll-menu.left-side { justify-content: flex-end; width: calc(50% - 240px); margin-left: 40px; margin-right: 200px; } .fade-scroll-menu.right-side { justify-content: flex-start; width: calc(50% - 310px); margin-left: 200px; margin-right: 110px; } .fade-scroll-menu li { text-align: center; } .fade-scroll-menu.left-side li { margin-left: 30px; } .fade-scroll-menu.left-side li:first-of-type { margin-left: 0px; } .fade-scroll-menu.left-side li:nth-of-type(n+5) { display: none; } .fade-scroll-menu.right-side li { margin-right: 30px; } .fade-scroll-menu.right-side li:last-of-type { margin-left: 0px; } .fade-scroll-menu li a { color: #fff; -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); } .fade-scroll-menu li a:hover { color: #8aa5bd; } .drag-target { width: 0; } .fade-menu-header { display: none; } @media only screen and (max-width: 1660px) { .fade-scroll-menu.left-side { width: calc(50% - 190px); margin-right: 150px; } .fade-scroll-menu.right-side { width: calc(50% - 260px); margin-left: 150px; } } @media only screen and (max-width: 1560px) { .fade-scroll-menu { font-size: 16px; } } @media only screen and (max-width: 1490px) { .fade-scroll-menu.left-side li { margin-left: 15px; } .fade-scroll-menu.right-side li { margin-right: 15px; } } @media only screen and (max-width: 1380px) { .fade-scroll-menu { font-size: 14px; } .fade-scroll-menu.left-side { width: calc(50% - 180px); margin-right: 140px; } .fade-scroll-menu.right-side { width: calc(50% - 250px); margin-left: 140px; } .fade-scroll-menu.left-side li { margin-left: 12px; } .fade-scroll-menu.right-side li { margin-right: 12px; } } @media only screen and (min-width: 1201px) and (max-width: 1240px) { .fade-scroll-menu.left-side { width: calc(50% - 170px); margin-right: 130px; } .fade-scroll-menu.right-side { width: calc(50% - 240px); margin-left: 130px; } .fade-scroll-menu.left-side li { margin-left: 10px; } .fade-scroll-menu.right-side li { margin-right: 10px; } } @media only screen and (max-width: 1199px) { .logo-stick { display: none; } .main-menu-mob { position: absolute; top: 0; left: -10px; display: inline-block; color: #9a9b9e; width: 40px; height: 40px; line-height: 50px; text-align: center; -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); } .main-menu-mob:hover { color: #9a9b9e; } .main-menu-mob:active { background: rgba(93,94,99,.2); color: #9a9b9e; } .fade-menu { position: fixed; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; width: 320px; left: 0; top: 0; margin: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); height: 100%; background-color: #fff; z-index: 999; } /* --- Mob Menu --- */ #nav-mobile .fade-menu-header { position: relative; display: flex; -webkit-align-items: center; align-items: center; width: 100%; height: 48px; margin-bottom: 10px; padding: 0 16px; border-right: 1px solid #fff; background: #34363c; } #nav-mobile .fade-menu-header .logo-stick-mob { width: 134px; } #nav-mobile .fade-menu-header img { width: 100%; } #nav-mobile .fade-menu-header .fade-menu-btn-close { position: absolute; top: 15px; right: 15px; color: #9a9b9e; } #nav-mobile .fade-scroll-menu { flex-direction: column; width: 100%; margin: 0; padding: 0 16px; } #nav-mobile .fade-scroll-menu.right-side { display: none; } #nav-mobile .fade-scroll-menu li { position: relative; display: block; width: 100%; height: 70px; line-height: 70px; margin: 0; padding: 0; border-bottom: 1px solid #d6d7d8; text-align: left; } #nav-mobile .fade-scroll-menu li:nth-of-type(n+5) { display: block; } #nav-mobile .fade-scroll-menu li a { display: block; width: 100%; font-size: 22px; color: #000; } #nav-mobile .fade-scroll-menu .multi-item { position: relative; } #nav-mobile .fade-scroll-menu .multi-item .arrow-down { position: absolute; right: 0; top: 30px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } #nav-mobile .arrow-down.rotate-icon { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #nav-mobile .submenu { display: none; padding: 0 0 0 10px; } #nav-mobile .submenu li { height: 50px; line-height: 50px; } #nav-mobile .submenu li a { font-size: 18px; } /*#nav-mobile .collapsible-header .arrow-down {*/ /*position: absolute;*/ /*right: 0;*/ /*top: 30px;*/ /*}*/ /*#nav-mobile .collapsible-body li {*/ /*height: 50px;*/ /*line-height: 50px;*/ /*}*/ /*#nav-mobile .collapsible-body li:last-of-type {*/ /*border-bottom: none;*/ /*}*/ /*#nav-mobile .collapsible-body li a {*/ /*padding-left: 10px;*/ /*font-size: 18px;*/ /*}*/ /* --- Mob Menu --- */ #sidenav-overlay { position: fixed; top: 0; left: 0; right: 0; height: 120vh; background-color: rgba(0,0,0,0.5); z-index: 100; will-change: opacity; } } /* ---- fade-scroll-menu --- */ /* ------ central btn ------ */ .send-butt { position: absolute; z-index: 2; top: 0; right: 0; left: 0; margin: auto; width: 240px; height: 42px; line-height: 42px; font-family: 'GothamProBold',verdana,sans-serif; font-size: 16px; color: #fff; text-transform: uppercase; text-align: center; -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); } .send-butt:after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #34363c; border-left: 1px solid #fff; border-right: 1px solid #fff; -moz-transform: skew(-15deg); -ms-transform: skew(-15deg); -webkit-transform: skew(-15deg); transform: skew(-15deg); } .send-butt span { display: inline-block; margin-right: 10px; font-size: 20px; color: #9a9b9e; -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); } .send-butt:hover, .send-butt:focus { color: #8aa5bd; } .send-butt:hover span { color: #8aa5bd; } /* ------ central btn ------ */ /* ------ right menu ------ */ .pos-rel { position: relative; } .right-head { position: absolute; right: 0; top: 0; } .right-head ul { margin: 0; padding-top: 3px; } .right-head ul li { float: left; margin-right: 10px; padding: 0 5px; min-height: 1px; } .right-head ul li:last-child { margin-right: 0; } .right-head ul li.drop { position: relative; } .right-head ul li a { display: inline-block; color: #9a9b9e; font-size: 20px; -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); } .right-head ul li a:hover { color: #8aa5bd; } .right-head .dropdown-button:hover, .right-head .dropdown-button.active { color: #fff; } .dropdown-content { top: 100% !important; padding: 20px 0px 20px 15px; right: 0 !important; left: auto !important; background: rgba(255, 255, 255, 0.9); } .dropdown-content ul { float: left; } .dropdown-content ul li { margin-bottom: 15px; margin-right: 0; } .dropdown-content ul li:last-child { margin-bottom: 0; } .dropdown-content ul li:hover { background: none; } .dropdown-content ul li a { padding: 0; font-size: 22px; color: #000; -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); } .dropdown-content ul li a:hover, .dropdown-content ul li a:focus { color: #8aa5bd; } .dropdown-content ul li a span { color: #999a9d; display: inline-block; margin-right: 10px; -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8); } .dropdown-content ul li a:hover span, .dropdown-content ul li a:focus span { color: #8aa5bd; } .dropdown-content:before { content: ''; position: absolute; top: 0; right: 8px; width: 0; height: 0; border-style: solid; border-width: 0 12px 12px 0; border-color: transparent #34363c transparent transparent; } #phone-drop { width: 292px !important; } #phone-drop ul { padding: 5px 0 10px; } #phone-drop .iframe-call { margin-left: 5px; } #social-drop { width: 180px !important; } /* ------ right menu ------ */ /* ================== Header-top ================= */ /* =============================================== */ /* ------------------- HEADER -------------------- */ /* =============================================== */ <html> <head> <link rel="stylesheet" href="http://tripedali.com/wp-content/uploads/2016/09/materialize.css"> <link rel="stylesheet" href="http://tripedali.com/wp-content/uploads/2016/09/materialize.min_.css"> <script type="text/javascript" src="http://tripedali.com/wp-content/uploads/2016/09/jquery-1.11.1.min_.js"></script> <script type="text/javascript" src="http://tripedali.com/wp-content/uploads/2016/09/materialize.js"></script> <script type="text/javascript" src="http://tripedali.com/wp-content/uploads/2016/09/materialize.min_.js"></script> </head> <body> <div class="wrapper"> <div class="header"> <div class="header-top"> <div class="container"> <div class="header-section pos-rel"> <div class="logo-stick"> <a href="#"> <img src="img/logo-min.svg" alt="Cyprus"> </a> </div> <a href="#" data-activates="nav-mobile" class="main-menu-mob"> <i class="material-icons">menu</i> </a> <ul id="nav-mobile" class="fade-menu fixed"> <div class="fade-menu-header"> <div class="logo-stick-mob"> <a href="#close"> <img src="http://tripedali.com/wp-content/uploads/2016/09/mob-menu-logo.png" /> </a> </div> <a href="#close" class="fade-menu-btn-close icon-close"></a> </div> <ul class="fade-scroll-menu left-side"> <li><a href="#close">Sale</a></li> <li><a href="#close">Rent</a></li> <li><a href="#close">Property managment</a></li> <li><a href="#close">List your property</a></li> <li><a href="#close">Invense / Residence</a></li> <li><a href="#close">Contacts</a></li> <li class="parent"> <a href="#close" class="multi-item"> Legal advice <span class="arrow-down"> <img src="http://tripedali.com/wp-content/uploads/2016/09/arrow-down.png" /> </span> </a> <ul class="submenu"> <li><a href="#close">First item</a></li> <li><a href="#close">Second item</a></li> </ul> </li> <li class="parent"> <a href="#close" class="multi-item"> About us <span class="arrow-down"> <img src="http://tripedali.com/wp-content/uploads/2016/09/arrow-down.png" /> </span> </a> <ul class="submenu"> <li><a href="#close">Third item</a></li> <li><a href="#close">Fourth item</a></li> </ul> </li> </ul> <ul class="fade-scroll-menu right-side"> <li><a href="#close">Invense / Residence</a></li> <li><a href="#close">Contacts</a></li> </ul> </ul> <script> $(".main-menu-mob").sideNav(); </script> <script> $(".fade-scroll-menu .multi-item").click(function () { $(this).parent('.fade-scroll-menu > li').find('.submenu').slideToggle("200"); $(this).find('.arrow-down').toggleClass('rotate-icon'); }); </script> <div class="right-head"> <ul> <li><a href="viber://tel:132132"><span class="icon-viber"></span></a></li> <li><a href="skypeto:skype"><span class="icon-skype"></span></a></li> <li class="drop"> <a class="dropdown-button" href="#" data-activates="phone-drop"> <span class="icon-phone"></span> </a> <div id="phone-drop" class="dropdown-content"> <ul> <li><a href="tel:+35724621001">+357 99811501 <span>(office)</span></a></li> <li><a href="tel:+35799811501">+357 99811501 <span>(mobile)</span></a></li> </ul> <a href="#" class="iframe-call"> <img src="ihttp://tripedali.com/wp-content/uploads/2016/09/call.png" alt=""> </a> </div> </li> <li class="drop"> <a class="dropdown-button" href="#" data-activates="social-drop"><span class="icon-soc"></span></a><div id="social-drop" class="dropdown-content" style="width: 20px; position: absolute; top: 0px; left: -155px; opacity: 1; display: none;"> <ul> <li><a href="#"><span class="icon-google"></span>Google+ </a></li> <li><a href="#"><span class="icon-fb"></span>Facebook </a></li> <li><a href="#"><span class="icon-vk"></span>Vkontakte </a></li> </ul> </div> </li> </ul> </div><!-- right-head --> <a class="send-butt modal-trigger" href="#send-a-request"> <span class="icon-send"></span>SEND A REQUEST </a> </div> </div><!-- header-section pos-rel --> </div><!-- container --> </div><!-- header-top --> <div class="header-bottom"> <div class="container"> <div style="height: 20px; background: #cecece;"> </div> </div> </div> </div><!-- header --> </div><!-- wrapper --> <!--Import jQuery before materialize.js--> <!--<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>--> <script type="text/javascript" src="js/materialize.min.js"></script> </body> </html> 
