Forem

Cover image for Create Side Navigation bar with HTML and CSS
Rohit Sharma
Rohit Sharma

Posted on

9 3

Create Side Navigation bar with HTML and CSS

Welcome back Guys!
Today I'm going to show you how easily you can create a side navigation bar with using simple HTML and basic CSS. So let's get started with HTML part.

Reference Video:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Side Navigation Bar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="nav-bar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quibusdam est tempora sint repellendus impedit expedita obcaecati sapiente, eligendi nobis praesentium quidem aliquam earum explicabo dicta veniam sunt reprehenderit nemo hic et itaque nulla a? Unde, id. Officiis suscipit excepturi impedit provident cumque, sunt necessitatibus ad nobis nesciunt commodi, labore voluptates repellat? Aliquam, suscipit et recusandae, atque delectus unde ab veniam quam commodi aut eum dolore dicta adipisci fugit quas animi obcaecati harum voluptatem? Ad voluptatum, rerum adipisci dolorum culpa molestiae error vero. Nemo laudantium necessitatibus praesentium dignissimos sint similique pariatur rerum vitae officia vero earum facere, molestiae cumque? Quisquam.
    </div>
    <script src="main.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

We added 4 random links in div tag class (nav-bar) and dummy text in another div tag class (content). And that's enough for HTML.
And now it's time to jump into the most important part i.e. CSS.

      *{
        box-sizing: border-box;
        }
        html,body{
            margin: 0;
            padding: 0;
        }
        .nav-bar{
            background: lightgray;
            width: 30%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            overflow-y: auto;
        }
        .nav-bar a{
            text-decoration: none;
            color: red;
            display: block;
        }
        .nav-bar ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .nav-bar ul li a{
            padding: 10px;
            background: lightgray;

        }

        .nav-bar ul li a:hover{
            background: #173459;
        }
        .nav-bar li{
            border-bottom: 1px solid #333;
        }
        .nav-bar li:last-child{
            border: none;
        }
        .content{
            margin-left: 30%;
            width: 70%;
            padding: 2%;
        }
Enter fullscreen mode Exit fullscreen mode

Important Note:-
• In class "nav-bar" we set width of the nav-bar 30% so it covers only 30% of screen.
• We set overflow-Y to auto. So, if content amount increases then there will be a slide-bar.
• Now for content we set margin-left: 30% because in that 30% part we want to display the navigation bar.
• And set width: 70% so that remaining part is covered by the content.
That's it. We just created a sticky side Navigation Bar using basic HTML and CSS.

I Hope you loved ♥ it ☻

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay