horizontal sliding menu
horizontal sliding menu
Hello,
it's my first post here, so i say hello to all of you!
I'm from Austria, so my english is maybe not that good.
I have a problem with a horizontal sliding menu.
The java code works fine but i need to adjust the distances between the menu links.
But i don't know how! I tested the code with paddingRight, but then nothing works anymore.
I took the code from a tutorial for a vertical sliding menu and changed it to work horizontal.
Maybe someone can help me.
JQuery:
-
jQuery(function () {
// Stack initialize
var openspeed = 300;
var closespeed = 300;
jQuery('.stack>img').toggle(function(){
var horizontal = 40;
var $el=jQuery(this);
$el.next().children().each(function(){
jQuery(this).animate({right: '-' + horizontal + 'px'}, openspeed);
horizontal = horizontal + 95;
});
$el.next().animate({right: '0px'}, openspeed).addClass('openStack');
}, function(){
//reverse above
var $el=jQuery(this);
$el.next().removeClass('openStack').children('li').animate({right: '0px'}, closespeed);
});
});
CSS:
-
.stack { position: absolute; margin-top: 120px; margin-left: 160px;}
.stack > img { position: relative; cursor: pointer; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack li a {
width:80px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 14px;
position:absolute;
top: 17px;
line-height: 14px;
color: #000;
text-align: center;
text-decoration: none;
background-color: white;
padding: 3px 0;
}
/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }