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
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
How to create a Responsive Navigation Bar in Tailwind CSS ?
A Responsive Navigation Bar with collapsible elements is a crucial component of modern web design, allowing users to navigate seamlessly across various screen sizes. In this article, we'll explore how to implement such a navigation bar using Tailwind CSS, a utility-first CSS framework that enables r
2 min read
How to Create a Responsive Top Navigation Menu with CSS & JavaScript?
Top navigation menus offer users immediate access to key sections of a website. A responsive top navigation menu enhances user experience because if our website is fully responsive then it can be accessible by any device like PC, mobile, or tab. ApproachFirst, create a basic HTML structure for your
5 min read
How to create a Responsive Bottom Navigation Menu with CSS and JavaScript.
A responsive bottom navigation menu provides mobile-friendly access to important links. We will see how to create a responsive bottom navigation menu that adjusts to different screen widths. The menu will include elements like Home, Contact, and About. When viewed on a smaller screen, a hamburger me
2 min read
How To Build a Responsive Navigation Bar with Flexbox?
A Responsive Navigation Bar is essential for modern web design to ensure users have a seamless experience across various devices, from desktops to mobile phones. Flexbox provides a powerful and straightforward way to create flexible and adaptable layouts. ApproachCreate a <nav> element for the
3 min read
Foundation CSS Top Bar Sticky Navigation
Foundation CSS is a free and open-source front-end framework for developing flexible web designs. It's one of the most powerful CSS frameworks, and it delivers a responsive grid, as well as HTML and CSS UI components, templates, and more, across all platforms. It also has several JavaScript Extensio
7 min read