Slidedown Box For Blogger

<< Preview >>

View Demo on our Lab

<< Feature >>

On Mouse Over Menu Slides Down
An Image pops up
A list of Sub menu slides from left

<< Code >>

CSS Code :-

        <style>
ul.sdt_menu{
 margin:0;
 padding:0;
 list-style: none;
 font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 font-size:12px;
 width:680px;
}
ul.sdt_menu a{
 text-decoration:none;
 outline:none;
}
ul.sdt_menu li{

background-color: #000000;
 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: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:14px;
 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:12px;
 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;
 color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
 margin-top:20px;
}
ul.sdt_menu li div.sdt_box a:hover{
 color:#fff;
}
</style>

Javascript/JQuery :-

        <!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://tympanus.net/Tutorials/HoverSlideEffect/js/jquery.easing.1.3.js"></script>

        <script type="text/javascript" src="http://tympanus.net/Tutorials/HoverSlideEffect/js/jquery.tipsy.js"></script>


        <script type="text/javascript">
            $(function () {
                /**
                * for each menu element, on mouseenter, 
                * we enlarge the image, and show both sdt_active span and 
                * sdt_wrap span. If the element has a sub menu (sdt_box),
                * then we slide it - if the element is the last one in the menu
                * we slide it to the left, otherwise to the right
                */
                $('#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);
                });
                $('#relatedPosts').toggle(
     function () {
         $('#rp_list').animate({ 'bottom': '10px' }, 500);
     },
     function () {
         $('#rp_list').animate({ 'bottom': '-50px' }, 500);
     }
    );
                $('#rp_list a').tipsy({ gravity: 's' });
            });
        </script>

HTML :-

        <div>
   
   <ul id="sdt_menu" class="sdt_menu">
<li>
     <a href="http://dibyendu-home.blogspot.com">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuG-3cxQYpG-E7m-Ui5Ts_83rBuf-aJQWO5tw7jhyphenhyphenqjB-rew1SKUZBArv1-vbMOe5fRB5e2T6rW8S5oCxEZvyQ9MirRYjSiIvGqtoNBOBjpRnjecTSHqkG1GWw-GLDy4LFrw10yNCEHcT6/s1600/DH.jpg" alt="" style="width: 0px; height: 0px; left: 85px; display: block; ">
      <span class="sdt_active" style="height: 0px; display: block; "></span>
      <span class="sdt_wrap" style="top: 25px; ">
       <span class="sdt_link">Home</span>
       <span class="sdt_descr">Go to Home Page</span>
      </span>
     </a>
    </li>
<li>
     <a href="http://dibyendu-home.blogspot.in/2012/02/earn-money-online-secrets.html">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QI9RHPfmFbfXswFWo-IZMJe_prtLYldOci9hoSCwYUlFObwHcLnPAwBlKF0eH13OMjQ91LVGKpj4yYABVxV1rLpdGh8HRUuodQrguo8Ma2pNo7G682tf5qLeIScGw0qonUKYTcCrZ4QO/s1600/EarnMoney.jpg" alt="" style="width: 0px; height: 0px; left: 85px; overflow-x: hidden; overflow-y: hidden; display: block; ">
      <span class="sdt_active" style="height: 0px; overflow-x: hidden; overflow-y: hidden; display: block; "></span>
      <span class="sdt_wrap" style="top: 25px; ">
       <span class="sdt_link">Earn Money Online</span>
       <span class="sdt_descr">View Secrets and Tips</span>
      </span>
     </a>
     <div class="sdt_box" style="display: none; left: 0px; ">
       <a href="http://dibyendu-home.blogspot.in/2012/02/earn-money-online-secrets.html">Earn Money From PTC Sites</a>
       <a href="http://dibyendu-home.blogspot.in/p/earn-500-with-only-one-mouse-click.html">Earn $5 with One Mouse Click</a>
       
     </div>
</li>
<li>
     <a href="http://dibyendu-home.blogspot.in/p/free-cool-desktop-tools.html">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ9aM-vWFnekTTBg9du5BynyRXsjucy495ly-HGn4DBlgszXpvDjnE7R_y8mKKNOoRTbTpaPdhy9AZgXJ48XJZgwqfiftUNuajMzndisnL95cWZEzW3hiJrkCxCEW4npkYooztSvYPI8V7/s1600/DesktopSoftwares.jpg" alt="" style="width: 0px; height: 0px; left: 85px; overflow-x: hidden; overflow-y: hidden; display: block; ">
      <span class="sdt_active" style="height: 0px; overflow-x: hidden; overflow-y: hidden; display: block; "></span>
      <span class="sdt_wrap" style="top: 25px; ">
       <span class="sdt_link">Desktop Softwares</span>
       <span class="sdt_descr">
Free Download</span>
      </span>
     </a>
     <div class="sdt_box" style="display: none; left: 0px; ">
       <a href='http://dibyendu-home.blogspot.in/2012/03/winstep-nexus.html'>Winstep Nexus</a>
