Check this link Click Me , as you can see I have 12 Menu items, but due to space constraint can't show more than 4 menus. As you can see currently only Menu1 to Menu4 is visible, other Meus are hidden.
Update: As Jsfiddle did some cleaning they deleted my fiddle, here above I posted answered fiddle.In my question one jquery part was not there.
I have two button:
I am trying to achieve this:
MR
will make menus shift along +1
ML
will make menus shift along -1
<div id="outer"> <input type="button" value="move left by -1" class="left" /> <input type="button" value="Move Right by +1" class="left" /> <ul id="menulist"> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> <li>Menu 4</li> <li>Menu 5</li> <li>Menu 6</li> <li>Menu 7</li> <li>Menu 8</li> <li>Menu 9</li> <li>Menu 10</li> <li>Menu 11</li> <li>Menu 12</li> </ul>
#outer { width:448px; overflow:hidden; } .left { float:left; } ul, li { list-style:none; margin:0; padding:0; overflow:hidden; } ul { font-size:0; float:left; width:1400px; } li { display:inline-block; padding:5px; background:lightgrey; border:darkgrey; width:100px; overflow:hidden; text-align:center; font-size:14px; border:1px solid black; }
Any help regarding this will be highly appreciated.
Problem courtesy of: ankitd
As mentioned in the comments above, if this does not work in IE, see if this stack overflow question will help you
HTML
<div id="outer"> <input type="button" value="move left by -1" class="left" /> <input type="button" value="Move Right by +1" class="right" /> <ul id="menulist"> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> <li>Menu 4</li> <li>Menu 5</li> <li>Menu 6</li> <li>Menu 7</li> <li>Menu 8</li> <li>Menu 9</li> <li>Menu 10</li> <li>Menu 11</li> <li>Menu 12</li> </ul>
CSS
#outer { width:448px; overflow:hidden; } .left { float:left; } ul, li { list-style:none; margin:0; padding:0; overflow:hidden; } ul { font-size:0; float:left; width:1400px; } li { display:inline-block; padding:5px; background:lightgrey; border:darkgrey; width:100px; overflow:hidden; text-align:center; font-size:14px; border:1px solid black; }
JS
$('.left').click(function () { if (parseInt($('#menulist').css('margin-left'), 10) >= -784) { $('#menulist').animate({ 'marginLeft': "-=112px" //moves left }); } }); $('.right').click(function () { if (parseInt($('#menulist').css('margin-left'), 10) >= 0) { $('#menulist').css('margin-left', '0px!important'); } else { $('#menulist').animate({ 'marginLeft': "+=112px" //moves right }); } });
Solution courtesy of: ctwheels
double li { border:darkgrey; border:1px solid black; }
html
<input type="button" value="move left by -1" class="left" /> <input type="button" value="Move Right by +1" class="right" />
jquery
$('.left').click(function() { if($('#menulist').css('margin-left')=='-896px'){ $('#menulist').css('margin-left','-896px!important'); } else{ $('#menulist').animate({ 'marginLeft' : "-=112px" //moves left }); } }); $('.right').click(function() { if($('#menulist').css('margin-left')=='0px'){ $('#menulist').css('margin-left','0px!important'); } else{ $('#menulist').animate({ 'marginLeft' : "+=112px" //moves right }); } });
Discussion courtesy of: avril alejandro
This recipe can be found in it's original form on Stack Over Flow .
我来评几句
登录后评论已发表评论数()