Foundation CSS Top Bar Advanced Layout
Last Updated :
02 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.
A Top bar creates a navigational style and acts as a visual wrapper for the menu component, it is not a menu in itself rather the styling we may want to use to create the navigational elements in a simple and quick manner. It provides an option to make our menu component and gives us a way to split content left and right. The Top Bar Advanced Layout is similar to Foundation CSS Top Bar, with the only difference is that in the case of advanced layout, we set up a responsive menu with a toggle click trigger on mobile. The title bar can be visible on small screens, by default, along with hiding the menu. The menu will always be visible, but the title bar will disappear for the medium breakpoint. The data-hide-for attribute can be used to change the breakpoint.
Foundation CSS Top Bar Advanced Layout Class:
- top-bar: This class defines a top bar in Foundation CSS.
- top-bar-left: This class should contain the elements on the left side of the navigation bar.
- top-bar-right: This class should contain the elements on the right side of the navigation bar.
- menu-text: This class indicates that this list element does not have a link inside it.
- dropdown: This class sets up a dropdown to the menu container.
- data-responsive-toggle: This class can be used to create the responsive toggle menu that contains the id value of the menu for which the toggle is applied.
- data-toggle: It is used to trigger the toggle for the elements which contain this attribute.
- vertical: This class creates a vertical menu.
- title-bar: This class acts as a wrapper for the responsive dropdown menu which we are going to construct.
- title-bar-title: This class consists of the title of our title bar.
Syntax:
<div class="title-bar">
<div class="title-bar-title">...</div>
</div>
<div class="top-bar">
<div class="top-bar-left">
<ul>
<li>..</li>
....
</ul>
</div>
<div class="top-bar-right">
<ul>
<li>..</li>
....
</ul>
</div>
</div>
Note:
- The values of the attributes data-responsive-toggle and data-toggle must be equal to the unique id of the menu.
- The attribute data-hide-for specifies from which devices should this be hidden from.
- Here, we used the button to give the icon for our menu.
Example 1: This is a basic example illustrating the Top Bar Advanced Layout using Foundation CSS on a normal-sized screen.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS TopBar</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<div class="title-bar"
data-responsive-toggle="responsive-menu"
data-hide-for="medium"
style="width: 60%;">
<button class="menu-icon"
type="button"
data-toggle="responsive-menu">
</button>
<div class="title-bar-title">
Menu
</div>
</div>
<center>
<div class="top-bar"
style="width: 60%;"
id="responsive-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Company Name</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Products</a>
<ul class="menu vertical">
<li>
<a href="#">Mobiles</a>
</li>
<li>
<a href="#">Laptops</a>
</li>
<li>
<a href="#">Tablets</a>
</li>
</ul>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Login</a>
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>
<input type="search"
placeholder="Search">
</li>
<li>
<button type="button"
class="button">Search
</button>
</li>
</ul>
</div>
</div>
</center>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Top Bar Advanced Layout
Example 2: This is a basic example illustrating the Top Bar Advanced Layout using Foundation CSS on a small-sized screen.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Top Bar Advanced Layout</title>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<div class="title-bar"
data-responsive-toggle="responsive-menu"
data-hide-for="medium"
style="width: 60%;">
<button class="menu-icon"
type="button"
data-toggle="responsive-menu">
</button>
<div class="title-bar-title">Menu</div>
</div>
<center>
<div class="top-bar"
style="width: 60%;"
id="responsive-menu">
<div class="top-bar-left">
<ul class="dropdown menu"
data-dropdown-menu>
<li class="menu-text">Company Name</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Products</a>
<ul class="menu vertical">
<li>
<a href="#">Mobiles</a>
</li>
<li>
<a href="#">Laptops</a>
</li>
<li>
<a href="#">Tablets</a>
</li>
</ul>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Login</a>
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>
<input type="search"
placeholder="Search">
</li>
<li>
<button type="button"
class="button">Search
</button>
</li>
</ul>
</div>
</div>
</center>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Top Bar Advanced Layout
Reference: https://get.foundation/sites/docs/top-bar.html#advanced-layout
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...