Menu
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.com/docs/components/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.
369
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 comes 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
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
