All Blog Tools: Multi Drop-down Menu Using CSS3

Multi Drop-down Menu Using CSS3

by: Keith

First and foremost before you create a free blog, I would just like to emphasize that creating this multi-level drop-down menu will purely be based on CSS3; We will NOT be using either Javascript or jQuery.

Next is that since some browser versions can't recognize CSS3, running this code on those browsers will yield a different look or result. Lastly, this menu is “widgetized” and has been made compatible with Blogspot blogging platform.

<style>

#MBT-Container {

font: normal 1em Arial, Helvetica, sans-serif;

width:100%; float:left;

}

a {

color: #333;

}

#nav {

margin: 0;

padding: 7px 6px 0;

background: #0080ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxpZv8B6TZc2HXGptTkxlbTTIkCfswHZ-EUkFVlHGxBSmS08PYAj3uDK0WoBdx-Qc_LVT1_rmhtS7z7cYZPPppr-si5pTH5Wnwok-tJ6__ojf5Gni0kfQbaIEk3PFhOhWANdajTucHbRg/s1600/gradient.png) repeat-x 0 -110px;

line-height: 100%;

border-radius: 2em;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);

-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);

}

#nav li {

margin: 0 5px;

padding: 0 0 8px;

float: left;

position: relative;

list-style: none; }

/* main level link */

#nav a {

font-weight: bold;

color: #e7e5e5;

text-decoration: none;

display: block;

padding: 8px 20px;

margin: 0;

-webkit-border-radius: 1.6em;

-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);

}

#nav a:hover {

background: #000;

color: #fff;

}

/* main level link hover */

#nav .current a, #nav li:hover > a {

background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxpZv8B6TZc2HXGptTkxlbTTIkCfswHZ-EUkFVlHGxBSmS08PYAj3uDK0WoBdx-Qc_LVT1_rmhtS7z7cYZPPppr-si5pTH5Wnwok-tJ6__ojf5Gni0kfQbaIEk3PFhOhWANdajTucHbRg/s1600/gradient.png) repeat-x 0 -40px;

color: #444;

border-top: solid 1px #f8f8f8;

-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);

-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);

box-shadow: 0 1px 1px rgba(0,0,0, .2);

text-shadow: 0 1px 0 rgba(255,255,255, 1);

}

/* sub levels link hover */

#nav ul li:hover a, #nav li:hover li a {

background: none;

border: none;

color: #666;

-webkit-box-shadow: none;

-moz-box-shadow: none;

}

#nav ul a:hover {

color: #fff !important;

text-align:left;

-webkit-border-radius: 0;

-moz-border-radius: 0;

text-shadow: 0 1px 1px rgba(0,0,0, .1);

}

/* dropdown */

#nav li:hover > ul {

display: block;

}

/* level 2 list */

#nav ul {

display: none;

text-align:left;

margin: 0;

padding: 0;

width: 185px;

position: absolute;

top: 35px;

left: 0;

background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxpZv8B6TZc2HXGptTkxlbTTIkCfswHZ-EUkFVlHGxBSmS08PYAj3uDK0WoBdx-Qc_LVT1_rmhtS7z7cYZPPppr-si5pTH5Wnwok-tJ6__ojf5Gni0kfQbaIEk3PFhOhWANdajTucHbRg/s1600/gradient.png) repeat-x 0 0;

border: solid 1px #b4b4b4;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);

-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);

box-shadow: 0 1px 3px rgba(0,0,0, .3);

}

#nav ul li {

float: none;

margin: 0;

padding: 0;

}

#nav ul a {

font-weight: normal;

text-shadow: 0 1px 0 #fff;

}

/* level 3+ list */

#nav ul ul {

left: 181px;

top: -3px;

}

/* rounded corners of first and last link */

#nav ul li:first-child > a {

-webkit-border-top-left-radius: 9px;

-moz-border-radius-topleft: 9px;

-webkit-border-top-right-radius: 9px;

-moz-border-radius-topright: 9px;

}

#nav ul li:last-child > a {

-webkit-border-bottom-left-radius: 9px;

-moz-border-radius-bottomleft: 9px;

-webkit-border-bottom-right-radius: 9px;

-moz-border-radius-bottomright: 9px;

}

/* clearfix */

#nav:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

}

#nav {

display: inline-block;

}

</style>

<li><a href="#">Blogger Tricks</a>

<ul>

<ul>

<li><a href="#">Sub Sub-Row 1

</a></li></ul>

</li>

<ul>

</ul>

</li>

</ul>

</li>

<li><a href="#">Multi-Levels</a>

<ul>

<ul>

<li><a href="#">Sub-Level Item 1</a></li>

<li><a href="#">Sub-Level Item 1</a>

<ul>

<li><a href="#">Sub-Level Item 11</a></li>

<li><a href="#">Sub-Level Item 22</a></li>

<li><a href="#">Sub-Level Item 33</a></li>

</ul>

</li>

<li><a href="#">Sub-Level Item 1</a></li>

</ul>

</li>

<li><a href="#">Sales</a></li>

<li><a href="#">Another Link</a></li>

<li><a href="#">Department</a>

<ul>

<li><a href="#">Sub-Level Item 2</a></li>

</ul>

</li>

</ul>

</li><li><a href="#">Sitemap</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Create This »</a></li>

</ul></div>

<br/>

And that’s just about it! The resulting menu should look something similar to this:

NOTE: Of course, the colors on the resulting menu can and/or may vary depending on the color gradient you prefer in your code.

Also, below is the comparison shot of how the menu would look like on browsers that do not support CSS3 (like IE7 and below).

Feel free to experiment with the attributes so you can make it look according to your own preferences.

All Blog Tools

Sunday, December 11, 2011

Multi Drop-down Menu Using CSS3

No comments:

Post a Comment