Header Ads

  • Breaking News

    How To Add Animated CSS3 Drop Down Menu In Blogger



    Adding beautiful drop down menu helps to increase the beauty of your blog. By adding the drop down menu your readers or visitors can easily navigate through your blog.
    This amazing Drop down menu is created by Catalin Rosu with spectacular JQuery effects! I'll give you customized version which works flawlessly with blogger. It is compatible with all major browsers like FireFox, Chrome and Safari

      LIVE DEMO


    Step 1. Log in to your blogger dashboard.
    Step 2. Select your blog.
    Step 3. Select Template option and click on Edit HTML option.
    Step 4. In the template code find ]]></skin>
    Step 5. Just above it paste following code and save the template.


    #mmenu, #mmenu ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #mmenu {
            width: 900px;
            margin: 10px 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, 0 1px 0 #666 inset;
            -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
            box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        }
        #mmenu:before,
        #mmenu:after {
            content: "";
            display: table;
        }
        #mmenu:after {
            clear: both;
        }
        #mmenu {
            zoom:1;
        }
        #mmenu 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;
        }
        #mmenu 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;
        }
        #mmenu li:hover > a {
            color: #fafafa;
        }
        *html #mmenu li a:hover { /* IE6 only */
            color: #fafafa;
        }
        #mmenu 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-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
            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; 
        }
        #mmenu li:hover > ul {
            opacity: 1;
            visibility: visible;
            margin: 0;
        }
        #mmenu 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);       
        }
        #mmenu 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;
        }
        #mmenu ul li:last-child {  
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;   
        }
        #mmenu ul a {   
            padding: 10px;
            width: 130px;
            _height: 10px; /*IE6 only*/
            display: block;
            white-space: nowrap;
            float: none;
            text-transform: none;
        }
        #mmenu 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);
        }
        #mmenu 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;
        }
        #mmenu 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;
        }
        #mmenu 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;
        }
        #mmenu ul li:first-child a:hover:after {
            border-bottom-color: #04acec;
        }
        #mmenu ul ul li:first-child a:hover:after {
            border-right-color: #0299d3;
            border-bottom-color: transparent;    
        }
        #mmenu 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;
        }
    
    


    Step 6.  Layout  Add A Gadget  HTML/Java Script and paste next code



    <div id="mmenu">
            <li><a href="#">Home</a></li>
            <li>
                    <a href="#">Categories</a>
                    <ul>
                            <li><a href="#">Graphic</a></li>
                            <li><a href="#">Html Editor</a></li>
                            <li><a href="#">Meta Tag</a></li>
                            <li><a href="#">Web design</a></li>
                    </ul>
            </li>
            <li><a href="#">Color Code</a></li>
            <li><a href="#">About</a></li>
            <li><a href="http://mix--er.blogspot.com/2015/03/how-to-add-animated-css3-drop-down-menu.html">Contact</a></li>

    </div>


    Step 7. replace # with your  links and other with your Page Title.




    No comments

    Post Top Ad

    Post Bottom Ad