Create Responsive Dropdown Menu Html Css Flexbox(Source Code)

Create Responsive Dropdown Menu Html Css Flexbox(Source Code)

Hello coders, a very warm welcome to code with random’s today’s blog in which we are going to create a responsive dropdown menu. We have seen many dropdown menus on a number of websites we visit while surfing the internet. We as a front-end developer have this tool called html & css. By which we can make many projects in different ways of presentation. But, before going to the code part. Let us understand what is flex drop-down menu.

What is a flex dropdown menu?

Using any element to open the dropdown menu, e.G. A <button>, <a> or <p> element. We can use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with css.

Let us see the coding of this project.

Html code dropdown menu:-

In html, we create a layout of the webpage. e are using some basic concepts of html like div, span, anchor tag, class, ids, and semantic tags.

What is an anchor tag?

The <a> tag defines a hyperlink, which is used to link from one page to another.

100+ Front-end Projects for Web developers (Source Code)

The most important attribute of the <a> element is the
Href attribute, which indicates the link’s destination.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

What is a semantic tag?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> – tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> – clearly defines its content.

<header>
    <nav role="navigation">
        <ul>
            <li>
                <a href="/">
                    <div>Home <span>there's no place like it</span></div>
                </a>
            </li>
            <li>
                <a href="/blog">
                    <div>Blog <span>my thoughts rock</span></div>
                </a>
                <div>
                    <ul>
                        <li><a href="#">Me</a></li>
                        <li><a href="#">Gaming</a></li>
                        <li><a href="#">Sport</a></li>
                        <li><a href="#">Web Design</a></li>
                        <li><a href="#">Web Development</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="/contact">
                    <div>Contact <span>drop me a line</span></div>
                </a>
            </li>
            <li>
                <a href="/forum">
                    <div>Forum <span>chat with others</span></div>
                </a>
            </li>
        </ul>
    </nav>
</header>

In this html code, we have defined navigation and the required label and defined a span tag for creating a partition between the menus. Let us see the html output, before writing css for the flexbox dropdown menu.

Html output dropdown menu:

 

Css code dropdown menu:-

Using css we can style the layout/html page. Here we are using some basic properties of css like border-box, flex-box, css class and id selectors, pseudo selectors,pseudo-element.

5+ HTML CSS project With Source Code

What are pseudo-elements?

A css pseudo-element is used to style specified parts of an element.

For example, it can be used to:

Style the first letter, or line, of an element
Insert content before, or after, the content of an element
Css – the ::after pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an element.

* {
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}
html {
    font-size: 100%;
    height: auto !important;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
.clear {
    display: block;
}
.clear::after {
    clear: both;
    content: ".";
    display: block;
    height: 1px;
    visibility: hidden;
} /*GENERIC STYLES*/
body {
    background: #f2f2f2;
    color: #222;
    -webkit-font-smoothing: antialiased;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.05em;
    font-weight: 400;
    height: auto !important;
    height: 100%;
    line-height: 1.6rem;
    min-height: 100%;
} /*NAV*/
header {
    background: linear-gradient(
        to left,
        rgba(54, 194, 182, 0.96) 0,
        rgba(62, 188, 207, 0.96) 100%
    );
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    display: block;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
header > nav > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}
header > nav > ul > li {
    flex: 0 1 auto;
    margin: 0;
    padding: 0;
    position: relative;
    transition: all linear 0.1s;
}
header > nav > ul > li:hover {
    background: rgba(58, 162, 173, 1);
}
header > nav > ul > li a + div {
    background: linear-gradient(
        to bottom,
        rgba(58, 162, 173, 1) 0,
        rgba(62, 188, 207, 0.96) 100%
    );
    border-radius: 0 0 2px 2px;
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05);
    display: none;
    font-size: 1rem;
    position: absolute;
    width: 195px;
}
header > nav > ul > li:hover a + div {
    display: block;
}
header > nav > ul > li a + div > ul {
    list-style-type: none;
}
header > nav > ul > li a + div > ul > li {
    margin: 0;
    padding: 0;
}
header > nav > ul > li a + div > ul > li > a {
    color: rgba(255, 255, 255, 0.9);
    display: block;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    padding: 0.25rem 1.5rem;
    text-decoration: none;
    text-transform: uppercase;
}
header > nav > ul > li a + div > ul > li:hover > a {
    background-color: rgba(0, 0, 0, 0.15);
}
header > nav > ul > li > a {
    align-items: flex-start;
    color: #fff;
    display: flex;
    font-size: 1.55rem;
    font-weight: 200;
    letter-spacing: 1px;
    max-width: 130px;
    padding: 1rem 1.5rem;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    transition: all linear 0.1s;
}
header > nav > ul > li > a > div > span {
    color: rgba(255, 255, 255, 0.75);
    display: block;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 0.7rem;
    font-style: italic;
    line-height: 1rem;
    max-width: 260px;
}
@media (min-width: 990px) {
    header > nav > ul > li > a {
        max-width: 500px;
        font-size: 1.7rem;
        line-height: 2rem;
    }
    header > nav > ul > li > a > div > span {
        margin: 4px 0 0;
    }
}

In this External CSS we have styled all the tags defined in HTML Code, we have also arranged the sub menu in a drop-down manner so that it can’t get messy. We have also added a hover effect so that as soon as the user takes the mouse pointer on it. It will show the effect. Let us see the Output, of this project.

Final Output dropdown menu:

Responsive Dropdown Menu

Summary:

We have created the flexbox dropdown menu, We have created an HTML file we have defined all the required tags and classes for the making of the navbar. We have also created a CSS file for the styling of our project, we have styled all the tags defined in the HTML file. We have also added a hover effect. If you loved it do comment it boosts our motivation to bring new projects for you guys. If you face any difficulty while performing reach out to us with the help of the comment section.

Happy Coding

Written by @Harsh_9& Himanshu Singh

Share on:

Leave a Comment