Reputation: 1068
I want to add a menu to my application screens. The menu will have the menu icons which are horizontal scroll-able one menu at a time when left or right arrow pressed. Based on the menu screen the menu should be scrolled to that menu icon for that menu screen.
Ex.:
< menu1 | menu2 | menu3 >
Say there are 6 menu icons and 3 are visible at a time. on press of right arrow, it should scroll one item at a time.
and if my screen is related to menu 4, the menu4 has to be positioned.
< menu4 | menu5 | menu6 >
And also each menu item should be clickable.
Please let me know, How I can achieve this.
Update Have js for MouseOver
<script type="text/javascript">
$(function () {
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
ulPadding = 15;
var divWidth = div.width();
div.css({ overflow: 'hidden' });
var lastLi = ul.find('li:last-child');
div.mousemove(function (e) {
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
div.scrollLeft(left);
});
});
</script>
JSFiddle
Update3
Update 4
This is dynamic menu retreived from db build with ul & li's. If there is more Li than screen width, I simply want an arrow to left & right side to scroll extra li's, if any.
Upvotes: 9
Views: 13314
Reputation: 9516
Good article about horizontal scrollable menu here
And DEMO (Note: Reduce the size of the browser)
Upvotes: 1
Reputation: 128
hop this should be help you see link
http://jquery.malsup.com/cycle/int2.html
see Non-Image Content at the last of page
see this fiddle: http://fiddle.jshell.net/vac9x/1/
Upvotes: 0
Reputation: 6787
See this fiddle:
$(document).ready(function () {
$('.right').click(function () {
var position = $('.container').position();
var r=position.left-$(window).width()
$('.container').animate({
'left': ''+r+'px'
});
});
$('.left').click(function () {
var position = $('.container').position();
var l=position.left+$(window).width()
if(l<=0)
{
$('.container').animate({
'left': ''+l+'px'
});
}
});
});
Upvotes: 4