点击时菜单的水平移动 [英] Horizontal shifting of Menus on click

问题描述

查看此链接点击我，您可以看到我有12个菜单项，但由于空间约束不能显示超过4个菜单。正如你可以看到目前只有Menu1到Menu4是可见的，其他Meus被隐藏。

更新：因为Jsfiddle做了一些清洁，他们删除了我的小提琴，

1. 向左移动-1（以后称为ML）


2. 向右移动+1（稍后将称为 ）

我想达到这个目的：

1. 点击 MR 将使菜单沿 +1 >
   
2. 点击 ML 将使菜单按 -1

HTML

  ; div id =outer> 
< input type =buttonvalue =move left by -1class =left/> 
< input type =buttonvalue =向右移动+1class =left/> 
< ul id =menulist> 
< li>菜单1< / li> 
< li>菜单2< / li> 
< li>菜单3< / li> 
< li>菜单4< / li> 
< li>菜单5< / li> 
< li>菜单6< / li> 
< li>菜单7< / li> 
< li>菜单8< / li> 
< li>菜单9< / li> 
< li>菜单10< / li> 
< li>菜单11< / li> 
< li>菜单12< / li> 
< / ul> 
  

strong>

  #outer {
 width：448px; 
 overflow：hidden; 
} 
 .left {
 float：left; 
} 
 ul，li {
 list-style：none; 
 marg：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; 
} 
  

任何有关此问题的帮助将非常感激。

解决方案

Jsfiddle

如上所述，如果这在IE中不起作用，请参阅将帮助你

HTML

 < div id =outer> 
< input type =buttonvalue =move left by -1class =left/> 
< input type =buttonvalue =向右移动+1class =right/> 
< ul id =menulist> 
< li>菜单1< / li> 
< li>菜单2< / li> 
< li>菜单3< / li> 
< li>菜单4< / li> 
< li>菜单5< / li> 
< li>菜单6< / li> 
< li>菜单7< / li> 
< li>菜单8< / li> 
< li>菜单9< / li> 
< li>菜单10< / li> 
< li>菜单11< / li> 
< li>菜单12< / li> 
< / ul> 
  

CSS

  #outer {
 width：448px; 
 overflow：hidden; 
} 
 .left {
 float：left; 
} 
 ul，li {
 list-style：none; 
 marg：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

  $（'左'）。点击（函数（）{
如果（parseInt函数（$（'＃菜单列表）。CSS（'缘左'），10） > = -784）{
 $（'＃菜单列表），动画（{
'marginLeft： -  = 112px//向左移动
}）; 
 } 
}）; 
 $（'的权利。）点击（函数（）{
如果（parseInt函数（$（'＃菜单列表），CSS（'缘左'），10）方式> = 0） {
 $（'＃菜单列表），CSS（'缘左'，'0像素重要！'）; 
}其他{
 $（'＃菜单列表），动画（{。 
'marginLeft'：+ = 112px// move right 
}）; 
} 
}）; 
  

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:

1. Move Left by -1 (later will be referred as 'ML')
2. Move Right by +1 (later will be referred as 'MR')

I am trying to achieve this:

1. Click on MRwill make menus shift along +1
2. Click on MLwill make menus shift along -1

HTML

<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>

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;
}

Any help regarding this will be highly appreciated.

解决方案

Jsfiddle

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
        });
    }
});

这篇关于点击时菜单的水平移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！