Home
Blogger

CSS3 gradient dropdown Navigation menu with Flying Effects

CSS3 gradient dropdown Navigation menu with Flying Effects
awesome menu

CSS3 is very effective for coding that make any widget fast loading. So I have designed this menu with complete CSS3 coding with gradient color black and dark blue.  And you will find also drop down menu with flying effect. That means when you just mouse over on dropdown menu then its submenu will come by flying from right. This menu is very professional and fancy looks which will best fit for your templates. Visitors will easily like this menu. And I have told before that this widget code is based on complete CSS3 so you don't have to worry about loading time.  


Live Demo


 Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

Step 5 Place gadget below header. that's it.


<style>
#BloggerSpicemenufly,#BloggerSpicemenufly ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    height:500px;}
#BloggerSpicemenufly {
    font-family: "Trebuchet MS  Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 980px;    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow: 0px 3px 3px #04BDFA;
    -webkit-box-shadow: 0px 3px 3px #04BDFA;
    box-shadow: 0 3px 4px #004065;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #04BDFA), color-stop(0.5, #005C91), color-stop(0.51, #005C91), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #04BDFA 0%, #04BDFA 50%, #04BDFA 51%, #838383 100%);
    background-color:#04BDFA;
}
#BloggerSpicemenufly ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#BloggerSpicemenufly li {
    border-bottom: 1px solid #005C91;
    border-left: 1px solid #005C91;
    border-right: 1px solid #005C91;
    border-top: 1px solid #005C91;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#BloggerSpicemenufly li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#BloggerSpicemenufly li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #04BDFA), color-stop(0.5, #5E5E5E), color-stop(0.51, #111111), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}
 /* widget by www.bloggerspice.com #BloggerSpiceAnim */
@-webkit-keyframes BloggerSpiceAnim {
    0% {-webkit-transform: scale(1);}
    30% {-webkit-transform: scale(1.3);}
    100% {-webkit-transform: scale(1);}}
@-moz-keyframes BloggerSpiceAnim {
    0% {-moz-transform: scale(1);}
    30% {-moz-transform: scale(1.3);}
    100% {-moz-transform: scale(1);}}
#BloggerSpicemenufly li > a:hover {
     -moz-animation-name: BloggerSpiceAnim;
    -moz-animation-duration: 0.7s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: BloggerSpiceAnim;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#BloggerSpicemenufly li:hover > a {
    z-index: 4;
}
#BloggerSpicemenufly li:hover ul.subs {
    left: 0;
    top: 34px;
    width: 150px;
}
#BloggerSpicemenufly ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 100%;
    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
 /* keyframes #bsfly */
@-webkit-keyframes bsfly {
    0% {margin-left:185px;}
    100% {margin-left:0px;opacity:1;}
}
@-moz-keyframes bsfly {
    0% {margin-left:185px;}
    100% { margin-left:0px;opacity:1;}
}
#BloggerSpicemenufly li:hover ul li {
    /* css3 animation */
    -moz-animation-name: bsfly;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: bsfly;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
     /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
/* animation delays by www.bloggerspice.com */
#BloggerSpicemenufly li:hover ul li:nth-child(1) {
    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
}
#BloggerSpicemenufly li:hover ul li:nth-child(2) {
    -moz-animation-delay: 0.05s;
    -webkit-animation-delay: 0.05s;
}
#BloggerSpicemenufly li:hover ul li:nth-child(3) {
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
#BloggerSpicemenufly li:hover ul li:nth-child(4) {
    -moz-animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
}
#BloggerSpicemenufly li:hover ul li:nth-child(5) {
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#BloggerSpicemenufly li:hover ul li:nth-child(6) {
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
#BloggerSpicemenufly li:hover ul li:nth-child(7) {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
#BloggerSpicemenufly li:hover ul li:nth-child(8) {
    -moz-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
}
</style>
<ul id="BloggerSpicemenufly">
    <li><a href="http://www.bloggerspice.com/">Home</a></li>    <li><a class="flybsmenu" href="#">Tips</a>        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>            <li><a href="#">Submenu 2</a></li>            <li><a href="#">Submenu 3</a></li>            <li><a href="#">Submenu 4</a></li>            <li><a href="#">Submenu 5</a></li>        </ul>
    </li>
    <li><a class="flybsmenu" href="http://namkna.blogspot.com/">Tricks</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>            <li><a href="#">Submenu 2-2</a></li>            <li><a href="#">Submenu 2-3</a></li>            <li><a href="#">Submenu 2-4</a></li>            <li><a href="#">Submenu 2-5</a></li>            <li><a href="#">Submenu 2-6</a></li>            <li><a href="#">Submenu 2-7</a></li>            <li><a href="#">Submenu 2-8</a></li>        </ul>
    </li>
    <li><a class="flybsmenu" href="#">Tools</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>            <li><a href="#">Submenu 3-2</a></li>            <li><a href="#">Submenu 3-3</a></li>            <li><a href="#">Submenu 3-4</a></li>            <li><a href="#">Submenu 3-5</a></li>        </ul>
    </li>
    <li><a href="#">Widget</a></li>    <li><a href="#">SEO</a></li>    <li><a href="#">AdSense</a></li>    <li><a href="#">Contact Us</a></li></ul>

Customization 

  • Change width: 980px; to increase or decrease wide of the menu.
  • Change all orange # with your Category links 
  • Change all Submenu 1 with your blog's Category name

6 comments

  1. What a great navigation menu. I super like to it.
    Bro how you designed such stuff and gadgets? What we have to learn to design gadgets? Please let me know.
    • Thanks for your comment. Bro due to mass use of JavaScript a blog become slow to load so bloggers are now relying on CSS3 coding. Because its easy and fast loading.In java script often you have to use image but in CSS you don't have to. So try to learn CSS3 and in future HTML5 will be use massively in blogspot..there are many online tutorial you can learn easily.
  2. Cool one dude.
    little back with colours should use some trendy colour.
    • bro suggest me some trendy color thus I can use it on my next widget. However you can change the color on this menu. Wherever get this #005C91 color code change it with your own.
  3. How can i add a search box at the end of this navigation menu because it will make it more productive. Please help i need your suggestions.navigationmenu
    • This is bit tricky can't explain in comment..to get the idea about search box see the source code from the below link. I think you have knowledge about coding. :d

      http://www.bloggerspice.com/2013/06/css3-menu-bar-with-social-network-and.html
Go Up