我网站中的水平菜单不在页面中（导致水平滚动条看起来非常糟糕）。
我有一个动态菜单，如果项目数量（菜单中的选项）增加，它会跨越边界＆amp;出去了。我想使用jQuery，如果项目数量增加，将显示图标（左和右箭头）。点击这些图标 - 菜单应向左滚动＆amp;对。
HTML：
<div class="wrapperClass">
<div id="mainContainerClass">
<!-- Horizontal Menu Starts Here -->
<div id="menuContainer">
<ol id="menuList">
<li><div id="popupmenu"><a href="page1.html" ><span>Menu Item 1</span></a></div> </li>
<li><div id="popupmenu"><a href="page2.html" ><span>Menu Item 2</span></a></div> </li>
<li><div id="popupmenu"><a href="page3.html" ><span>Menu Item 3</span></a></div> </li>
<li><div id="popupmenu"><a href="page4.html" ><span>Menu Item 4</span></a></div> </li>
<li><div id="popupmenu"><a href="page5.html" ><span>Menu Item 5</span></a></div> </li>
<li><div id="popupmenu"><a href="page6.html" ><span>Menu Item 6</span></a></div> </li>
<li><div id="popupmenu"><a href="page7.html" ><span>Menu Item 7</span></a></div> </li>
<li><div id="popupmenu"><a href="page8.html" ><span>Menu Item 8</span></a></div> </li>
<li><div id="popupmenu"><a href="page9.html" ><span>Menu Item 9</span></a></div> </li>
</ol>
</div>
</div>
CSS：
.wrapperClass { width:1000px; margin: 0px auto; padding:0px;}
div#mainContainerClass { margin:0px auto; width:990px;}
div#menuContainer {background:url(/menu_bg.png) repeat-x; height:38px; margin:0px auto; clear:both;}
ol#menuList {list-style: none; margin: 0; padding: 0; font-weight:bold; font-size:12px; color:#EFF4F5; padding:11px 0 0 0px; margin:0 0 0 13px; }
ol#menuList a { background: url(/tabs.png); display: block;height:26px; padding: 0 0 0 10px; text-decoration: none; text-align:center; color:#EFF4F5;}
ol#menuList a:hover { background-position: 0 -52px;}
ol#menuList a:hover span { background-position: 100% -52px;}
ol#menuList li { float: left; margin: 0 1px 0 0;}
ol#menuList li.current a { background-position: 0 -26px; color: #fff; font-weight: bold; height:26px; color:#000;}
ol#menuList li.current span { background-position: 100% -26px;}
ol#menuList span { background: url(/tabs.png) 100% 0; display: block; line-height: 2.2em; padding-right: 10px;}
#popupmenu div{ position: absolute; visibility: hidden; min-width:100px; margin: 0; padding: 0; background: #0e3d95; border: 1px solid #0e3d95;}
#popupmenu div a { position: relative; display: block; margin: 0px auto; padding: 5px 10px; width: auto; height:16px; white-space: nowrap; text-align:left; font-weight:bold; text-decoration: none; background: #EAEBD8; color: #154aa4; font-size:11px;
background:url(/bg_popupmenu.png) repeat-x top left; }
#popupmenu div a:hover { background: #11439d; color: #FFF;}
第二个例子：
<div id="secondMenue" >
<a href="page1a.html" class="othermenu">Sec Item 1</a> |
<a href="page1b.html" class="active">Sec Item 2</a> |
<a href="page1c.html" class="othermenu">Sec Item 3</a> |
<a href="page1d.html" class="othermenu"> Sec Item 4</a> |
<a href="page1e.html" class="othermenu">Sec Item 5</a>
</div>
#secondMenue{background:url(/othermenu.png) repeat-x top center; width:975px;height:36px; margin:0px auto;font-size:11px;color:#004990; padding:10px 10px 0 5px; text-decoration:none}
a.othermenu:link{font-size:12px;color:#004990;
padding:0 10px 0 10px;text-decoration:none;font-weight:normal;}
a.othermenu:visited{font-size:12px;color:#004990;padding:0 10px 0 10px;text-decoration:none;}
a.othermenu:hover{font-size:12px; font-weight:normal;color:#000;padding:0 10px 0 10px;text-decoration:none;}
a.othermenu:active {font-size:12px;color:#004990;padding:0 10px 0 10px;font-weight:bold;text-decoration:none;}
我有以下布局，我需要应用轮播。请你看看。 我不能改变这个，因为菜单布局是这样呈现的
'<div>
<table>
<tr>
<td><table><tr><td><a href="#"><span>Menu Option 1</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 2</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 3</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 4</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 5</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 6</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 7</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 8</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 9</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 10</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 11</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 12</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 13</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 14</span></a></td></tr></table></td>
<td><table><tr><td><a href="#"><span>Menu Option 15</span></a></td></tr></table></td>
</tr>
</table>
</div>'
答案 0 :(得分：1)
您需要提交代码..无论如何，您可能需要使用
overflow:hidden
所以你没有滚动条
根据我的理解，这是一个完整的JS fiddle example，你的想法是the code page
我做了两个CSS案例，用于在jQuery windows.resize（）
之间切换菜单body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.menu {width:100%; overflow:auto;list-style: none; height:32px; white-space:nowrap}
.menu li {height:32px; background:#eee; margin-left:5px; padding:5px; float:left }
.menu.text li {width:200px;}
.menu.icons li {width:32px; background:#ffcc00}
.menu.icons li a{text-indent: -9999px; display:inline-block}
@media (min-width: 768px) {
.container {
width: auto;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
$(function () {
var win = $(window);
win.bind(
'resize',
function () {
setMenu();
}
).trigger('resize');
});
function setMenu() {
var _menu = $('#menu').width();
var _width = (Math.floor(_menu));
if (_width < 1025) {
$('#menu').removeClass("text").addClass("icons");
} else {
$('#menu').removeClass("icons").addClass("text");
}
}
<div class="container">
<ul id="menu" class="menu text">
<li class="nav">
<a class="navtab" href="#">Item one</a>
</li>
<li class="nav">
<a class="navtab" href="#">Item two</a>
</li>
<li class="nav">
<a class="navtab" href="#">Item three</a>
</li>
<li class="nav">
<a class="navtab" href="#">Item four</a>
</li>
<li class="nav">
<a class="navtab" href="#">Item five</a>
</li>
<li class="nav">
<a class="navtab" href="#">Item six</a>
</li>
<li class="nav">
<a class="navtab" href="#">Item seven</a>
</li>
<li class="nav">
<a class="navtab" href="#">Item eight</a>
</li>
<li class="nav">
<a class="navtab" href="#">Item nine</a>
</li>
<li class="nav">
<a class="navtab" href="#">Item ten</a>
</li>
</ul>
添加jQuery轮播..我添加了one here for your code example
根据您的上次更新而且您没有任何其他问题，您可以使用RenderMode将ASP.NET菜单从表更改为列表
<asp:Menu ID="YourMenu" runat="server" Orientation="Horizontal" CssClass="menu" RenderingMode="List" >