Foundation CSS Responsive Navigation Toggle
Last Updated :
21 Mar, 2022
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
The Responsive Navigation Toggle is helpful to toggle the view of the navbar or menu in the small-size devices, so that the navbar content will be visible in small or medium-size devices, which helps to make the responsive web pages or web apps.
Syntax:
<div class="title-bar">
<button class="menu-icon"
type="button">Toggle button
</button>
</div>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu">
<li> Content </li>
<li> Content </li>
...
</ul>
</div>
</div>
Foundation CSS Responsive Navigation Toggle Class:
- menu-icon: This class is used to create a toggle-icon button.
- top-bar: This class is used to create the navbar containing the various links.
- menu: This class is used to create a menu to toggle button.
- dropdown menu: This class is used to make the menu with the dropdown list.
Foundation CSS Responsive Navigation Toggle Attribute:
- data-responsive-toggle: This attribute helps to create the responsive toggle that can be used to display the data in the small-size devices.
- data-toggle: This attribute enables the data toggle feature.
- data-hide-for: This attribute is used to hides the data for the specified screen-size.
Example: This example describes the Responsive Navigation Toggle with horizontal aligned menu in Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Responsive Navigation</title>
<meta name="viewport"
content="width = device-width,
initial-scale = 1" />
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h2>Foundation CSS Responsive Navigation Toggle</h2>
<div class="title-bar"
data-responsive-toggle="example-menu"
data-hide-for="medium">
<button class="menu-icon"
type="button" data-toggle>
</button>
<div class="title-bar-title">Horizontal Menu</div>
</div>
<div id="example-menu">
<ul class="menu dropdown" data-dropdown-menu>
<li><a href="#">DSA</a></li>
<li><a href="#">Programming Languages</a></li>
<li><a href="#">Placements Course</a></li>
<li><a href="#">Web Technology</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Example: This example describes the Responsive Navigation Toggle with vertical aligned menu in Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Responsive Navigation</title>
<meta name="viewport"
content="width = device-width,
initial-scale = 1" />
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h2>Foundation CSS Responsive Navigation Toggle</h2>
<div class="title-bar"
data-responsive-toggle="example-menu"
data-hide-for="medium">
<button class="menu-icon"
type="button" data-toggle>
</button>
<div class="title-bar-title">Vertical Menu</div>
</div>
<div id="example-menu">
<ul class="menu vertical">
<li>
<a href="#">DSA</a>
</li>
<li>
<a href="#">Programming Languages</a>
</li>
<li>
<a href="#">Placements Course</a>
</li>
<li>
<a href="#">Web Technology</a>
</li>
</ul>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/responsive-navigation.html#responsive-toggle
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...