Почему некорректно работает плагин адаптивного меню?

Question

[Max]

Здравствуйте, скажите почему не правильно работает плагин адаптивного меню??
При изменении расширения меню просто пропадает, но кнопка, которая открывает список меню не появляется.. Плагин slicknav
Код меню:

<header>
           <div class="container">
               <div class="row">
                   <div class="header_mnu">
                       <div class="col-lg-7 col-md-4 col-sm-3">
                           <a href="#"><img class="logo" src="img/logo.png" alt=""/></a>
                       </div>
                       <div class="col-lg-5 col-md-8 col-sm-9">
                           <ul id="menu" class="slicknav_menu">
                               <li><a href="#">Home</a></li>
                               <li><a href="#">Services</a></li>
                               <li><a href="#">About</a></li>
                               <li><a href="#">Testimonial</a></li>
                               <li><a href="#">Work</a></li>
                               <li><a href="#">Contact</a></li>
                           </ul>
                       </div>
                   </div>
               </div>
           </div>
       </header>

Код JS:

<script type="text/javascript">
      $(document).ready(function(){
        $('#menu').slicknav();
      });
  </script>

Код CSS:

.slicknav_menu {
    display:none;
}

@media screen and (max-width: 48em) {
    .js #menu {
        display:none;
    }
    
    .js .slicknav_menu {
        display:block;
    }
}

Answer 1

[reifter]

Посмотрел примеры у плагина. Что увидел.
Уберите класс slicknav_menu у ul id="menu" он сам создаёт копию и добавляет этот класс.
И в media queries у вас есть класс .js плагин его не добавляет в нужное место, поэтому вы должны его создать сами. Пропишите в body или в html class="js" и у вас думаю проблема исчезнет.

p.s. класс js прописывают автоматом, если поддерживаются скрипты браузером

Update: а лучше просто уберите .js и все будет работать

jsfiddle.net/0bL39z2b/1

Comments

[Max]

Спасибо .Отметил как решение, но не пробовал, так как написал свой плагин)

Answer 2

[Дмитрий Кривошеин]

тег<ul id="menu"> не закрыт у тебя

Comments

[reifter]

+ id="menu" два раза

[Max]

reifter: лишнее скопировал*

[Max]

Я переделал, но проблема не исчезла.