CSS3 Drop Down Menu - No Images and No Scripts!


css3 Drop down menu


After My Previous Article Make a Popup Subscribe Like aweber, I’m Back here With another Supercool Article About Cool Css3 Navigation In Blogger. Again Thanks To Mohammad Mustafa Sir For Making It Approved. This amazing drop down menu is created by Catalin Rosu and uses no images or scripts at all! We will be sharing a modified version which may work perfectly with Blogger. Its pure power display of CSS3 . It is really Cool and Professional Widget For Your Blog Which will really change the appearance of Your Blog and Make it trendy and attractive. It is very Easily Integrated in your BLOG.

 

Live Demo

Why Choose This Menu?

This Widget is Simple, Supercool And The Main Part is that It Doesn’t Needs Any jQuery or JavaScript. It uses no images at all and loads extremely fast. The previous CSS3 Menu that we shared made use of images and therefore took few seconds to load but this one is far ahead in quality load time. It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.

Add it to Blogger

This Navigation Uses Css3 And Has A Smooth Scrolling Effect Which Makes It Unique And Special. Have Fun and Enjoy it By Adding In Your Blog.
To Enable This You Need To Do The Following :

  1. Go To Blogger > Design
  2. Click on "Add a Gadget"
  3. Choose HTML/Javascript widget
  4. Paste the following code inside it

<style>

/*------ CSS3 Drop Down Menu By MBT (www.mybloggertricks.com)---------*/

#mbt-menu, #mbt-menu ul {

margin: 0;

padding: 0;

list-style: none;

}

#mbt-menu {

width: 960px;

margin: 60px auto;

border: 1px solid #222;

background-color: #111;

background-image: -moz-linear-gradient(#444, #111);

background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

background-image: -webkit-linear-gradient(#444, #111);

background-image: -o-linear-gradient(#444, #111);

background-image: -ms-linear-gradient(#444, #111);

background-image: linear-gradient(#444, #111);

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

-moz-box-shadow: 0 1px 1px #777;

-webkit-box-shadow: 0 1px 1px #777;

box-shadow: 0 1px 1px #777;

}

#mbt-menu:before,

#mbt-menu:after {

content: "";

display: table;

}

#mbt-menu:after {

clear: both;

}

#mbt-menu {

zoom:1;

}

#mbt-menu li {

float: left;

border-right: 1px solid #222;

-moz-box-shadow: 1px 0 0 #444;

-webkit-box-shadow: 1px 0 0 #444;

box-shadow: 1px 0 0 #444;

position: relative;

}

#mbt-menu a {

float: left;

padding: 12px 30px;

color: #999;

text-transform: uppercase;

font: bold 12px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#mbt-menu li:hover > a {

color: #fafafa;

}

*html #mbt-menu li a:hover { /* IE6 only */

color: #fafafa;

}

#mbt-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: #444;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

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

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

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

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

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

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

-ms-transition: all .2s ease-in-out;

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

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

}

#mbt-menu li:hover > ul {

opacity: 1;

visibility: visible;

margin: 0;

}

#mbt-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);

}

#mbt-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;

}

#mbt-menu ul li:last-child {

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

#mbt-menu ul a {

padding: 10px;

width: 130px;

_height: 10px; /*IE6 only*/

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

#mbt-menu ul a:hover {

background-color: #0186ba;

background-image: -moz-linear-gradient(#04acec, #0186ba);

background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

background-image: -webkit-linear-gradient(#04acec, #0186ba);

background-image: -o-linear-gradient(#04acec, #0186ba);

background-image: -ms-linear-gradient(#04acec, #0186ba);

background-image: linear-gradient(#04acec, #0186ba);

}

#mbt-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;

}

#mbt-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 #444;

}

#mbt-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 #3b3b3b;

}

#mbt-menu ul li:first-child a:hover:after {

border-bottom-color: #04acec;

}

#mbt-menu ul ul li:first-child a:hover:after {

border-right-color: #0299d3;

border-bottom-color: transparent;

}

#mbt-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="mbt-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

The widget is extremely easy to be edited. To change links title simply replaced the bolded text with your page titles and replace the hash sign (#) with respective links.

5. Click save and Done! :)

Need Help?

For any further help please feel free to post your queries in the comment box below. Its Very Handy, Light weight and Professional navigation Which you all can use to get rid of scripts and bulky menus that uses images and takes a lot of time to load.

Don't forget to check:


