How to implement mobile “top-bar” in Foundation?
Question
I am attempting to create a website using the fronted framework Foundation. I am currently working on the "top bar" menu for this site. I have implemented the menu for a desktop computer; however, I cannot get the menu to appear in windows smaller than 940px wide. In other words, the menu would not appear on mobile and tablet devices.
I would like the contents of the top-bar to stack as the screen size gets smaller. Moreoever, my understanding of Foundation is that it implements the necessary JavaScript to create a collapsable menu behind the scenes (is this correct?). Ideally, the menu would also grow and collapse when the menu icon is pressed. Suggestions for how to fix this? Also, if I have missed a crucial section of the Foundation documentation that pertains to this, I would appreciate being pointed towards it.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<!-- Foundation and my own CSS -->
<link rel="stylesheet" type="text/css" href="css/foundation.css">
<link rel="stylesheet" type="text/css" href="css/foundation.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- Foundation and jQuery -->
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/app.js"></script>
<?php if (isset($title)): ?>
<title>Joe Smith | <?= htmlspecialchars($title) ?></title>
<?php else: ?>
<title>Joe Smith</title>
<?php endif ?>
</head>
<body>
<script>
$(document).ready(function() {
$(document).foundation();
}
</script>
<nav class="top-bar">
<ul class="title-area">
<li class="name"><a href="index.php"><h1>Joe Smith</h1></a></li>
<!-- Mobile-only menu icon -->
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li><i>Computer Scientist</i></li>
</ul>
<ul class="right">
<li class="active"><a href="about.php">ABOUT</a></li>
<li><a href="projects.php">PROJECTS</a></li>
<li><a href="blog.php">BLOG</a></li>
<li><a href="../files/resume.pdf">RESUME</a></li>
<li><a href="contact.php">CONTACT</a></li>
</ul>
</section>
</nav>
</body>
</html>
3 answers
solution1
0 2013-11-14 19:13:37
u'r code must be like there
<html>
<body>
.......
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
the <sript> must be just before the </body>
solution2
0 2014-01-19 23:02:28
Please add "data-topbar" attribute on which tag you added class "top-bar"
Here is an example how you can add this:
<nav class="top-bar" data-topbar>
solution3
0 2014-03-28 08:09:19
So implementing the navigation bar with Foundation relies on following a few conventions. The Foundation JavaScript library looks for specific data attributes in your HTML elements, so best practice is to follow the basic template which looks like this:
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>
<section class="top-bar-section">
...
</section>
</nav>
The list item whose class is name is in case you want to display your site's main title in your navigation. Leaving the text out of this element is fine, but make sure the element itself is still there and don't use self-closing tags (eg <li class="name" /> ).
The next list item whose class is toggle-topbar menu-icon is the main header or navigation bar for your menu when viewed in the small-form factor device. Make sure you have this element as-is and make sure you aren't overriding the styles with a white-on-white text color / background . This last point is important as I discovered when I styled my navigation in such a way that it was actually rendering correctly, but had the same foreground and background colours.
Finally, as @Shamim Hasan has already noted, make sure you have the data-topbar declared in your navigation element's attributes. This is what Foundation looks for when rendering the menu.
The top-bar-section part can more or less have whatever you want in it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.