addСlass и removeСlass при ресайзе окна
Необходимо было реализовать два типа меню на странице для разных разрешений экранов. Написала скрипт, который присваивает и убирает у элементов этого меню соответствующие классы. Посмотреть как это выглядит можно здесь - http://study.uitschool.com/fe-18-03/makarova/news-test/ .
Проблема заключается в том, на границе <1200 px, левое меню "улетает" в панель - это видно невооруженным взглядом, а моих знаний пока недостаточно, чтобы исправить это самостоятельно. Кроме того, появляется еще одна проблема: с 1196 px по 1199 px можно наблюдать следующее: https://drive.google.com/open?id=1pp...UrRFwp20ecql7e Мой код: <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content"> <ul class="over-ul"> <li><a href="#">Главная</a></li> <li><a href="#">События</a></li> <li><a href="#">Город</a></li> <li><a href="#">Мнения</a></li> <li class="active"><a href="#">Происшествия</a></li> <li><a href="#">Общество</a></li> <li><a href="#">Технологии</a></li> <li><a href="#">Украина</a></li> <li><a href="#">Мир</a></li> <li><a href="#">Здоровье</a></li> <li><a href="#">Политика</a></li> <li><a href="#">Спорт</a></li> <li class="detached"><br><a href="#">Организации</a></li> <li class="detached"><a href="#">Персоны</a></li> <li class="detached"><a href="#">События</a></li> <li class="detached"><a href="#">Контакты</a></li> <li class="detached"><a href="#">Реклама на сайте</a></li> </ul> </div> </div> панель, видна только на маленьких экранах <div class="container-fluid"> <div class="col-xs-12 openbar"> <img src="images/logo.png" alt="logo"> <span onclick="openNav()">☰</span> </div> </div> CSS .navbar-fixed-left { width: 198px; position: fixed; border-radius: 0; height: 100%; } .navbar-fixed-left>div>.navbar-nav > li { float: none; width: 197px; } .navbar-fixed-left + .container { padding-left: 160px; } .navbar{ background: #1e4570; } .navbar{ background: #1e4570; } .navbar-brand{ padding: 20px 25px 20px 15px; height: 88px; background: rgba(0, 0, 0, 0.05); margin-bottom: 7px; } .navbar-fixed-left>div>ul>li>a{ color: #fff; padding: 10px 15px 10px 27px; font-size: 18px; } .navbar-fixed-left>div>ul>li{ background: #1e4570; } li.active>a{ font-weight: bold; } .navbar-fixed-left>div>ul>.detached>a{ font-size: 16px; color: rgba(255, 255, 255, 0.5); padding: 10px 15px 0 27px } .nav>li>a:focus, .nav>li>a:hover{ background: none; outline: none; } Скрипт: <script> function openNav() { document.getElementById("myNav").style.height = "100%"; } function closeNav() { document.getElementById("myNav").style.height = "0%"; } // Adds and removes body class depending on screen width. function screenClass() { if($(window).innerWidth() > 1180) { $('#myNav').addClass('navbar navbar-fixed-left').removeClass('overlay'); $('#myNav>div').removeClass('overlay-content'); $('#myNav>div>ul').addClass('nav navbar-nav').removeClass('over-ul'); } else { $('#myNav').addClass('overlay').removeClass('navbar navbar-fixed-left'); $('#myNav>div').addClass('overlay-content'); $('#myNav>div>ul').addClass('over-ul').removeClass('nav navbar-nav'); } } // Fire. screenClass(); // And recheck when window gets resized. $(window).bind('resize',function(){ screenClass(); }); </script> |
Часовой пояс GMT +3, время: 05:16. |