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.
Share Improve this question asked Dec 21, 2013 at 13:03 Gideon SassoonGideon Sassoon 6041 gold badge11 silver badges31 bronze badges3 Answers
Reset to default 3If 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(){});