Create dropdown menu using css & css3

Create dropdown menu using css & css3

This article we are creating create dropdown menu using css & css3. We have been using HTML, CSS & CSS3. How we have inserted HTML, CSS into our file. In this dropdown you can change according to your beautiful design. We can easily to modify. This is a very useful module for all web player. Just copy and paste this simple code & ready your dropdown menu.

We have 6 type of beautiful drop down menu you can choose according to your requirement.

By using this plugin the design will look like this.

First of all you put Html in your file.

<div class="parts"> <h2>Simple Dropdown Menu</h2> <ul> <li class="dropdown-here"> <a href="">Demo 1</a> <ul class="my-dropdown1"> <li><a href="">sub menu1</a></li> <li><a href="">sub menu2</a></li> <li><a href="">sub menu3</a></li> </ul> </li> </ul> </div> <div class="parts"> <h2>Animated Up Dropdown Menu</h2> <ul> <li class="dropdown-here"> <a href="">Demo 2</a> <ul class="my-dropdown1 animatedup-dw"> <li><a href="">sub menu1</a></li> <li><a href="">sub menu2</a></li> <li><a href="">sub menu3</a></li> </ul> </li> </ul> </div> <div class="parts"> <h2>Animated Down Dropdown Menu</h2> <ul> <li class="dropdown-here"> <a href="">Demo 3</a> <ul class="my-dropdown1 animatedown-dw"> <li><a href="">sub menu1</a></li> <li><a href="">sub menu2</a></li> <li><a href="">sub menu3</a></li> </ul> </li> </ul> </div> <div class="parts"> <h2>Animated Left Dropdown Menu</h2> <ul> <li class="dropdown-here"> <a href="">Demo 4</a> <ul class="my-dropdown1 animateleft-dw"> <li><a href="">sub menu1</a></li> <li><a href="">sub menu2</a></li> <li><a href="">sub menu3</a></li> </ul> </li> </ul> </div> <div class="parts"> <h2>Animated Right Dropdown Menu</h2> <ul> <li class="dropdown-here"> <a href="">Demo 5</a> <ul class="my-dropdown1 animateright-dw"> <li><a href="">sub menu1</a></li> <li><a href="">sub menu2</a></li> <li><a href="">sub menu3</a></li> </ul> </li> </ul> </div> <div class="parts"> <h2>Animated FadeIn Dropdown Menu</h2> <ul> <li class="dropdown-here"> <a href="">Demo 6</a> <ul class="my-dropdown1 animatesd-dw"> <li><a href="">sub menu1</a></li> <li><a href="">sub menu2</a></li> <li><a href="">sub menu3</a></li> </ul> </li> </ul> </div>

Then put Css in your file.

  


Some css put in your css file.

*{
    margin:0;
    padding: 0px;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}
body {
    border: 20px solid #f4f4f4;
    padding: 20px;
    font-family: cursive;
}
h2 {
    margin-bottom: 15px;
}
.parts {
    float: left;
    width: 50%;
    clear: right;
    border: 1px solid #ececec;
    padding: 30px;
}


/*====== Common css dropdown =========*/
.dropdown-here {
    position: relative;
}
.dropdown-here > a {
    color: #fff;
    font-size: 18px;
    background: #5cdb94;
    padding: 10px 38px 10px 22px;
    display: inline-block;
    position: relative;
}
.dropdown-here > a::after {
    content: "";
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
    position: absolute;
    top: 21px;
    transition: all 0.5s;
    right: 16px;
}
.my-dropdown1 li a {
    padding: 3px 15px;
    display: inline-block;
    width: 100%;
    transition: all 0.5s;
}
.my-dropdown1 li a:hover{
    padding-left: 17px;
}
.my-dropdown1::after {
    content: "";
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid white;
    position: absolute;
    top: -8px;
    left: 15px;
}
/*====== Common css dropdown =========*/


/*====== drop down 1 =========*/
.my-dropdown1 {
    position: absolute;
    left: 0;
    min-width: 168px;
    background: #fff;
    box-shadow: 0px 0px 3px 0px #ccc;
    transition: all 0.5s;
    padding: 6px 0 10px;
    display: none;
}
.dropdown-here:hover .my-dropdown1 {
    display: block;
}
/*====== drop down 1 =========*/


/*====== drop down 2 =========*/
.animatedup-dw {
    display: block;
    margin-top: 20px;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animatedup-dw{
    visibility: visible;
    opacity: 1;
    margin-top: 0px;
}
/*====== drop down 2 =========*/


/*====== drop down 3 =========*/
.animatedown-dw {
    display: block;
    margin-top: -20px;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animatedown-dw{
    visibility: visible;
    opacity: 1;
    margin-top: 0px;
}
/*====== drop down 3 =========*/


/*====== drop down 4 =========*/
.animateleft-dw {
    display: block;
    left: -20px;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animateleft-dw{
    visibility: visible;
    opacity: 1;
    left: 0px;
}
/*====== drop down 4 =========*/


/*====== drop down 5 =========*/
.animateright-dw {
    display: block;
    left: 20px;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animateright-dw{
    visibility: visible;
    opacity: 1;
    left: 0px;
}
/*====== drop down 5 =========*/


/*====== drop down 6 =========*/
.animatesd-dw {
    display: block;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animatesd-dw{
    visibility: visible;
    opacity: 1;
}
/*====== drop down 6 =========*/

Finally we are completed different type of drop down menu. First of all I want to tell you this, If you want to use more than drop down menu you can do easily first you will have to copy code & paste your HTML file. Likewise you can use more than more drop down in your beautiful page.

We have given the best suitable and easiest way for create dropdown menu using css & css3.

Thanks for reading this article. We have Html & Html5, jquery, js, css question & answer & Angular6 also. For more designs solutions like this, you simply visit our site’s post and pages. Collection of amazing designing, development tricks and tips. Hope you like create dropdown menu using css & css3 for any query & suggestion please comment.

We have furthermore more beautiful jQuery module you can visit easily.

https://www.papawebdesigner.com/category/jquery/

#slider #owl-carousel #logoslider #brandslider #jqueryslider



Leave a Reply

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