Fatal编程技术网

Drop down menu 基础5顶部杆不下落

drop-down-menu zurb-foundation

Drop down menu 基础5顶部杆不下落,drop-down-menu,zurb-foundation,Drop Down Menu,Zurb Foundation,已经读了这么多关于这个的话题，但似乎什么都不起作用 <body> <header> <nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <h1><a href="#">My Site</a>

已经读了这么多关于这个的话题，但似乎什么都不起作用

<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>

刚刚启动了一个项目，我几乎从基础文档站点复制/粘贴代码，但它不起作用。 

<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>
这是我的html 试验 

<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>



    

  • 

    • 

  • 



    

  • 

  • 

      

    • 

    

    • 



    

  • 


这里有一些版权和法律声明。可能会稍微使用©符号


<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>
对于样式表，它是空的，甚至尝试完全删除它只是为了确定，但同样的事情，它的点下降

<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>
你知道我错过了什么吗？ 谢谢

<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>
编辑：

<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>

OK，发现了一些东西，ZurBS基金会DOCS页面上显示的代码在复制/粘贴时不起作用，但是如果我使用检查器并从其示例中复制HTML，它就可以工作。然而，当你缩小浏览器时，会出现3行菜单按钮，但当鼠标悬停在上面时，它不会下拉，单击也不会做任何事情，如何解决这个问题

<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>
这方面的html是

<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>

<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>



    

  • 

    • 

  • 



    

  • 

  • 

    • 

    • 

    

    •
我正在加载这些脚本

<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>

  <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和OffabVAS脚本，只使用Bound.M.js一个，没有工作，按钮出现但没有下拉可用。

< P>如果使用最小版本的基金会（Foundation，M.js），不要加载其他插件，因为它们是自动加载的，它可能会起作用。

你可能已经找到了你现在对这个问题的答案，但是你可能需要在文件准备好的时候添加下面的代码来初始化基础。 
<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>

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


$（document.foundation（）；
我今天也遇到了同样的问题，通过与您相同的操作，我发现这一行中的“不点击”是错误的：

<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>

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

  •
    • 我添加了它，现在它可以正常工作了（对我来说（只有？）。

    的Foundation5模板页面上显示了一些topbar导航的示例（您的代码还可以），但没有提到依赖项

    <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>
    • F5需要jQuery2，大多数cms（Wordpress）使用jQuery1
    • jQuery2不适用于IE8或更低版本，必须使用IE9或更高版本
    您的项目现在正在运行吗？您必须加载以下文件

    <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>

    <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>

    
$（document.foundation（）；
    这对我很有用：

    <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>

    $(document).ready(function(){
  $(document).foundation();
});
    我也有同样的问题。对我来说，解决这个问题的方法是删除TurboLink：

    <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>
  • 从gem文件中删除gem“turbolinks”行
  • 从app/assets/javascripts/application.js中删除//=require-turbolinks
  • 从app/views/layouts/application.html.erb中删除两个“data turbolinks track”=>true散列键/值对。 （来自）
    • 就我个人而言，我尽量避免js。它保持了基金会试图为你完成的心智模型更为简单。

    <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>
    这是一个简单的HTML代码

    <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>

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

    

      

    •
    它只需要CSS声明类。

    我没有使用在JS/Faund文件夹（JS/Fung/Fask.js）中找到的普通基础.js的缩小版本IM，所以找到了一些东西，在ZurBS基金会DOCS页面上显示的代码，在复制/粘贴时不起作用，但是如果我使用检查器并从其示例中复制HTML，它起作用了。然而，当浏览器缩小时，菜单按钮的3行出现，但是当它悬停在它上面时，它不下拉，点击也不做任何事情，如何修复它？这是我第一次看到关于需要jQuery 2的基础。基金会5不需要JQuery 2. NOT点击是由JS添加的，不应该使用基础5手工添加，我想使用TopBar样式，我删除了代码>数据TopBar < /Cord>，并将这个类添加到DROPDRONS中，一切都正常工作。 
    <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>