Menu Close Menu

Add Awesome CSS 3 Dropdown Menu–without JavaScript

 

CSS 3 Drop Down Menu

In this post I will share with you great beautiful and ready to use Css3 Dropdown. This Widget is Simple, Cool & The Main Part is that It Doesn’t Needs Any JQUERY or JavaScript. It uses no images at all and load fast. This Beautiful drop down menu is created by Catalin Rosu and uses no images or scripts at all! We will be sharing a modified version which work perfectly with Blogger. In this Post you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool CSS3 Features. Code implementation is very simple & easy. if you have any trouble feel free to post any query you may have I will loved reply back as soon as time allow.

 

Live Preview

 

How to add Css3 Drop Down Menu

 

For Further Help See Video Tutorial

 

1. Go to your Blogger Dashboard>>  Layout >> and click on add a gadget

2. Choose HTML/JAVASCRIPT Widget

3. and paste the following inside content are.

<style>
/*-- CSS3 Drop Down Menu By Blogger Tricks http://.bl0gger-tricks.blogspot.com-----*/

#bt-menu, #bt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#bt-menu {
width: 960px;
margin: 60px auto;
background: #DADFE1;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#bt-menu:before,
#bt-menu:after {
content: "";
display: table;
}
#bt-menu:after {
clear: both;
}
#bt-menu {
zoom:1;
}
#bt-menu li {
float: left;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#bt-menu a {
float: left;
padding: 12px 30px;
color: #000000;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#bt-menu li:hover > a {
background: #333333;
color: #fafafa;
}
*html #bt-menu li a:hover { /* IE6 only */
color: #333333;
}
#bt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #DADFE1 url('images/pageglare.png') no-repeat scroll;
 -moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#bt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#bt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#bt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#bt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#bt-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#bt-menu ul a:hover {
background-color: #333333;
}
#bt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#bt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333333;
}
#bt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #333333;
}
#bt-menu ul li:first-child a:hover:after {
border-bottom-color: #DADFE1;
}
#bt-menu ul ul li:first-child a:hover:after {
border-right-color: #DADFE1;
border-bottom-color: transparent;
}
#bt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>

<ul id="bt-menu"> 
<li><a href="#">Home</a></li> 
<li> 
<a href="#">Categories</a> 
<ul> 
<li><a href="#">CSS</a></li> 
<li><a href="#">HTML</a></li> 
<li><a href="#">Jquery</a></li> 
<li><a href="#">Blogger Tips</a></li> 
</ul> 
</li> 
<li><a href="#">Free Vector</a>
<ul>
<li><a href="#">Social Icon</a></li> 
<li><a href="#">Website Icon</a></li>
</ul>
</li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
<li><a href="#">Tools</a>
<ul>
<li><a href="#">Parser Tool</a></li> 
<li><a href="#">Escape Tool</a></li>
</ul>
</li> 
</ul>

The widget is easy to be edited. To change links title simply replaced the text with your page titles and replace the hash sign # with Your Pages links.  Click save and Done.

if you have any problem post your comments below in comment section. Thanks for reading our post .  happy blogging.

"Be the first to express your thoughts" :

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. This comment has been removed by a blog administrator.

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete
  12. This comment has been removed by a blog administrator.

    ReplyDelete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. This comment has been removed by a blog administrator.

    ReplyDelete
  15. This comment has been removed by a blog administrator.

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
  17. This comment has been removed by a blog administrator.

    ReplyDelete
  18. This comment has been removed by a blog administrator.

    ReplyDelete
  19. This comment has been removed by a blog administrator.

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. This comment has been removed by a blog administrator.

    ReplyDelete
  22. This comment has been removed by a blog administrator.

    ReplyDelete

Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.