水平菜单滚动 [英] Horizontal Menu Scrolling

问题描述

我有从Menu1到Menu10的菜单项，但由于网页中的空间限制，我无法显示所有MenuItem。我可以显示4个菜单项，通过单击菜单项末尾的向左和向右箭头可以访问所有菜单项。目前我正在向Menu7显示Menu4。

I have Menu item from Menu1 to Menu10, but due to space constraint in web page I can't show all the MenuItem. I can show 4 menu item, rest all will be accessible by clicking left and right arrow at the end of menu item. Currently I am showing Menu4 to Menu7.

即< - [Menu4] [Menu5] [Menu6] [Menu7] - >

i.e <- [Menu4][Menu5][Menu6][Menu7] ->

因此，当我点击向左/向右箭头时，菜单项将水平滚动。
我尝试在网上搜索，但没有得到任何解决方案。
这是我到现在为止所做的事情

So when I click on Left/Right arrow, Menu items will scroll horizontally. I tried searching on net, but didn't got any solution. here is what I did till now

link

HTML代码

<ul>
<li>
    <a href="#">Menu1</a>
</li>
<li>
    <a href="#">Menu2</a>
</li>
<li>
    <a href="#">Menu3</a>
</li> 
<li>
    <a href="#">Menu4</a>
</li>
<li>
    <a href="#">Menu5</a>
</li>
<li>
    <a href="#">Menu6</a>
</li>
<li>
    <a href="#">Menu7</a>
</li>
<li>
    <a href="#">Menu8</a>
</li> 
<li>
    <a href="#">Menu9</a>
</li>
<li>
    <a href="#">Menu10</a>
</li>

注意：我使用的是bootstrap此外，任何bootstrap帮助表示赞赏

Note: I am using bootstrap also,any bootstrap help is appreciated

推荐答案

快速方法是使用jquery插件，即使你这样做也很容易使用不太了解html和css。

您可以在这里找到一个使用示例。

A quick way is to use a jquery plugin, very easy to use even if you do not know very well html and css.
You can find a use example here.

我希望它可以帮到你。

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