Фонд 5 Top Bar не выпадает

уже читал так много тем об этом, но ничего не работает.Фонд 5 Top Bar не выпадает

только что начал проект, и ive фактически копировал/вставлял код с сайта документа документации, и он не работает.

Heres мой HTML Test

<body> 
    <header>    

     <nav class="top-bar" data-topbar> 
     <ul class="title-area"> 
      <li class="name"> 
      <h1><a href="#">My Site</a></h1> 
      </li> 
      <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li> 
     </ul> 

     <section class="top-bar-section"> 
      <!-- Right Nav Section --> 
      <ul class="right"> 
      <li class="active"><a href="#">Right Button Active</a></li> 
      <li class="has-dropdown"> 
       <a href="#">Right Button with Dropdown</a> 
       <ul class="dropdown"> 
       <li><a href="#">First link in dropdown</a></li> 
       </ul> 
      </li> 
     </ul> 

     <!-- Left Nav Section --> 
     <ul class="left"> 
      <li><a href="#">Left Nav Button</a></li> 
      </ul> 
     </section> 
     </nav> 

    </header> 

    <footer> 
     <p>Some copyright and legal notices here. Maybe use the © symbol a bit.</p> 
    </footer> 

</body> 
</html>

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

любые идеи, что я пропустил? Благодаря

EDIT:

ИТАК нашли что-то, отображаемое на странице DOCS zurbs фундамента, не работает при копировании/вставке, однако, если я использовать инспектор и скопировать HTML на их примере, он работает код. однако, когда вы уменьшаете размер браузера, появляются 3 строки с кнопкой меню, но при наведении курсора на него он не выпадает, щелчок также ничего не делает, как это исправить?

HTML, потому что это

<nav class="top-bar" data-topbar=""> 
     <ul class="title-area"> 
     <li class="name"> 
      <h1><a href="#">My Site</a></h1> 
     </li> 
     <li class="toggle-topbar menu-icon"><a href="">Menu</a></li> 
     </ul> 

    <section class="top-bar-section" style="left: 0%;"> 

     <!-- Right Nav Section --> 
     <ul class="right show-for-large-up"> 
      <li class="active"><a href="#">Right Button Active</a></li> 
      <li class="has-dropdown not-click"> 
      <a href="#">Right Button Dropdown</a> 
      <ul class="dropdown"><li class="title back js-generated"><h5><a  href="javascript:void(0)">Back</a></h5></li> 
       <li><a href="#">First link in dropdown</a></li> 
      </ul> 
      </li> 
     </ul> 

     </section></nav>

-им загрузки эти сценарии

<script src="js/vendor/modernizr.js"></script> 
    <!-- Foundation Top Bar --> 
    <script src="js/foundation.min.js"></script> 
    <script src="js/foundation/foundation.topbar.js"></script> 
    <script src="js/foundation/foundation.offcanvas.js"></script>

я также попытался удалить topbar и offcanvas скрипты и только с помощью foundation.min.js один, ничего не работает , появляется кнопка, но выпадающий список недоступен.

источник

2014-01-25 Nicholas Ritson

ОК, так что нашел что-то, код, отображаемый на странице docs на сайте zurbs, не работает при копировании/вставке, однако, если я использую инспектор и скопирую html из их примера, он работает. однако, когда вы уменьшаете размер браузера, появляются 3 строки с кнопкой меню, но при наведении курсора на него он не выпадает, щелчок также ничего не делает, как это исправить? –

Если вы используете минимальную версию фундамента (foundation.min.js), не загружайте другие плагины, потому что они загружаются автоматически, и они будут работать.

источник

2014-01-25 12:35:25

im не использует модифицированную версию im, используя обычный файл foundation.js, который находится в папке js/foundation (js/foundation/foundation.js). –

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

<script> 
    $(document).foundation(); 
</script>

источник

2014-04-08 04:50:21 dtothefp

У меня была такая же проблема сегодня, и делая то же самое, как вы делали, я понял, что это «не щелчок» в этой строке:

<li class="has-dropdown not-click">

Я добавил его, и теперь он работает нам только штраф (для меня (только?)).

источник

2014-04-24 21:39:06 pkn

. Не добавляется JS и не добавляется вручную. – Vino

Использование Foundation 5 и я хотел использовать стиль верхнего бара, я удалил 'data-topbar' и добавил этот класс в выпадающие списки, и все работало правильно – locrizak

Страница шаблона 5 на странице Foundation HTML Templates показывает некоторые примеры навигации по верхнему краю (ваш код в порядке), но то, что не упомянуто, это зависимости.

F5 требует JQuery 2, большинство CMS' (Wordpress) использовать JQuery 1
JQuery 2 не работает на IE 8 или менее, необходимо использовать IE 9 или лучше

источник

2014-06-29 22:19:51 Vino

Это первое, что я видел о Foundation, требующем JQuery 2. Очень полезно знать. – DanielC

Фонд 5 НЕ требует JQuery 2 –

<script> 
    $(document).foundation(); 
</script>

сделал не заставляют это работать, но следующее

источник

2014-07-29 02:54:15

Ваш проект работает сейчас? Вы должны будете загрузить следующие файлы

<script src="js/vendor/modernizr.js"></script> 
    <script src="js/vendor/jquery.js"></script> 
    <script src="js/foundation.min.js"></script> 
    <script> 
     $(document).foundation(); 
</script>

источник

2014-08-05 03:29:13

Это работает для меня:

$(document).ready(function(){ 
    $(document).foundation(); 
});

источник

2014-08-21 15:53:35 Arnold

У меня была такая же проблема. Для меня было исправлено удаление турбонасосов:

Удалите линию самоходных камней из вашего Gemfile.
Удалите // = require turbolinks из вашего приложения/assets/javascripts/application.js.
Удалите из вашего приложения/views/layouts/application.html.erb две пары «данные-турболинки-дорожки» => истинные хэш-ключи/значения. (от http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4)

источник

2015-10-11 02:05:10 sidamo

Лично я стараюсь избегать, когда JS css-only can do the job just fine. Он сохраняет ментальную модель того, что Фонд пытается сделать для вас тем более простым.

Это просто, как HTML-код

<nav id="primary_nav_wrap"> 
<ul> 
    <li><a href="#">Menu 1</a> 
    <ul>

, которые нужно только CSS классы декларации.

источник

2017-02-05 15:28:25 Jerome

Фонд 5 Top Bar не выпадает

ответ

Смежные вопросы