2013-04-27 4 views
0

Я использую код прямо из документов Foundation, но почему-то его не работает для меня.Фонд-4 Свернутое меню не отображается

Это, как я пишу код:

<nav class="top-bar"> 
    <ul class="title-area"> 
     <li class="toggle-topbar menu-icon"><a href="#"><span>MENU</span></a></li> 
    </ul> 
    <section class="top-bar-section" style="left: 0%;"> 
    <!-- Left Nav Section --> 
     <ul class="left"> 
      <li class="active"><a href="#">Main Item 1</a></li> 
      <li class="active"><a href="#">Main Item 1</a></li> 
      <li class="active"><a href="#">Main Item 1</a></li> 
     </ul> 
    </section> 
</nav> 

Когда я уменьшаю окно браузера и я достигаю «маленький» размер окна, меню исчезает с экрана. Любая идея о том, что я делаю неправильно?

+0

Нужно увидеть css, так как я думаю, что проблема там. – Xarcell

+0

CSS не был изменен, его часть пакета Foundation-4. У вас есть Foundation 4? – ssdesign

+0

Я даже не знаю, что такое Фонд 4. Вам нужно использовать его? Потому что это можно сделать с помощью 3-4 строк только jQuery ... – Xarcell

ответ

2

@Xarcell, я не пользуюсь Фондом именно по этой причине. Я создаю отзывчивый веб-сайт, поэтому я использую Foundation. Одна из проблем, с которой я столкнулся, - это проблема. BTW: Foundation-4 - это гибкая структура веб-дизайна от Zurb.

@Dawood Awan, jQuery и Foundation связаны правильно. Остальные функции все работали нормально, поэтому я знаю, что он связан. Проблема, с которой я столкнулась, заключалась в самом Меню.

Я отвечаю на это сам, потому что я решил проблему.

В документации упоминалось, что указанный ниже код является необязательным, и поэтому я его не использовал. Но мне кажется, что я должен использовать его (даже если его Blank), чтобы мое меню работало.

<li class="name"> 
    <h1></h1> 
</li> 

Надеюсь, что это поможет другим людям с аналогичной проблемой.

+0

Просто отличный ответ !!! :) Спасибо @ssdesign –

0

Я не знаю, в чем проблема может быть из этих строк кода. Но здесь могут быть некоторые проблемы:

  1. Вы не связали файл jQuery со страницей.
  2. Вы не связали файлы основания zurb со страницей.
  3. Если вы применили оба из них, перейдите по ссылке: http://foundation.zurb.com/templates.php Загрузите шаблон, просмотрите его код и сравните его с кодом, чтобы проверить наличие ошибки.