After adapting to the phone, the menu does not open vertically. What did I miss? Or what is not added? Tell me please!

<html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylessheet" media="only screen and (max-width:700px)" href="style.css"/> <title></title> <script type="text/javascript"> var delay_popup = 5000; setTimeout("document.getElementById('overlay').style.display='block'", delay_popup); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" ></script> <script type="text/javascript"> $(document).ready(function(){ var touch = $('#touch-menu'); var menu = $('.menu'); $(touch).on('click', function(e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function(){ var wid = $(window).width(); if(wid > 760 && menu.is(':hidden')) { menu.removeAttr('style'); } }); }); </script> <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Exo+2:400,600" rel="stylesheet"> </head> <body> <header> <a href="#" id="touch-menu">Меню</a> <div class="alone"> <div class="left"></div> <div class="menu"> <ul align="center"> <li style="float:left; margin-left:10%;"><a href="">ГЛАВНАЯ</a></li> <li style="float:left; margin-left:5%;"><a href="" style="clear:both;">ГАЛЕРЕЯ</a></li> <img src="" align="center" class="logo"/> <li style="float:right; margin-right:10%;"><a href="">КОНТАКТЫ</a></li> <li style="float:right; margin-right:5%; "><a href="">О НАС</a></li> </ul> </div> <div class="right"></div></div> </header> <div id="container"> </div> </body> </html> *{ margin:0; padding:0; } div{ display:block; } body{ background: url(images/.jpg); background-color:#fff; } header { height:7%; max-width: 100%; background-color: #FFF; margin: 0 auto; border-bottom: 1px solid #000; } .right{ float:left; background-color: #000; width:15%; height:100%; } .menu{float:left; background-color:#f2f2f2; width:70%; height:100%; } .left{float:left; background-color: #000; width:15%; height:100%; } img{ border:none; } .menu ul { margin-left:10%; width:80%; height:100%; background-color:#cee2d3; list-style-type: none; } #touch-menu{ width:100%; height:100%; background-color:#cee2d3; list-style-type: none; } .menu ul li { float: left; height: 100%; width:10%; background-color:#669900; text-align: center; line-height: 40px; } .menu ul li a, #touch-menu { display: block; width: 100%; height: 100%; text-decoration:none; color:#666; font-weight:bold; font-family:'Exo 2', sans-serif; } .menu li a:hover, #touch-menu:hover { color:#f2f2f2;} #touch-menu{display:none;} @media (max-width: 768px) { .alone {display: none;} .menu ul li {float: none;} .menu ul li a { border-top: 1px solid #eee; background: #fff; color: #666; } .menu ul li:first-child a {border-top: none;} .menu ul li a:hover { background: #f0f0f0; color: #444; border-left: 3px solid #515572; } #touch-menu {display: block;} }
  • From my own experience I’ll say that the menu.is (': hidden') label is not very correct. try menu.is (': hidden') == true write explicitly - akrasnov87
  • Corrected this point, but nothing has changed - V. Clerk
  • bring this menu.is (': hidden') into the function inside if if (wid <760) {menu.is (': hidden')} else {menu.removeAttr ('style');} - Lieutenant Jim Dangle

1 answer 1

In my opinion, the code is very bad. But the error lies in it here.

  $(touch).on('click', function(e) { e.preventDefault(); menu.slideToggle(); });

and here

 <div class="alone"> <div class="left"></div> <div class="menu"> <ul align="center"> <li style="float:left; margin-left:10%;"><a href="">ГЛАВНАЯ</a></li> <li style="float:left; margin-left:5%;"><a href="" style="clear:both;">ГАЛЕРЕЯ</a></li> <img src="" align="center" class="logo" /> <li style="float:right; margin-right:10%;"><a href="">КОНТАКТЫ</a></li> <li style="float:right; margin-right:5%; "><a href="">О НАС</a></li> </ul> </div> <div class="right"></div> </div>

you in ccs indicated that if the screen width is less than 768, then the class alone is hidden

 @media (max-width: 768px) { .alone {display: none;}

it means that the menu itself also becomes hidden and no matter what you do with it until the parent tag is visible the menu will not appear

Rewrite the handler $ (touch) like this

 $(touch).on('click', function(e) { e.preventDefault(); if (menu.is(':hidden') == true) { $('.alone').show(); } else { $('.alone').hide(); } menu.slideToggle(); });

But this is not a solution to the problem, I just show the location of the error.

  • I tried, anyway, no result when you click - V. Clerk