Pure CSS3 Drop Down Menu


Add it to Blogger

This Navigation Uses Css3 And encompasses a swish Scrolling impact that Makes It distinctive And Special. make merry and revel in it By Adding In Your diary.
To alter This you would like to try and do the subsequent :

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


    <style>
    /*------ CSS3 Drop Down Menu By TheTechWar-Z(thetechwarz.blogspot.com)---------*/
    #twz-menu, #twz-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #twz-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;
    }
    #twz-menu:before,
    #twz-menu:after {
    content: "";
    display: table;
    }
    #twz-menu:after {
    clear: both;
    }
    #twz-menu {
    zoom:1;
    }
    #twz-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;
    }
    #twz-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;
    }
    #twz-menu li:hover > a {
    color: #fafafa;
    }
    *html #twz-menu li a:hover { /* IE6 only */
    color: #fafafa;
    }
    #twz-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;
    }
    #twz-menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
    }
    #twz-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);
    }
    #twz-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;
    }
    #twz-menu ul li:last-child {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    #twz-menu ul a {
    padding: 10px;
    width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    }
    #twz-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);
    }
    #twz-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;
    }
    #twz-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;
    }
    #twz-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;
    }
    #twz-menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec;
    }
    #twz-menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3;
    border-bottom-color: transparent;
    }
    #twz-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="twz-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 very straightforward to be altered. to alter links title merely replaced the bolded text together with your page titles and replace the hash sign (#) with various links.


    5. Click save and Done! :)

    I Hope this data that I shared was useful to you, if you liked the post, please share.



    If you've got any queries, you're most welcome to raise, simply leave a comment below and that i can surely answer your queries.

    No comments: