Menu

Create a Simple Dropdown Menu From Scratch with HTML and CSS [SOURCE CODE]

July 10, 2019 - General, Web Development
Create a Simple Dropdown Menu From Scratch with HTML and CSS [SOURCE CODE]

 
 
 
 
 
 

Download HTML file


In this article, I will give you the source code and explain you how to create a dropdown menu like this one:
 

 
Sure I could have picked better colors and make a whole page but that’s not the point of this article. Here I want to show you how to create a simple dropdown menu that you will be able to add to your website. Here, we will use only pure HTML and CSS and if you want, at the end you can change the colors, add elements in the list and customize it like you want.

 

The Code

I tried to make this code as simple as possible. Here all is in a single HTML file. I tried to keep it readable and I put the CSS code in the head tags of the HTML file. Ps: there are probably over 100 other ways to make a menu like this one…
 

<!DOCTYPE html>
<html>
<head>
    <title>DROPDOWN MENU EXAMPLE</title>

    <style>
    body
    {
        background-repeat: no-repeat;
        background-image: linear-gradient(white,#1e1f32);
    }
    .title-txt
    {
        position: absolute;
        left: 1%;
        font-family: Impact;
    }
    .bar
    {
        position: absolute;
        top: 100px;
        left: 1%;
        width: 98%;
        height: 50px;
        background-image: linear-gradient(#424680, black);
        border-radius: 5px;
        box-shadow: 10px 10px 5px grey;
    }
    .cell
    {
        position: absolute;
        top: 0px;
        left: 8%;
        width: 20%;
        height: 50px;
        background-color: red;
    }
    .cell:hover
    {
        display: none;
    }
    .list
    {
        position: absolute;
        top: 0px;
        left: 8%;
        width: 20%;
        height: 50px;
        border-left: 1px solid #252747;
        background-color: #424680;
    }
    .list:hover .element
    {
        background-color: #424680;
        height: 150px;
        display: block;
    }
    .block-list
    {
        height:49px; 
        width:100%; 
        border-bottom: 1px solid #252747;
    }
    .block-list:hover
    {
        background-color: white;
    }
    .element
    {
        display: none;
    }
    .page_link
    {
        position:absolute; 
        margin-left:20px; 
        margin-top:15px;
    }
    </style>
</head>

<body>
    <div class="title-txt"><h1>HELLO WORLD!</h1></div>

    <div class="bar">
        <div class="list">
                <div class="block-list">
                    <div class="page_link">Menu</div>
                </div>
                <div class="element">
                    <div class="block-list">
                        <div class="page_link">Page 1</div>
                    </div>
                    <div class="block-list">
                        <div class="page_link">Page 2</div>
                    </div>
                    <div class="block-list">
                        <div class="page_link">Page 3</div>
                    </div>
                </div>
        </div>
    </div>

</body>

</html>

 
Ok. First I know what you think… “Omg! That’s a lot of code!”. But no. Ignore all the CSS code in the head tags for now, the interesting part is in the body. Let’s take a look at it:
 

<body>
    <div class="title-txt"><h1>HELLO WORLD!</h1></div>

    <div class="bar">
        <div class="list">
                <div class="block-list">
                    <div class="page_link">Menu</div>
                </div>
                <div class="element">
                    <div class="block-list">
                        <div class="page_link">Page 1</div>
                    </div>
                    <div class="block-list">
                        <div class="page_link">Page 2</div>
                    </div>
                    <div class="block-list">
                        <div class="page_link">Page 3</div>
                    </div>
                </div>
        </div>
    </div>

</body>

 
Normally you put the CSS code in a different file so you don’t see it anyways. Here you can see all the div tags you will need to build your dropdown list from scratch and after you can customize them by changing their CSS attributes. First we have a div with a class named title-txt, it is simply to print the “Hello World!” on the top of the page so ignore it, it has nothing to do with our dropdown list. Then we have the div “bar”, it is the long bar that contains our dropdown list and named “list” that contains the main button of the menu (always visible) and the 3 elements inside a div named “element”. Those 3 elements are invisible when the mouse is not on the main button “Menu”.
 

Now if you look only at the CSS styling you should already have a better understanding of how this list works:
 

<head>
    <title>DROPDOWN MENU EXAMPLE</title>

    <style>
    body
    {
        background-repeat: no-repeat;
        background-image: linear-gradient(white,#1e1f32);
    }
    .title-txt
    {
        position: absolute;
        left: 1%;
        font-family: Impact;
    }
    .bar
    {
        position: absolute;
        top: 100px;
        left: 1%;
        width: 98%;
        height: 50px;
        background-image: linear-gradient(#424680, black);
        border-radius: 5px;
        box-shadow: 10px 10px 5px grey;
    }
    .cell
    {
        position: absolute;
        top: 0px;
        left: 8%;
        width: 20%;
        height: 50px;
        background-color: red;
    }
    .cell:hover
    {
        display: none;
    }
    .list
    {
        position: absolute;
        top: 0px;
        left: 8%;
        width: 20%;
        height: 50px;
        border-left: 1px solid #252747;
        background-color: #424680;
    }
    .list:hover .element
    {
        background-color: #424680;
        height: 150px;
        display: block;
    }
    .block-list
    {
        height:49px; 
        width:100%; 
        border-bottom: 1px solid #252747;
    }
    .block-list:hover
    {
        background-color: white;
    }
    .element
    {
        display: none;
    }
    .page_link
    {
        position:absolute; 
        margin-left:20px; 
        margin-top:15px;
    }
    </style>
</head>

 
If you need a refresh about CSS take a look at our CSS Cheatsheet in our ressources. You can also download the HTML file directly
here.

Leave a Reply

Your email address will not be published. Required fields are marked *