Zurb Foundation 6: горната лента не се свива

Имам проблеми с Foundation 6, съвсем начинаещ съм и се опитвам да го приложа към уеб страница, която разработвам за проект в университета. Направих директно копиране на кода на горната лента от уеб страницата на Zurb и го приложих към моя проект и изобщо не работи. Ето кода, който приложих:

<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="/bg#">Asesoreo</a></li>
      <li><a href="/bg#">Servicios</a></li>
      <li><a href="/bg#">Contacto</a></li>
   </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
     <li><a href="/bg#">Log in</a></li>
    <li><a href="/bg#" class="signup_button">Sign Up</a></li>
    </ul>
  </div>
</div>

Проблемът е, че менюто никога не се свива и горната лента, която се очаква да бъде скрита, докато менюто се показва, освен ако екранът на устройството не е малък, винаги се вижда.

Благодаря предварително!

Екранът на компютъра

Мобилният екран


javascript html css zurb-foundation zurb-foundation-6
person Albert Marzo    schedule 02.01.2016    source източник
comment
Зареждате ли javascript на Foundation?   -  person Colin Marshall    schedule 02.01.2016

Отговори (2)


arrow_upward
1
arrow_downward

тук работи добре

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

моля, проверете вашия js/css път и дали стартирате фондация

$(document).foundation();
person fabiovaz    schedule 07.01.2016

arrow_upward
0
arrow_downward

Това трябва да го поправи:

 <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="/bg#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="/bg#">One</a></li>
          <li><a href="/bg#">Two</a></li>
          <li><a href="/bg#">Three</a></li>
        </ul>
      </li>
      <li><a href="/bg#">Two</a></li>
      <li><a href="/bg#">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>
person Adolfo J Barreto    schedule 04.01.2016
comment
Този код дава същия проблем като във въпроса на Алберт Марзо. - person Gilko; 26.02.2016