Announcement:

  Hello, We Changed Our Cloth, How It Is Looking? Leave Your Feedback At Our Page.

Friday, December 21, 2012

Awesome & Cute Multi-Level DropDown Menu Bar For Blog And Website

This Article Was Live On: Friday, December 21, 2012 And Till Now Have6 comments.
Awesome & Cute Multi-Level DropDown Menu Bar For Blog And Website

It is always fun to learn and explore the new standards introduced for CSS. With growing development in HTML5 and CSS3, heavy scripts and flash tools are pushed back. This Mac-like multi-level drop down menu that we will learn to create and how to add it to Blogger is solely based on Pure CSS3 with no jquery used at all! It uses simple box-shadow, text-shadow and border-radius properties.
It is compatible with all major browsers like FireFox, Chrome and Safari. Since IE7+ always lack compatibility with CSS3 therefore only the rounded borders will not render in IE7. I have kept the installation extremely easy. You just need to copy and paste the code. This Menu is provided by Web Designer Wall guys.

Awesome & Cute Multi-Level DropDown Menu Bar For Blog And Website
DEMO Screen Shoot

Features:

1.) MultiLevel DropDown Menu.
2.) Pure HTMl,CSS Code.
3.) No JQuery, JavaScript.
4.) Quick To Load And Easy To Install.
5.) Awesome And Stylish In Look.
6.) Based Upon <ul> <li> That Will Help You In Gaining SiteLinks On Google.
7.) You Can Change Color Easily And The Gradient Will Be Automatically Changed.
8.) Cross Browsers Support.


How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.


How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.


<style>#exe-Container{font:normal 1em Arial,Helvetica,sans-serif;width:100%;float:left}a{color:#333}#exenav{margin:0;padding:7px 6px 0;    background:#0080ff url(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/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)}#exenav li{    margin:0 5px;    padding:0 0 8px;    float:left;    position:relative;    list-style:none}#exenav 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)}#exenav a:hover{    background:#000;    color:#fff}#exenav .current a,#exenav li:hover >a{    background:#666 url(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/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)}#exenav ul li:hover a,#exenav li:hover li a{    background:none;    border:none;    color:#666;    -webkit-box-shadow:none;    -moz-box-shadow:none}#exenav ul a:hover{    background:#0080ff url(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png) repeat-x 0 -100px !important; color:#fff !important;text-align:left; -webkit-border-radius:0; -moz-border-radius:0; text-shadow:0 1px 1px rgba(0,0,0,.1)}#exenav li:hover >ul{ display:block}#exenav ul{    display:none;text-align:left;    margin:0;    padding:0;    width:185px;    position:absolute;    top:35px;    left:0;    background:#ddd url(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/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)}#exenav ul li{    float:none;    margin:0;    padding:0}#exenav ul a{    font-weight:normal;    text-shadow:0 1px 0 #fff}#exenav ul ul{    left:181px;    top:-3px}#exenav 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}#exenav 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}#exenav:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;    height:0}#exenav{display:inline-block}</style>
<div id="exe-Container">
<ul id="exenav">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Multi-Levels 1</a>
<ul>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
</li>
</ul>
</li>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 2</a></li>
<li><a href="#">Sub Sub-Row 2</a></li>
<li><a href="#">Sub Sub-Row 2</a></li>
</ul>
</li>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 3</a></li>
<li><a href="#">Sub Sub-Row 3</a></li>
</ul>
</li>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Gallery</a></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>
</ul>
</div>


Customization:

1.) Change All Black Bold Text With Your Data.
2.) Change All The Blue Hash With Your Data Link.
3.) To Change The Color Of The Menu, Simply Replace #0080ff With A Colour Of Your Choice. You May Use Our Color Generator Tool

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



6 comments :

  1. How much do would you charge to customize my blog with these drop down menus, i' at http://lilyseymour.blogspot.com. I also need to have my Blog pointed to my domain www.lilyseymour.com.

    ReplyDelete
    Replies
    1. Send An E-Mail At (admin@exeideas.tk) For More Info...

      Delete
  2. Useful Article. i using in my website. Thank u so much.

    ReplyDelete
  3. my blog is ping-mirror.blogspot.com , can u just direct me how to replace that blue hash to our particular label link in submenu please , thanks

    ReplyDelete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.