How to Make Vertical Sliding Menu

How to Make Vertical Sliding Menu | https://tipsandtricksfor.blogspot.com/2011/02/how-to-make-vertical-sliding-menu.html

Previously, I've posted about How To Make Vertical Navigations Menu With CSS, now I will post about how to make vertical sliding menu. The effect of vertical sliding menu is while we put the cursor over the link in the menu, the link will move to the right. Nice right? To make vertical sliding menu, you just need easy steps. Follow the easy steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function()
{
slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";

// initiates the timer used for the sliding animation
var timer = 0;

// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});

// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}

//]]>
</script>

4. Then, save it
5. For the links, you can add into Page Elements --> Add Gadget, or everywhere.

<ul id="sliding-navigation">

<li class="sliding-element"><a rel="nofollow" href="#">Link 1</a></li>

<li class="sliding-element"><a rel="nofollow" href="#">Link 2</a></li>

<li class="sliding-element"><a rel="nofollow" href="#">Link 3</a></li>

<li class="sliding-element"><a rel="nofollow" href="#">Link 4</a></li>

<li class="sliding-element"><a rel="nofollow" href="#">Link 5</a></li>

</ul>

=> The anchor text URL
=> The anchor text name

OK, that's all, friends...

Loading Related Posts