<a href='http://dibyendu-home.blogspot.in/2012/03/winstep-xtreme.html'>Winstep Xtreme</a>
<a href='http://dibyendu-home.blogspot.in/2012/03/vienna-sidebar.html'>Vienna Sidebar</a>
<a href='http://dibyendu-home.blogspot.in/2012/03/circle-dock-is-best-dock-ever.html'>Circle Dock</a>
<a href='http://dibyendu-home.blogspot.in/2012/03/start-menu-7-pro.html'>Start Menu 7 Pro</a>
<a href='http://dibyendu-home.blogspot.in/2012/03/vienna-dock.html'>Vienna Dock</a>
<a href='http://dibyendu-home.blogspot.in/2012/03/virtual-girl-hd.html'>Virtual Girl HD</a>
       
     </div>
</li>
<li>
     <a href="http://dibyendu-home.blogspot.in/2012/05/beautiful-slideout-navigation-for.html">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0F8MSJTttYNaQNJGzPwOqotih8hIqYOr-iNnEZrGq1C1xxXnsSpBrHXA_OR8J_aREY-LU5gGkRV01_X3q_ivkhs9yhTI3GTQJgIvJIFLj1WCeIqx_zkewrNURXu0tFinSsBb5l6cwapnA/s1600/CSS.jpg" alt="" style="width: 0px; height: 0px; left: 85px; overflow-x: hidden; overflow-y: hidden; display: block; ">
      <span class="sdt_active" style="height: 0px; overflow-x: hidden; overflow-y: hidden; display: block; "></span>
      <span class="sdt_wrap" style="top: 25px; ">
       <span class="sdt_link">Slideout Menu</span>
       <span class="sdt_descr">CSS, JQuery and HTML</span>
      </span>
     </a>
    </li>
</ul>
</div>

<< Full HTML Code >>

        <html><head>
        <title>Slide Down Box Menu with jQuery and CSS3</title>
        
        
        <style>
ul.sdt_menu{
 margin:0;
 padding:0;
 list-style: none;
 font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 font-size:12px;
 width:680px;
}
ul.sdt_menu a{
 text-decoration:none;
 outline:none;
}
ul.sdt_menu li{

background-color: #000000;
 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: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:14px;
 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:12px;
 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;
 color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
 margin-top:20px;
}
ul.sdt_menu li div.sdt_box a:hover{
 color:#fff;
}
</style>

        
<style>
ul.sdt_menu{
    margin-top:150px;
   }

</style>
    </head>

    <body>
  <div>
   
   <ul id="sdt_menu" class="sdt_menu">
<li>
     <a href="http://dibyendu-home.blogspot.com">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuG-3cxQYpG-E7m-Ui5Ts_83rBuf-aJQWO5tw7jhyphenhyphenqjB-rew1SKUZBArv1-vbMOe5fRB5e2T6rW8S5oCxEZvyQ9MirRYjSiIvGqtoNBOBjpRnjecTSHqkG1GWw-GLDy4LFrw10yNCEHcT6/s1600/DH.jpg" alt="" style="width: 0px; height: 0px; left: 85px; display: block; "/>
      <span class="sdt_active" style="height: 0px; display: block; "></span>
      <span class="sdt_wrap" style="top: 25px; ">
       <span class="sdt_link">Home</span>
       <span class="sdt_descr">Go to Home Page</span>
      </span>
     </a>
    </li>
<li>
     <a href="http://dibyendu-home.blogspot.in/2012/02/earn-money-online-secrets.html">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QI9RHPfmFbfXswFWo-IZMJe_prtLYldOci9hoSCwYUlFObwHcLnPAwBlKF0eH13OMjQ91LVGKpj4yYABVxV1rLpdGh8HRUuodQrguo8Ma2pNo7G682tf5qLeIScGw0qonUKYTcCrZ4QO/s1600/EarnMoney.jpg" alt="" style="width: 0px; height: 0px; left: 85px; overflow-x: hidden; overflow-y: hidden; display: block; "/>
      <span class="sdt_active" style="height: 0px; overflow-x: hidden; overflow-y: hidden; display: block; "></span>
      <span class="sdt_wrap" style="top: 25px; ">
       <span class="sdt_link">Earn Money Online</span>
       <span class="sdt_descr">View Secrets and Tips</span>
      </span>
     </a>
     <div class="sdt_box" style="display: none; left: 0px; ">
       <a href="http://dibyendu-home.blogspot.in/2012/02/earn-money-online-secrets.html">Earn Money From PTC Sites</a>
       <a href="http://dibyendu-home.blogspot.in/p/earn-500-with-only-one-mouse-click.html">Earn $5 with One Mouse Click</a>
       
     </div>
