How To Create CSS3 Dropdown Menu

This article relays relevant information on creating CSS3 dropdown menu, how it works and other general things useful in its rendering.

Today, people are able to incorporate their preferences in the layout for their webpages because of languages such as CSS3. With CSS3, creativity is possible with its multiple features, creating an avenue for people to discover innovative and helpful ways to create a convenient experience for users.

CSS3 Dropdown Menu Code

First, the general code for the menu is created:

.drop-menu {

display: block;

margin-left: auto;

margin-right: auto;

text-align: right;

padding: 20px 20px;

font-size: 18px;

height: 30px;

max-height: 40px;

width: 600px;

background: #gggg;

cursor: pointer;

border: 3px solid #f6f0e4;

}

 

Along with setting dimensions for padding, alignment, border, cursor, text alignment and so on, this design produces a set height for the menu. Since it has to have a menu vibe, you can also control the cursor by utilizing the pseudo-class: hover as shown below:

.drop-menu:hover .sub-menu {

display: inline-block;

}

 

Styling

In establishing your menu, you’ll also want to imitate some properties that were presented earlier. Different styles can be utilized to improve the visual effects of the CSS3 dropdown menu.

.sub-menu {

display: none;

width: 600px;

background: #gggg;

padding: 20px 20px;

margin-right: -10px;

margin-bottom: 11px;

border: 3px solid #fff;

-webkit-box-shadow: 0px 15px 30px rgba(0,0,0, 0.2);

-moz-box-shadow: 0px 15px 30px rgba(0,0,0, 0.2);

box-shadow: 0px 15px 30px rgba(0,0,0, 0.2);

}

 

The box-shadow style is quite superior since it utilizes a property which generates a gradient effect. A sample of the property is: set x-axis to 3px, y-axis to 24px, blur to 28px and shadow color to black with 30% alpha

Since the drop down menu is in itself a form of list, it also needs definition:

.sub-menu li {

list-style-type: none;

display: block;

border-bottom: 3px dotted #eaeaea;

font-size: 24px;

height: 30px;

padding: 10px 0;

}

 

Addition Of Small Icons

Beside the drop down labels, this code also enables the incorporation of small icons. It is a well-liked principle in designing for web pages to utilize images as an alternative to text to express implication. On how it is done, please refer to the example below:

.sub-menu li img {

margin-left: .8em;

}

 

This code is also striking in that it appends small particulars like a dotted solid double border between each item:

.sub-menu li:hover {

p. double {border-style: double;

}

 

Animated Symbols

Animated symbols can also be utilized to communicate to the user that it must be clicked. This symbol features rotation that the user can conveniently utilize when dragging and clicking items of concern.

.plus {

display: inline-block;

-o-transition: .2s ease-in-out;

-moz-transition: .2s ease-in-out;

-webkit-transition: .2s ease-in-out;

}

.drop-menu:hover .plus {

-o-transform: rotate(60deg);

-moz-transform: rotate(60deg);

-webkit-transform: rotate(60deg);

}