New Animated Advance Menus For blogger

New Animated Advance Menus For blogger

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQEYDzd57JehD_FUOmWzXELYbodXAxTeZaNvI5Lxf7vmnLOamP4wxMfCahb0vrmczHa-LIre3n9-upVFF_Qc3a7LcBlPP2DhT9Pe_0mf3r-NxTK8tHc79k87l2j59R2JoIf4yyrHau0PKB/s797/meusss.jpg
Original Designer : http://tympanus.net

in this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items
 LIVE DEMO 

  • Click on the layout in blogger Dashboard
  • Go to blogger–>Template—>Edit HTML 
  •  CTRL + F to find  ]]></b:skin> tag in your blogs HTML
  • Copy and paste below code just above it.
ul.sdt_menu{
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:1020px;
}
ul.sdt_menu a{
    text-decoration:none;
    outline:none;
}
ul.sdt_menu li{
    float:left;
    width:170px;
    height:85px;
    position:relative;
    cursor:pointer;
}
ul.sdt_menu li > a{
    position:absolute;
    top:0px;
    left:0px;
    width:170px;
    height:85px;
    z-index:12;
    background:transparent url(../images/overlay.png) no-repeat bottom right;
    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:25px;
    left:0px;
    width:170px;
    height:60px;
    z-index:15;
}
ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:85px;
    width:170px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
    margin-left:15px;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
    color:#fff;
    font-size:24px;
    float:left;
    clear:both;
}
ul.sdt_menu li span span.sdt_descr{
    color:#0B75AF;
    float:left;
    clear:both;
    width:155px; /*For dumbass IE7*/
    font-size:10px;
    letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:170px;
    overflow:hidden;
    height:170px;
    top:85px;
    left:0px;
    display:none;
    background:#000;
}
ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
    color:#fff;
}
Now search for </head> tag and paste the below code before it
<script>
$(function() {
    $('#sdt_menu > li').bind('mouseenter',function(){
        var $elem = $(this);
        $elem.find('img')
             .stop(true)
             .animate({
                'width':'170px',
                'height':'170px',
                'left':'0px'
             },400,'easeOutBack')
             .andSelf()
             .find('.sdt_wrap')
             .stop(true)
             .animate({'top':'140px'},500,'easeOutBack')
             .andSelf()
             .find('.sdt_active')
             .stop(true)
             .animate({'height':'170px'},300,function(){
            var $sub_menu = $elem.find('.sdt_box');
            if($sub_menu.length){
                var left = '170px';
                if($elem.parent().children().length == $elem.index()+1)
                    left = '-170px';
                $sub_menu.show().animate({'left':left},200);
            } 
        });
    }).bind('mouseleave',function(){
        var $elem = $(this);
        var $sub_menu = $elem.find('.sdt_box');
        if($sub_menu.length)
            $sub_menu.hide().css('left','0px');
        
        $elem.find('.sdt_active')
             .stop(true)
             .animate({'height':'0px'},300)
             .andSelf().find('img')
             .stop(true)
             .animate({
                'width':'0px',
                'height':'0px',
                'left':'85px'},400)
             .andSelf()
             .find('.sdt_wrap')
             .stop(true)
             .animate({'top':'25px'},500);
    });
});
    </script><script type="text/javascript" src="http://yourjavascript.com/38321111063/jquery-easing-1-3.js"></script>

  • Either paste this to layout's Add a Gadeget or put it in between body tag where you want to add .
<div id="buildnextweb-menus">
<ul id="sdt_menu" class="sdt_menu">
                <li>
                    <a href="#">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Phoddnq7IkTYe65nf3eHbjLsEpLcqO6ffwNAO2cskUVZ2Vk6nva6O0-y9hgkbqqIpjue6fcu95vTIFrCFsBIgS8stFPnIWQ-g-NgsOHDuZhLd-nJ_PmJCZrvZHTbHfiVkMoK3PQSbsa2/s1600/5.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">About me</span>
                            <span class="sdt_descr">Get to know me</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjt3bNFohlHuTXNQDjl5d2AH6yO-_buVQYQVnmqqivSPF6kQyZoeHwKGZPJuTDvY1eND2MRTI7pSgPL3-KW55Dtwlnu1DJpIBjoIIxQs20Scgn5_jaSn8b4xWsAwK7KU07sFgJhywiWPLK/s1600/3.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Portfolio</span>
                            <span class="sdt_descr">My work</span>
                        </span>
                    </a>
                    <div class="sdt_box">
                            <a href="#">Websites</a>
                            <a href="#">Illustrations</a>
                            <a href="#">Photography</a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjt3bNFohlHuTXNQDjl5d2AH6yO-_buVQYQVnmqqivSPF6kQyZoeHwKGZPJuTDvY1eND2MRTI7pSgPL3-KW55Dtwlnu1DJpIBjoIIxQs20Scgn5_jaSn8b4xWsAwK7KU07sFgJhywiWPLK/s1600/3.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Inspiration</span>
                            <span class="sdt_descr">Where ideas get born</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLoqGg-ljknYD460tN1ltW6i_qnAVc4Z7e373VfoTRBRlxMHsFreZO_nQiIpi9XilW62V9ZADuYH6oge8Hq-wL7i-1bBAbjMQnCcWjYruNLdBaPdOjkpi9Tre6FvAQKGVYWwhfBRN5jZyf/s1600/1.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Photos</span>
                            <span class="sdt_descr">I like to photograph</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLoqGg-ljknYD460tN1ltW6i_qnAVc4Z7e373VfoTRBRlxMHsFreZO_nQiIpi9XilW62V9ZADuYH6oge8Hq-wL7i-1bBAbjMQnCcWjYruNLdBaPdOjkpi9Tre6FvAQKGVYWwhfBRN5jZyf/s1600/1.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Blog</span>
                            <span class="sdt_descr">I write about design</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjt3bNFohlHuTXNQDjl5d2AH6yO-_buVQYQVnmqqivSPF6kQyZoeHwKGZPJuTDvY1eND2MRTI7pSgPL3-KW55Dtwlnu1DJpIBjoIIxQs20Scgn5_jaSn8b4xWsAwK7KU07sFgJhywiWPLK/s1600/3.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Projects</span>
                            <span class="sdt_descr">I like to code</span>
                        </span>
                    </a>
                    <div class="sdt_box">
                        <a href="#">Job Board Website</a>
                        <a href="#">Shopping Cart</a>
                        <a href="#">Interactive Maps</a>
                    </div>
                </li>
            </ul></div>

Change the HTML or CSS as per your Requriments.

Share this:

ABOUT THE AUTHOR

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible