Responsive Dropdown Menu

Create Responsive Flexbox Dropdown Menu Css(Source Code)

Flexbox Dropdown Menu CSS

Hello coders, a very warm welcome to the Codewithrandom blog. Today we are going to Create a Responsive Flexbox Dropdown Menu Using Html and Css.  We have seen many dropdown menus on a number of websites we visit while surfing the internet.

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.

Create Responsive Flexbox Dropdown Menu Css(Source Code)

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.

50+ HTML, CSS and JavaScript Projects With Source Code

Code byN/A
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNo
ResponsiveYes
Responsive Dropdown Menu Table

Let us see the coding of this project.

Html Code For 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+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

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

ADVERTISEMENT

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

ADVERTISEMENT

ADVERTISEMENT

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

ADVERTISEMENT

ADVERTISEMENT

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 specified the navigation, the necessary label, and a span tag for dividing the menus. Here, we’ll use the header tag to create the section for our drop-down menu, and then we’ll create the table for our navigation bar using the unorder list tag, and finally, using the unorder list tag, we’ll create a series of lists with many list items for the navigation bar, and finally, using the a> tag, we’ll create a button for the chat with others.

Restaurant Website Using HTML And CSS With Source Code

Let us see the html output, before writing css for the flexbox dropdown menu.

Html output dropdown menu:

Create Responsive Flexbox Dropdown Menu Css(Source Code)

CSS Code For 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, and 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;
    }
}

Step1:We will set the padding, margin, and outline properties to “zero,” “none,” and “border-box,” respectively, using the universal tag identifier (*).

Once the multiple element has been chosen, we will change its display to “block” using the multiple tag selector. We will use HTML to change the font size to “100%” and the height property to “100%”.

Restaurant Website Using HTML And CSS With Source Code

  *
{ 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%; }

Step2:Now, using the header element selector, we will style our navbar. We’ll make the background using the background property to be a “linear gradient” using the colours “see green” and “blue.” We’ll change the display to “block” using the display property. We’ll change the width to “100%” using the width property.

The display will be changed to flex using the header, navbar, and ul. The flex wrap will be set to wrap, and the background colour will be cyan.

Create Resume/CV Website Using HTML and CSS (Source Code)

We will specify the maximum screen width using the media query property. Since we defined the size of the element according to screen sizes, if the screen size decreases below the prescribed width, the header and the content inside the drop-down menu immediately adjust.

All of the tags specified in the HTML code have been styled in this external CSS, and the submenus have been arranged in a drop-down format to prevent confusion. Additionally, a hover effect has been introduced so that it appears as soon as the user places the mouse pointer over it. It will demonstrate the outcome. Let’s examine the project’s results.

Final Output Of Responsive Flexbox Dropdown Menu Css:

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.

Video Output Of Flexbox Dropdown Menu CSS:-

Live Preview Of Flexbox Dropdown Menu CSS:-

 

Happy Coding

Written by @Harsh_9& Himanshu Singh

Which code editor do you use for Responsive Dropdown Menu coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

What is a drop down Menu?

A dropdown menu is a menu that enables you to show a collection of mutliple option at a same place user can select out multiple otption easily. When users click the menu label or move their cursor over it, a list of choices appears, from which they can choose one by clicking the relevant content name.

What is the purpose of drop down menu?

Drop down menus were primarily developed to save screen space and provide more information in a condensed space, assisting users in the efficient management of the website.



Leave a Reply