This Is Me Sidharth, The Admin Of ILibrary, Stay In Contact With Me @Facebook

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

82 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Nice design without image.
    Keep it up sir

    ReplyDelete
  2. Gorgeous Design
    Is A Unique, Thank You Muhammad.
    MAKE DOLLARS ONLINE

    ReplyDelete
  3. Very nice but i have a question
    My blog menu are created in html not java script gadget
    can i put this to my html?

    ReplyDelete
  4. how to remove my blog drop down menu and how to insert above drop down menu in to my blog ....i am useing Robusta Blogger Template .....my web is www.hiapics.co.cc

    ReplyDelete
  5. another good article from you Sid. :)

    ReplyDelete
  6. When i apply this to my blog its drop down menus hide in tmeplate
    How do i fix this
    Thanks

    ReplyDelete
  7. Dear Freind,
    Thanks for this beautiful/easy tool i like this. the problem which i am facing is what Mr. Shoaib is facing "When i apply this to my blog its drop down menus hide in tmeplate" but when i keep this widget just above the blog post it works perfectly. please tell me how to keep this widget below pages in blogger.
    my blog address is : http://latestupdatesofincometax.blogspot.com/

    ReplyDelete
  8. Assalam Mustafa... i have problem same with Praveen Kumar, Help me!!! my blog: d-t3xfa.blogspot.com

    ReplyDelete
  9. Hallo Mustafa, I Succed install this menu at my blog. now, i want to change the width and add some menu again because now installed 8 options.. i want 10 options, how???

    ReplyDelete
  10. Hello Mustafa and congratulations for your job

    You have sub menu only after the "CATOGORIES" and I want to add another one submenu after "WORK". Is it possible and if yes how can i do??
    Thanks

    ReplyDelete
  11. Hello
    I've got a problem with the drop down menu, could you help me.
    It doesn't drop down when you put your courser on it.

    please help me.
    email:
    bruetalsociety@googlemail.com
    blog
    bruetalsociety.blogspot.com

    ReplyDelete
  12. Thanks for sharing but i think it's not work on IE (CSS3)

    ReplyDelete
  13. Like other readers I saying, the drop down list is hidden covered by the blog because it's in a widget. Is there an easy fix for this? Such as maybe changing the z-index for the widget?

    ReplyDelete
  14. @Valin

    Works with IE9 pal :)

    @riley

    Replace the following code in your widget code:

    <ul>
    <li><a href="http://www.rileyadamvoth.com/p/tragedy-fortunate.html">Tragedy Fortunate</a></li>
    <li><a href="#">Five Seventeen</a></li>
    </ul>
    </ul>



    with this:


    <li><a href="http://www.rileyadamvoth.com/p/tragedy-fortunate.html">Tragedy Fortunate</a></li>
    <li><a href="#">Five Seventeen</a></li>

    </ul>


    See if it works. Z-index is already set to 9999 which will bring it at front of all other elements. The problem with your code is related to some other problem. Try and let me. :)

    ReplyDelete
    Replies
    1. Hey thanks so much for replying. Shortly after I posted the question I figured it out. It couldn't be posted as a gadget, but it worked when I put it in my template and worked on it some.
      Your site has helped me so much as I've built my blog one piece at a time. :) Thanks for all your tutorials! I'm definitely going to donate to you for your work. Great job.

      Delete
  15. I placed this code in my blog at the top gadget but the drop menu is not visible. please do help me...

    ReplyDelete
  16. Get a Translator widget with 36v languages.

    http://www.fblatest.in/2012/02/google-translate-widget-with-36.html


    if u like it then, subscribe us for daily fresh updates.

    ReplyDelete
  17. When I use this CSS in my blog (http://viskcorp.blogspot.com), it has a problem in IE8 with Compatibility View button. Phrases in each list item ("li") does not separate to rows. They stuck together. Please help me.

    ReplyDelete
  18. Thanks, very useful.

    I have used this in my blog http://www.alternativeeden.com/ and have changed the colours to fit.

    However is it posible to have 2 different highlight text colours.

    i.e on roll over for top level text to change to (in my case orange) and then for the drop down text to stay white?

    ReplyDelete
  19. I use the thesis blogger template of Anup, but the dropdown menu don't display well on IE. I applied this post for my blog and optained the dropdown menu, which shown well on IE. Thank you very much.

    ReplyDelete
  20. bhai.....thanks, m try your post in my blog.

    soft-09.blogspot.in.

    bhai plz visit my blog and give me some feedback

    ReplyDelete
  21. For those with the problem of dropdown menu that not appear (hidden), maybe because you are using a new theme layout in blogger, do the following:
    below: #mbt-menu {
    put:
    overflow:visible;


    I think that's it!
    Sorry! My portuguese is better than my english. LOL!
    Marco

    ReplyDelete
  22. Hi, thanks for the menu. It works great. I would, however, like to change the colour scheme and the width of the drop-down menus to fit larger text. I don't know much about HTML5 or CSS so I don't know what to change to fix these minor points. Any help would be greatly appreciated.

    Les

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

    ReplyDelete
  24. I made mods to fix the colours and sizes of the li entries. But, I find that on IE8 the menu loses focus after about 3 entries down - i.e. move to the fourth entry and the drop-down part goes away. I added 'overflow: visible'. It works fine with Chrome and Firefox on WinXP and on Linux. Just IE is the problem (isn't it always?).
    Also, the gradient doesn't seem to work on IE either. The menu is completely flat. It's a shame because, otherwise, it is a great menu.

    ReplyDelete
  25. I face the same problem while added a menu it got hide and somehow I managed to make it available using "overflow:visible;" but still its showing half of the drop down contents. Also behind the menu I got a white screen.
    My Blog is - http://dynamicbest.blogspot.in/
    please advice.

    ReplyDelete
  26. In addition I checked with SIMPLE template and it worked fine but with Awesome INC. template I got above issues. so is this not compatible with Awesome INC. template ?

    ReplyDelete
  27. I have fixed the issue with the cutted menu! i have removed the css tag in: .tabs-outer (it's the header), there you must disable: overflow: hidden;

    Please tell me if it works! Have a nice day. juri

    ReplyDelete
  28. I have the same problem as some people mentioned above. The dropdown menu is hidden when I have it above "blog posts" which is the only place it makes sense for me. you can see it here
    http://angrychairsmusic.blogspot.ca/

    ReplyDelete
  29. Nevermind, Guess i skipped the comment that solved this. All fixed.

    ReplyDelete
  30. Now for a new problem. I managed to change the gradient of the bar to black cause it suits my blog better, I just cant seem to get the gradient out of the dropdown tabs. I would like it all to just be black and only have the text be seen, no background.

    ReplyDelete
  31. Awesome, thanks for this article. But, sir I have a little problem. My blog has a green template and this black menu bar wont be suitable for my template. Could you tell me how can I properly change the background color. Waiting for ur reply.....

    ReplyDelete
  32. @tim

    For changing the background colours do this tim:

    For change navigation main background colour edit the bolded parts:

    #mbt-menu {

    width: 960px;

    margin: 60px auto;

    border: 1px solid #222;

    background-color: #111;

    background-image: -moz-linear-gradient(#444, #111);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

    background-image: -webkit-linear-gradient(#444, #111);

    background-image: -o-linear-gradient(#444, #111);

    background-image: -ms-linear-gradient(#444, #111);

    background-image: linear-gradient(#444, #111);



    To change the drop down menu colour edit:


    #mbt-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: #444;

    background: -moz-linear-gradient(#444, #111);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

    background: -webkit-linear-gradient(#444, #111);

    background: -o-linear-gradient(#444, #111);

    background: -ms-linear-gradient(#444, #111);

    background: linear-gradient(#444, #111);




    To change the drop down menu colour on mouse hover edit:

    #mbt-menu ul a:hover {

    background-color: #0186ba;

    background-image: -moz-linear-gradient(#04acec, #0186ba);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

    background-image: -webkit-linear-gradient(#04acec, #0186ba);

    background-image: -o-linear-gradient(#04acec, #0186ba);

    background-image: -ms-linear-gradient(#04acec, #0186ba);

    background-image: linear-gradient(#04acec, #0186ba);

    }



    I juts hope this answers all your questions. :)

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

    ReplyDelete
  34. Many thanks for this! Due to the template I used I ended up putting it in the source, but srtesco's hint of overflow:visible did help while I was setting up.

    ReplyDelete
  35. I put the code but only one sub menu is visible and not all! I mean the sub menu tabs are not displaying and I've put overflow to visible also. Please help. Visit wwww.oxylearing.com

    ReplyDelete
  36. WOW, awesome dude, you know what I need :D
    thanks..

    You can see the result in my blog,
    Antusia Project

    ReplyDelete
  37. would love to add this drop down menu to my blog but seems it does not work with the awesome inc template...or am i missing something!
    if this works better for my template by adding it in another way (in the html instead of widget) would someone be kind enough to explain how i do that...thank you.

    ReplyDelete
    Replies
    1. Hi Janice, curious if anyone helped you with this, I see it was over 3 years ago, but I need help with this same topic
      Thanks

      Delete
  38. How can I center the drop down menu on the page? Thanks!

    ReplyDelete
  39. how to post thing under the menu tittles???

    ReplyDelete
  40. Your content is shows potential, m gona add this to my bookmarks.
    Web Development

    ReplyDelete
  41. Thanks for your work, with the explainations, I'm starting to understand how HTML and CSS works, and specifically in Blogger !!

    But as others, I still have an issue with the drop down consistently showing behind the posts under IE9.
    I tried everything I could think of for hours, no luck.
    It's working great on firefox others though !

    Do you have any explaintion for this ?

    ReplyDelete
  42. Hi Mohammad, I love the menu, thanks for sharing. One problem I have come across is that it does not load at all on an iPad. Are you aware of this issue and have any ideas to resolve it, I'd be happy to test any ideas if you have some.

    ReplyDelete
  43. how to delete previous drop down menu ??

    ReplyDelete
  44. Is there a way to make this clickable instead of hover so it would work better on mobile browsers?

    Also, there seems to be a black bar on mine at the end. Anyone knows how to remove it?

    Check out mine at PinoyPundit

    ReplyDelete
  45. Hello Mohammad,
    This menu is great but fails to work in IE do you have any solutions??

    ReplyDelete
  46. Hello,

    I was trying to use this drop down menu, I found that when i place the same piece of code on header and on column, the header one will looks wrong and the one on column looks right to me. Is that anything due to blogspot's template, and if anyone know how to fix it. Thanks very much.

    My testing blog: http://oursecretcafetesting.blogspot.hk/

    ReplyDelete
  47. Hi Mohammad
    The drop down menu gets hidden in Awesome Inc template.
    tried what they say in the comments but its still not showing

    Please help

    ReplyDelete
  48. just went through the comment again and It works now!
    Thanks

    ReplyDelete
  49. How do I add a search bar on the right of the menu bar?
    Please Help

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

    ReplyDelete
  51. seems like Mohammad is a lot busy. Can anyone else tell me how to add a search box to the right end of the menu bar?

    Thanks.

    ReplyDelete
  52. I solved my queries from your comments and now my menu works perfect. Thanks!
    Take a look:
    http://www.se7enbet.com/

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

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

    ReplyDelete
  55. Loved your post..!
    But i got one question..
    How can we make this a multilevel list..??

    ReplyDelete
  56. Sir i have used this template and is looking awesome..Thanks..
    I need help !!
    I have made 1 more drop down like 1 is already named "categories" which has CSS,Web design etc..
    please see this first
    http://prntscr.com/yfthh
    So here on socialize us .. i just add "#" instead of link
    and in like us on facebook i want to put my facebook url but it gets add with my blog'g adress like this
    http://getfullversionsoftwares.blogspot.in/facebook.com/getfullversionsoftwares
    and i want like this
    facebook.com/getfullversionsoftwares
    PLZ HELP ME !

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

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

    ReplyDelete
  59. bro i m having a problem the dropdown menu is not visibel what to see at http://www.hdcartooninhindi.blogspot.in/

    ReplyDelete
  60. I face the same problem while added a menu it got hide and somehow I managed to make it available using "overflow:visible;" but still its showing half of the drop down contents. Also behind the menu I got a white screen.
    my blog is -hdcartooninhindi.blogspot.in plzzzzzz somedy help me

    ReplyDelete
  61. How can i write with small letters?

    ReplyDelete
  62. is it possible to widen the drop down menu parts to fit links with longer titles or even make the title wrap around if they don't fit the width?

    ReplyDelete
  63. Thanks!!! Will apply it later :)

    ReplyDelete
  64. I don't understand what to link post link address or page link i tried both but it didn't work. please help me

    ReplyDelete
  65. Hello sir I want to adjust it to the left side but it is in the centre .
    Please help

    ReplyDelete
  66. Hi, how do I add two drop down menus? I can't seem to get two just one.

    ReplyDelete
  67. Hey Bro, how to add one more hierarchy ... I mean sub menu to sub menu ....

    ReplyDelete