admin 管理员组

文章数量: 1086019

Most people are talking about dropdown menus when the bar is expanded I'm talking about menu when you adjust the browser window to a phone size. You should be able to over menu and the list of items should drop down .html The code is from this page, (second example). If you re adjust it should show menu and drop down items.

<!doctype html>
    <html>
    <head>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/foundation.css">
        <link rel="stylesheet" href="css/app.css">
        <script src="js/vendor/custom.modernizr.js"></script>
        <script src="js/jquery.js"></script>
        <script src="js/foundation.js"></script>
        <script src="js/foundation.dropdown.js"></script>
        <meta charset="utf-8">
    <title>Gideon Sassoon</title>
    </head>
<body>
    <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=""><span>Menu</span>
            </a>
        </li>
      </ul>

      <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
          <li class="active"><a href="#">Right Nav Button Active</a></li>
          <li class="has-dropdown not-click">
            <a href="#">Right Button with Dropdown</a>
            <ul class="dropdown">
              <li><a href="#">First link in dropdown</a></li>
            </ul>
          </li>
        </ul>
      </section>
    </nav>
    <script>$(document).foundation();</script>
</body>
</html>

Okay so the code is correct, I've checked it and a friend has as well. To clarify I DO NOT mean the Right Button with dropdown. That works perfectly fine.

Most people are talking about dropdown menus when the bar is expanded I'm talking about menu when you adjust the browser window to a phone size. You should be able to over menu and the list of items should drop down http://foundation.zurb./docs/ponents/topbar.html The code is from this page, (second example). If you re adjust it should show menu and drop down items.

<!doctype html>
    <html>
    <head>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/foundation.css">
        <link rel="stylesheet" href="css/app.css">
        <script src="js/vendor/custom.modernizr.js"></script>
        <script src="js/jquery.js"></script>
        <script src="js/foundation.js"></script>
        <script src="js/foundation.dropdown.js"></script>
        <meta charset="utf-8">
    <title>Gideon Sassoon</title>
    </head>
<body>
    <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=""><span>Menu</span>
            </a>
        </li>
      </ul>

      <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
          <li class="active"><a href="#">Right Nav Button Active</a></li>
          <li class="has-dropdown not-click">
            <a href="#">Right Button with Dropdown</a>
            <ul class="dropdown">
              <li><a href="#">First link in dropdown</a></li>
            </ul>
          </li>
        </ul>
      </section>
    </nav>
    <script>$(document).foundation();</script>
</body>
</html>

Okay so the code is correct, I've checked it and a friend has as well. To clarify I DO NOT mean the Right Button with dropdown. That works perfectly fine.

  • javascript
  • jquery
  • html
  • drop-down-menu
  • zurb-foundation
Share Improve this question asked Dec 21, 2013 at 13:03 Gideon SassoonGideon Sassoon 6041 gold badge11 silver badges31 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

If I understand you correctly, you expect the topbar menu button in "mobile mode" to drop down when hovering over here

with the mouse.

In that case, the topbar works as designed - there is no hover on mobile touch devices, so it only reacts to touch/click when in mobile mode.

Edit:

I now understand your problem to be that clicking the "Menu" toggle reloads the page. It seems like you forgot to include the Foundation topbar script:

<script src="js/foundation.js"></script>
<script src="js/foundation.dropdown.js"></script>
<script src="js/foundation.topbar.js"></script>

I know this is old, but I think I have just resolved the same problem you were seeing so I am adding this answer for anyone else out there who es across it.

For me, the problem was that I was trying to override the height of the top-bar element in my CSS. Once I removed this entry my top-bar functioned correctly on small screens

.top-bar {
    height: 3em;
}

Hope this helps somebody

I had the same problem, fixed it with:

$('.left-off-canvas-toggle').on('click', function(){});

本文标签： javascriptZurb Foundation topbar menu bar dropdown not working (the phone size one)Stack Overflow

版权声明：本文标题：javascript - Zurb Foundation topbar menu bar dropdown not working (the phone size one) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744071800a2528627.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。