CSS Vertical Navigation Bar

Welcome to The Coding College! In this tutorial, we’ll focus on creating a CSS Vertical Navigation Bar. Vertical navigation bars are perfect for side menus and are widely used in modern web design, especially for dashboards and mobile-friendly layouts.

What is a Vertical Navigation Bar?

A vertical navigation bar stacks its menu items one below the other. It is typically aligned along the left or right side of a webpage and is particularly useful for sites with many sections. With CSS, you can style and customize it to make it visually appealing and user-friendly.

Basic HTML Structure for a Vertical Navigation Bar

Let’s start with the basic structure for a vertical navigation bar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Navigation Bar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="vertical-nav">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </div>
</body>
</html>

Styling the Vertical Navigation Bar with CSS

Now, let’s add some CSS to style the vertical navigation bar.

Example CSS:

/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
}

/* Vertical Navigation Bar */
.vertical-nav {
    width: 200px; /* Fixed width */
    background-color: #333; /* Dark background */
    padding-top: 20px; /* Spacing at the top */
    height: 100vh; /* Full height of the viewport */
}

.vertical-nav a {
    display: block; /* Makes the links stack vertically */
    color: white; /* Text color */
    text-decoration: none; /* Removes underline */
    padding: 10px 15px; /* Adds spacing inside the links */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.vertical-nav a:hover {
    background-color: #575757; /* Dark gray background on hover */
}

Output:

  • A vertical menu on the left-hand side.
  • The links change color when hovered over.

Adding an Active Link

To highlight the active section in your navigation bar, use the .active class.

Example:

HTML:

<div class="vertical-nav">
    <a href="#home" class="active">Home</a>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
</div>

CSS:

.vertical-nav a.active {
    background-color: #575757; /* Highlight active link */
    font-weight: bold; /* Emphasize the active section */
}

Output: The active link will be visually distinct, helping users identify their current location on the website.

Making the Navigation Bar Responsive

For smaller screens, you might want the navigation bar to collapse into a menu icon (hamburger menu). However, for this example, we’ll focus on simple adjustments for mobile layouts.

Responsive Example:

/* Mobile Styles */
@media (max-width: 768px) {
    .vertical-nav {
        width: 100%; /* Full width for smaller screens */
        height: auto; /* Adjust height dynamically */
    }

    .vertical-nav a {
        text-align: center; /* Center-align text for better readability */
        padding: 15px; /* Add extra padding for touch-friendly design */
    }
}

Output: On smaller screens, the vertical navigation bar becomes more user-friendly by stretching to full width.

Adding Icons to the Navigation Bar

You can enhance the navigation bar’s appearance by adding icons using libraries like Font Awesome or Material Icons.

Example with Icons:

HTML:

<div class="vertical-nav">
    <a href="#home"><i class="fa fa-home"></i> Home</a>
    <a href="#about"><i class="fa fa-info-circle"></i> About</a>
    <a href="#services"><i class="fa fa-cogs"></i> Services</a>
    <a href="#contact"><i class="fa fa-envelope"></i> Contact</a>
</div>

CSS:

.vertical-nav a i {
    margin-right: 8px; /* Add space between icon and text */
}

Output: Icons appear next to each menu item, making the navigation bar more intuitive.

Fixed Vertical Navigation Bar

To keep the navigation bar fixed while scrolling:

.vertical-nav {
    position: fixed; /* Keeps the bar in place */
    top: 0;
    left: 0;
    height: 100%; /* Full height */
}

Output: The navigation bar stays visible even as you scroll down the page.

Adding a Dropdown Menu

To add sub-menu links under specific sections:

HTML:

<div class="vertical-nav">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#services" class="dropdown">Services</a>
    <div class="dropdown-content">
        <a href="#web-design">Web Design</a>
        <a href="#seo">SEO</a>
        <a href="#marketing">Marketing</a>
    </div>
    <a href="#contact">Contact</a>
</div>

CSS:

/* Dropdown Styles */
.dropdown-content {
    display: none; /* Hidden by default */
    background-color: #444; /* Slightly lighter background */
}

.dropdown:hover + .dropdown-content {
    display: block; /* Show on hover */
}

.dropdown-content a {
    padding-left: 30px; /* Indent sub-links */
}

Output: When you hover over the “Services” link, sub-links appear below it.

Summary

Here’s what we’ve covered about creating a CSS Vertical Navigation Bar:

  1. Basic Structure: Simple HTML for a vertical menu.
  2. Styling: Customizing with colors, hover effects, and active states.
  3. Responsiveness: Adjusting the design for smaller screens.
  4. Icons: Adding icons for a better user experience.
  5. Dropdown Menus: Creating sub-menus for additional navigation.

For more web development tips and tutorials, visit The Coding College.

Happy coding and building vertical navigation bars!

Leave a Comment