</li>
<li>
     <a href="http://dibyendu-home.blogspot.in/p/free-cool-desktop-tools.html">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ9aM-vWFnekTTBg9du5BynyRXsjucy495ly-HGn4DBlgszXpvDjnE7R_y8mKKNOoRTbTpaPdhy9AZgXJ48XJZgwqfiftUNuajMzndisnL95cWZEzW3hiJrkCxCEW4npkYooztSvYPI8V7/s1600/DesktopSoftwares.jpg" alt="" style="width: 0px; height: 0px; left: 85px; overflow-x: hidden; overflow-y: hidden; display: block; "/>
      <span class="sdt_active" style="height: 0px; overflow-x: hidden; overflow-y: hidden; display: block; "></span>
      <span class="sdt_wrap" style="top: 25px; ">
       <span class="sdt_link">Desktop Softwares</span>
       <span class="sdt_descr">
Free Download</span>
      </span>
     </a>
     <div class="sdt_box" style="display: none; left: 0px; ">
       <a href='http://dibyendu-home.blogspot.in/2012/03/winstep-nexus.html'>Winstep Nexus</a>
<a href='http://dibyendu-home.blogspot.in/2012/03/winstep-xtreme.html'>Winstep Xtreme</a>
<a href='http://dibyendu-home.blogspot.in/2012/03/vienna-sidebar.html'>Vienna Sidebar</a>
<a href='http://dibyendu-home.blogspot.in/2012/03/circle-dock-is-best-dock-ever.html'>Circle Dock</a>
<a href='http://dibyendu-home.blogspot.in/2012/03/start-menu-7-pro.html'>Start Menu 7 Pro</a>
<a href='http://dibyendu-home.blogspot.in/2012/03/vienna-dock.html'>Vienna Dock</a>
<a href='http://dibyendu-home.blogspot.in/2012/03/virtual-girl-hd.html'>Virtual Girl HD</a>
       
     </div>
</li>
<li>
     <a href="http://dibyendu-home.blogspot.in/2012/05/beautiful-slideout-navigation-for.html">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0F8MSJTttYNaQNJGzPwOqotih8hIqYOr-iNnEZrGq1C1xxXnsSpBrHXA_OR8J_aREY-LU5gGkRV01_X3q_ivkhs9yhTI3GTQJgIvJIFLj1WCeIqx_zkewrNURXu0tFinSsBb5l6cwapnA/s1600/CSS.jpg" alt="" style="width: 0px; height: 0px; left: 85px; overflow-x: hidden; overflow-y: hidden; display: block; "/>
      <span class="sdt_active" style="height: 0px; overflow-x: hidden; overflow-y: hidden; display: block; "></span>
      <span class="sdt_wrap" style="top: 25px; ">
       <span class="sdt_link">Slideout Menu</span>
       <span class="sdt_descr">CSS, JQuery and HTML</span>
      </span>
     </a>
    </li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://tympanus.net/Tutorials/HoverSlideEffect/js/jquery.easing.1.3.js"></script>

        <script type="text/javascript" src="http://tympanus.net/Tutorials/HoverSlideEffect/js/jquery.tipsy.js"></script>


        <script type="text/javascript">
            $(function () {
                /**
                * for each menu element, on mouseenter, 
                * we enlarge the image, and show both sdt_active span and 
                * sdt_wrap span. If the element has a sub menu (sdt_box),
                * then we slide it - if the element is the last one in the menu
                * we slide it to the left, otherwise to the right
                */
                $('#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);
                });
                $('#relatedPosts').toggle(
     function () {
         $('#rp_list').animate({ 'bottom': '10px' }, 500);
     },
     function () {
         $('#rp_list').animate({ 'bottom': '-50px' }, 500);
     }
    );
                $('#rp_list a').tipsy({ gravity: 's' });
            });
        </script>
 
    
</body></html>

<< How to Add this >>

Step 1:- Open Dashboard and Click on "Template"

Step 2:- Click on "Edit HTML"

Step 3:- Click on "Proceed"

Step 4:- Press CTRL + F and type body

Step 5:- Paste The Javascript/JQuery from above just before the body Tag
Step 6:- Click on "Save Template"
Step 7:- Add HTML code from above in your body Tag where you want this menu to appear and Click on "Save Template"

Step 8:- After Saving Template, Click on "Close"
Step 9:- Now, Click on "Layout"
Step 10:- Click on "Add a Gadget"
Step 11:- Add "HTML/Javascript" Gadget to your Blog
Step 12:- Copy and Paste the above CSS in Content Area
Step 13:- Click on "Save" and You're Done.

<< Thanks >>

To,
Mary Lou
For Jquery and CSS Tutorial

<< Confused? >>

Feel free to ask. We will be happy to help you.
Share this if you like our post.

Spice up My Windows Desktop

Follow Us

Share This

Email Signup

Recommend Us

Slidedown Box For Blogger

THIS WEEK'S TRENDING POSTS

RECENT POSTS

Popular Posts

DESKTOP SOFTWARES