Zurb Foundation 6: верхняя панель не рушится

Question

У меня проблемы с Foundation 6, я начинаю сползать, и я пытаюсь применить его к веб-странице, которую я разрабатываю для проекта в университете. Я непосредственно сделал копию копии кода верхнего уровня с веб-страницы Zurb и применил к моему проекту, и он не работает вообще. Вот код I've применяется:

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium"> 
<button class="menu-icon" type="button" data-toggle></button> 
<div class="title-bar-title">Menu</div> 
</div> 
<div class="top-bar" id="example-menu"> 
    <div class="top-bar-left"> 
    <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu> 
     <li class="menu-text">Site Title</li> 
     <li><a href="#">Asesoreo</a></li> 
     <li><a href="#">Servicios</a></li> 
     <li><a href="#">Contacto</a></li> 
    </ul> 
    </div> 
    <div class="top-bar-right"> 
    <ul class="menu"> 
    <li><a href="#">Log in</a></li> 
    <li><a href="#" class="signup_button">Sign Up</a></li> 
    </ul> 
    </div> 
</div> 

Проблема в том, что меню никогда не разрушается и topbar, который, как ожидается, будет спрятана в то время как меню не отображается, если на экране устройства он маленький, он всегда на виду ,

Заранее благодарен!

The Pc screen

The mobile screen

Answer 1

Это должно исправить:

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium"> 
    <button class="menu-icon" type="button" data-toggle></button> 
    <div class="title-bar-title">Menu</div> 
</div> 

<div class="top-bar" id="example-menu"> 
    <div class="top-bar-left"> 
    <ul class="dropdown menu" data-dropdown-menu> 
     <li class="menu-text">Site Title</li> 
     <li class="has-submenu"> 
     <a href="#">One</a> 
     <ul class="submenu menu vertical" data-submenu> 
      <li><a href="#">One</a></li> 
      <li><a href="#">Two</a></li> 
      <li><a href="#">Three</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Two</a></li> 
     <li><a href="#">Three</a></li> 
    </ul> 
    </div> 
    <div class="top-bar-right"> 
    <ul class="menu"> 
     <li><input type="search" placeholder="Search"></li> 
     <li><button type="button" class="button">Search</button></li> 
    </ul> 
    </div> 
</div> 

Answer 2

здесь работает отлично

http://codepen.io/fabiovaz/pen/zrwvjq

пожалуйста, проверьте Js/путь CSS и если Вы начинаете фундамент

$(document).foundation();