We come across horizontal menus on almost every website. Pure CSS helps us implement such menus with ease by using the pure-menu class. Pure-menu class by default creates a vertical menu which we can simply convert into a horizontal one by adding the class pure-menu-horizontal. One of the most common uses of a horizontal menu is in navigation bars (navbars).
We will use the following classes to help us achieve the goal at hand:
- pure-menu: This helps us create a menu. (creates a vertical menu by default)
- pure-menu-horizontal: This helps us create a horizontal menu.
- pure-menu-list: This helps us specify the list which contains the menu items.
- pure-menu-item: This helps us specify that a particular item belongs in the list
- pure-menu-link: This helps us specify the links in the menu items
- pure-menu-heading: This helps us specify a heading for our menu
Syntax:
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-heading">...</li>
<li class="pure-menu-item">
<a href="#" class="pure-menu-link">
...
</a>
</li>
</ul>
</div>
Note: Do not forget to add the pure CSS CDN to be able to use the pure CSS framework
Example: Let us suppose we want to create a horizontal menu for the nav bar of our portfolio.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
integrity=
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
crossorigin=
"anonymous">
<style>
.logo {
color: #2f8d46;
font-weight: bold;
font-size: 1.5rem;
}
</style>
<title>Menu</title>
</head>
<body>
<nav class="menu pure-menu pure-menu-horizontal">
<a href="#"
class="logo pure-menu-heading pure-menu-link">
MYSITE
</a>
<ul class="menu pure-menu-list">
<li class="pure-menu-item">
<a class="pure-menu-link">
About
</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link">
Projects
</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link">
Contact
</a>
</li>
</ul>
</nav>
</body>
</html>
|
Output:
Pure CSS Horizontal Menu
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
01 Feb, 2022
Like Article
Save Article