• Add Simple CSS3-Multilevel Menubar In Blogger Blogspot


    This is a multilevel menubar created with css3 and one gradient image . In My previous article we saw how to add css 3 gradients instead of images .you can use that here also using css3 gradients will make your site to load quicker.

    This is how the menubar looks like.






    Step 1: Goto >> Design >> Page elements >> html/javascript and paste this code given below


    <style>
    #nav1 {
     margin: 0;
     padding: 7px 6px 0;
     background: #7d7d7d url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/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);
    }
    #nav1 li {
     margin: 0 5px;
     padding: 0 0 8px;
     float: left;
     position: relative;
     list-style: none;
    }


    /* main level link */
    #nav1 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);
    }
    #nav1 a:hover {
     background: #000;
     color: #fff;
    }

    /* main level link hover */
    #nav1 .current a, #nav1 li:hover > a {
     background: #666 url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/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);
    }

    /* sub levels link hover */
    #nav1 ul li:hover a, #nav li:hover li a {
     background: none;
     border: none;
     color: #666;

     -webkit-box-shadow: none;
     -moz-box-shadow: none;
    }
    #nav1 ul a:hover {
     background: #0078ff url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png) repeat-x 0 -100px !important;
     color: #fff !important;

     -webkit-border-radius: 0;
     -moz-border-radius: 0;

     text-shadow: 0 1px 1px rgba(0,0,0, .1);
    }

    /* dropdown */
    #nav1 li:hover > ul {
     display: block;
    }

    /* level 2 list */
    #nav1 ul {
     display: none;

     margin: 0;
     padding: 0;
     width: 185px;
     position: absolute;
     top: 35px;
     left: 0;
     background: #ddd url(http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/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);
    }
    #nav1 ul li {
     float: none;
     margin: 0;
     padding: 0;
    }

    #nav1 ul a {
     font-weight: normal;
     text-shadow: 0 1px 0 #fff;
    }

    /* level 3+ list */
    #nav1 ul ul {
     left: 181px;
     top: -3px;
    }

    /* rounded corners of first and last link */
    #nav1 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;
    }
    #nav1 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;
    }

    /* clearfix */
    #nav1:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
    }
    #nav1 {
     display: inline-block;
    }
    </style>
    <ul id="nav1">
    <li class="current"><a href="/">Home</a></li>
    <li><a href="3">level1</a>
    <ul>
    <li><a href="#">sub level</a>
    <ul>
    <li><a href="#">sub level</a></li>
    <li><a href="#">sub level</a></li>
    <li><a href="#">sub level</a></li>
    <li><a href="#">sub level</a></li>
    </ul>
    </li>
    <li><a href="#">sub level</a>
    <ul>
    <li><a href="#">sub level</a></li>
    </ul>
    </li>
    <li><a href="#">sub level</a></li>
    <li><a href="#">sub level</a></li>
    </ul>
    </li>
    <li><a href="#">Multi-Levels</a>
    <ul>
    <li><a href="#">Team</a>
    <ul>
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a>
    <ul>
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a></li>
    </ul>
    </li>
    <li><a href="#">Sub-Level Item</a></li>
    </ul>
    </li>
    <li><a href="#">sub level</a></li>
    <li><a href="#">sub level</a></li>
    <li><a href="#">sub level</a>
    <ul>
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">level</a></li>
    <li><a href="#">level</a></li>
    </ul>

    Save It.
    Its easy.Try it Back.

    0 comments:

    Post a Comment