Foundation CSS Top Bar Basics
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 can be used to create a navigation bar that may contain 2 sections ie., the left-side section which contains the logo with a few other components & the right-side section contains the sign-up/login details, etc. For the small-size devices, they may be stacked on top of each other. Also, it can include the dropdown menu, which may inherit the background color of the top bar, along with a text input field and action button.
Foundation CSS Top Bar Classes:
- 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.
- vertical: This class creates a vertical menu.
Syntax:
<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>
Example 1: This is a basic example illustrating Top Bar using Foundation CSS.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Foundation CSS TopBar Basics</ 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 = "top-bar" style = "width: 60%;" >
< 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 = "#" >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 >
< script >
$(document).foundation();
</ script >
</ body >
</ html >
|
Output:
Foundation CSS top bar.
Example 2: This is a more complex example illustrating Nested Top Bar using Foundation CSS.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Foundation CSS Top Bar Basics</ 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 = "top-bar"
style = "width: 60%;" >
< 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 >
< script >
$(document).foundation();
</ script >
</ body >
</ html >
|
Output:
Foundation CSS Top Bar Basics
Reference: https://get.foundation/sites/docs/top-bar.html#basics
Last Updated :
02 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...