Menu
already read so many topics about this but nothing seems to be working.
just started a project and ive virtually copy/pasted the code from the foundation docs site and it doesnt work.
heres my 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>
for the style sheet, its empty, even tried removing it entirely just to be certain but same thing, its dot dropping down.
any ideas what i missed? Thanks
EDIT:
ok so found something, the code displayed on zurbs foundation docs page, doesnt work when copy/pasting, however if i use the inspector and copy the html from their example, it works. however when you shrink the browser small, the 3 lines with menu button appears but when hovering over it, it dont drop down, clicking as well does nothing, how to fix that?
the html for that is
<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>
im loading these scripts
<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>
i have also tried removing the topbar and offcanvas scripts and just using the foundation.min.js one, nothing works, button appears but no drop down is available.
429
I had the same problem today and by doing the same as you did I figured out it's the "not-click" in this line:
<li class="has-dropdown not-click">
I added it and now it work's just fine (for me (only?)).
176
You probably have found your answer to this question right now but you probably need to add the code below to initialize Foundation when the document is ready.
<script>
$(document).foundation();
</script>
<script>
$(document).foundation();
</script>
Did not make it work but the following did
$(document).ready(function(){
$(document).foundation();
});
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
