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=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</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=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...