Foundation CSS Responsive Navigation Toggle with animation
Last Updated :
29 Jun, 2022
Foundation CSS is an open-source front-end framework that is used to create attractive responsive websites, emails, or apps quickly and easily. ZURB released it in September 2011. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This platform, which resembles SaaS, is built on the Bootstrap framework. It is more unique, flexible, and complex. Working with module bundlers is also simple because of its command-line interface. Email framework creates HTML emails that are accessible on all devices and mobile-friendly. Using Foundation for Apps, you can make fully responsive web applications.
The Flexible Navigation includes a variety of elements, such as the top bar, accordion menu, dropdown menu, and basic menu, that make it simple and quick to create and assemble the responsive navigation. In accordance with varied screen sizes, it also enables choosing between the various patterns. The Responsive Navigation Toggle is useful for switching the view of the menu or navbar in small-size devices, making the web pages or web apps more responsive by ensuring that the navbar information is viewable on these devices. In this article, we are going to see how we can use the Responsive Navigation Toggle with animation which means that we will use Motion UI transitions to toggle on or off the navigation menu. There are no classes as such to apply the Responsive Navigation with Toggle, we just need to add its attributes.
Foundation CSS Responsive Navigation Toggle with animation classes:
- 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 with animation attributes:
- data-responsive-toggle: This class is added to the component which will be shown when the data in the main navigation menu is hidden. This attribute takes the id of the menu component as a value.
- data-hide-for: This class is added to the component which is the responsive version of the navigation menu, this attribute is used to specify on which screen size this component will be hidden.
- data-animate: This attribute is added to the container having the main navigation menu. This attribute takes the value in format data-animate="someAnimationIn someAnimationOut". The two values are generally the different transitions from the Motion UI library.
Syntax:
<div class="title-bar"
data-responsive-toggle="example-animated-menu"
data-hide-for="..">
<button class="menu-icon" type="button"
data-toggle></button>
<div class="title-bar-title"> ... </div>
</div>
<div class="" id="example-animated-menu"
data-animate="someAnimationIn someAnimationOut">
...
</div>Example 1: The code below demonstrates how to add a responsive navigation toggle with hinge-in-from-top and spin-out transitions. Here the responsive title bar gets hidden when the screen size is large.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
</script>
</head>
<body>
<div class="title-bar" data-responsive-toggle="example-animated-menu"
data-hide-for="large">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-animated-menu"
data-animate="hinge-in-from-top spin-out">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">GeeksforGeeks</li>
<li>
<a href="#">GFG 1</a>
<ul class="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</li>
<li><a href="#">GFG 2</a>
<ul class="menu">
<li><a href="#">item a</a>
<ul class="menu">
<li><a href="#">item a1</a></li>
<li><a href="#">item a2</a></li>
</ul>
</li>
<li><a href="#">item b</a></li>
</ul>
</li>
<li><a href="#">GFG 3</a></li>
</ul>
</div>
</div>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>
Foundation CSS Responsive Navigation
Toggle with animation
</h3>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Output:
Example 2: The code below demonstrates how to add a responsive navigation toggle with fade-in and scale-out-up transitions. Here the responsive title bar gets hidden when the screen size is medium and beyond.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
</script>
</head>
<body>
<div class="title-bar"
data-responsive-toggle="example-animated-menu"
data-hide-for="medium">
<button class="menu-icon" type="button"
data-toggle>
</button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-animated-menu"
data-animate="fade-in scale-out-up">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">GeeksforGeeks</li>
<li>
<a href="#">GFG 1</a>
<ul class="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</li>
<li><a href="#">GFG 2</a>
<ul class="menu">
<li><a href="#">item a</a>
<ul class="menu">
<li><a href="#">item a1</a></li>
<li><a href="#">item a2</a></li>
</ul>
</li>
<li><a href="#">item b</a></li>
</ul>
</li>
<li><a href="#">GFG 3</a></li>
</ul>
</div>
</div>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>
Foundation CSS Responsive Navigation
Toggle with animation
</h3>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Output:
Reference: https://get.foundation/sites/docs/responsive-navigation.html#responsive-toggle-with-animation
Similar Reads
Foundation CSS Responsive Navigation Toggle 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,
3 min read
Foundation CSS Responsive Navigation 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,
4 min read
Foundation CSS Responsive Navigation Menu 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,
2 min read
Foundation CSS Kitchen Sink Responsive Toggle Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Kitchen Sink Respo
3 min read
How to Create a Responsive Navigation Bar with Dropdown? Dropdowns in navigation bars are used to organize and display a variety of menu options within a limited screen size. Dropdown allow users to access multiple pages or sections of a website without hampering the interface of a website. We will see how to create a responsive navigation bar with a drop
7 min read