RSS

How to Create a CSS3 Mega Drop-Down Menu

18 Jun

By: Valeriu Timbuc

Preview

Topic: CSS3
Difficulty: Intermediate
Estimated Completion Time: 1 hour

Hello guys! In this tutorial I will teach you how to create a pure CSS3 Mega Menu. Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are a great way to display/organize content. The design of this mega menu can be found on the The Bricks UI. Let’s start with the HTML markup…

HTML Markup

Create an unordered list with the class “nav” (<ul>), then for each menu item we will add a new list item (<li>) with an anchor tag (<a>) inside. If you want the menu item to be a mega menu just add a <div> inside of the <li>.

SEE ALSO: Animating SVG Gradients

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ul class="nav">
    <li>
        <a href="#">What's new</a>
        <div>
            Mega Menu Content...
        </div>
    </li>
    <li><a href="#">Top rated</a></li>
    <li>
        <a href="#">Earnings</a>
        <div>
            Mega Menu Content...
        </div>
    </li>
    <li><a href="#">Rings</a></li>
    <li><a href="#">Bracelets</a></li>
    <li><a href="#">All Categories</a></li>
    <li class="nav-search">
        <form action="#">
            <input type="text" placeholder="Search...">
            <input type="submit" value="">
        </form>
    </li>
</ul>

Reset and Container Basic Styles

As the default styles of the browsers differ from each other, we’ll add some reset styles to keep consistency between them and avoid future issues.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
    margin0;
    padding0;
    bordernone;
    outlinenone;
}
.nav a { text-decorationnone; }
.nav li { list-stylenone; }

Then we will add some basic styles to the menu container and float the list items to the left in order to show them on the same line.

1
2
3
4
5
6
7
8
9
10
11
.nav {
    display: inline-block;
    positionrelative;
    cursordefault;
    z-index500;
}
.nav > li {
    displayblock;
    floatleft;
}

Styling the Menu Links

We will start with the common styles like padding, height, position, etc. Then we’ll set the typography styles such as font size, color, text shadow, etc. We’ll also set a background color and a left and right border. To keep the styles transitions smooth we’ll add a CSS3 transition. Note that we set the same property five times, this is required because this property is not fully implemented in all browsers yet, and as this property is on testing, all the different browsers use a prefix before the property. So if you want to support some current and older browsers use this prefixes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.nav > li > a {
    positionrelative;
    displayblock;
    z-index510;
    height54px;
    padding0 20px;
    line-height54px;
    font-familyHelveticaArialsans-serif;
    font-weightbold;
    font-size13px;
    color#fcfcfc;
    text-shadow0 0 1px rgba(0,0,0,.35);
    background#372f2b;
    border-left1px solid #4b4441;
    border-right1px solid #312a27;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

For the hover state we will only change the background color. To finish the menu links styling we will add rounded corners to the first link using the :first-child pseudo selector and remove the left border.

1
2
3
4
5
6
.nav > li:hover > a { background#4b4441; }
.nav > li:first-child > a {
    border-radius: 3px 0 0 3px;
    border-leftnone;
}

Styling the Search Form

We’ll start with the form container: set the position to relative, add a left border like we have on the menu links and set the width to inherit. By setting the width to inherit it will use the width from the child inputs.

1
2
3
4
5
6
7
.nav > li.nav-search > form {
    positionrelative;
    width: inherit;
    height54px;
    z-index510;
    border-left1px solid #4b4441;
}

Then we will style the text input: float it to the left, set the height, padding, etc. To hide the text input we will set the width to 1px and remove the left and right padding. On the :hover and :focus state we will update the width and padding values.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.nav > li.nav-search input[type="text"] {
    displayblock;
    floatleft;
    width1px;
    height24px;
    padding15px 0;
    line-height24px;
    font-familyHelveticaArialsans-serif;
    font-weightbold;
    font-size13px;
    color#999999;
    text-shadow0 0 1px rgba(0,0,0,.35);
    background#372f2b;
    -webkit-transition: all .3s ease 1s;
    -moz-transition: all .3s ease 1s;
    -o-transition: all .3s ease 1s;
    -ms-transition: all .3s ease 1s;
    transition: all .3s ease 1s;
}
.nav > li.nav-search input[type="text"]:focus { color#fcfcfc; }
.nav > li.nav-search input[type="text"]:focus,
.nav > li.nav-search:hover input[type="text"] {
    width110px;
    padding15px 20px;
    -webkit-transition: all .3s ease .1s;
    -moz-transition: all .3s ease .1s;
    -o-transition: all .3s ease .1s;
    -ms-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
}

The styles for the submit input are similar to the text input, we’ll only set a fixed width and height, add a background icon and rounded corners using the border-radiusproperty. We have also set transitions for both inputs in order to have some smooth and nice animations.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.nav > li.nav-search input[type="submit"] {
    displayblock;
    floatleft;
    width20px;
    height54px;
    padding0 25px;
    cursorpointer;
    background#372f2b url(../img/search-icon.png) no-repeat center center;
    border-radius: 0 3px 3px 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
.nav > li.nav-search input[type="submit"]:hover { background-color#4b4441; }

 

 

Copy from: http://designmodo.com/create-css3-mega-menu/

Advertisements
 
Leave a comment

Posted by on June 18, 2014 in CS Style

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: