How to Create a Pill Navigation Menu with CSS

how-to-create-a-pill-navigation-menu-with-css

Navigation menus are an essential part of any website design.

They provide easy access to different sections of the website and help users navigate with ease.

In this tutorial, we will be discussing how to create a unique and stylish navigation menu known as the “Pill Navigation Menu” using CSS.

CSS Basics

Before diving into creating the navigation menu, it’s important to understand some basic CSS concepts.

CSS stands for Cascading Style Sheets, and it is a style sheet language used for describing the look and formatting of a document written in HTML.

HTML Markup

The first step in creating a pill navigation menu is to create the HTML markup.

Here’s an example of the HTML code for a basic navigation menu:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Styling with CSS

Once the HTML markup is in place, we can start styling the navigation menu using CSS.

Here’s an example of the CSS code for a basic pill navigation menu:

nav {
  display: flex;
  justify-content: center;
}

nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

nav li {
  display: flex;
  flex: 1;
  justify-content: center;
}

nav a {
  display: block;
  padding: 10px 20px;
  background-color: #f2f2f2;
  color: #333;
  text-decoration: none;
  border-radius: 25px;
  transition: all 0.3s;
}

nav a:hover {
  background-color: #333;
  color: #fff;
}

The CSS code above creates a horizontal navigation menu with equal width navigation items.

The “display: flex” property is used to display the navigation menu as a flex container, and the “justify-content” property is used to center the navigation items.

The “list-style: none” property removes the bullet points from the navigation menu, and the “display: flex” property is used to display the navigation items as flex elements.

The “flex: 1” property sets the width of each navigation item to equal parts of the available space.

The “background-color” and “color” properties are used to set the background and text colors, respectively.

The “border-radius” property creates rounded edges, and the “transition” property adds a smooth animation when hovering over a navigation item.

Final Thoughts

In conclusion, creating a pill navigation menu with CSS is a simple and straightforward process.

With just a few lines of HTML and CSS code, you can create a unique and stylish navigation menu for your website.

Tags

Related Posts