Хоризонталното меню в моя уебсайт излиза извън страницата (водещо до хоризонтален скролер, който изглежда много зле).
Имам динамично меню, ако броят на елементите (опциите в менюто) се увеличи, то преминава границата и изгасва. Искам да използвам jQuery, където, ако броят на елементите се увеличи, ще покаже икони (стрелки наляво и надясно). При щракване върху тези икони - менюто трябва да се превърта наляво и надясно.
HTML:
<div class="wrapperClass">
<div id="mainContainerClass">
<!-- Horizontal Menu Starts Here -->
<div id="menuContainer">
<ol id="menuList">
<li><div id="popupmenu"><a href="/bgpage1.html" ><span>Menu Item 1</span></a></div> </li>
<li><div id="popupmenu"><a href="/bgpage2.html" ><span>Menu Item 2</span></a></div> </li>
<li><div id="popupmenu"><a href="/bgpage3.html" ><span>Menu Item 3</span></a></div> </li>
<li><div id="popupmenu"><a href="/bgpage4.html" ><span>Menu Item 4</span></a></div> </li>
<li><div id="popupmenu"><a href="/bgpage5.html" ><span>Menu Item 5</span></a></div> </li>
<li><div id="popupmenu"><a href="/bgpage6.html" ><span>Menu Item 6</span></a></div> </li>
<li><div id="popupmenu"><a href="/bgpage7.html" ><span>Menu Item 7</span></a></div> </li>
<li><div id="popupmenu"><a href="/bgpage8.html" ><span>Menu Item 8</span></a></div> </li>
<li><div id="popupmenu"><a href="/bgpage9.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="/bgpage1a.html" class="othermenu">Sec Item 1</a> |
<a href="/bgpage1b.html" class="active">Sec Item 2</a> |
<a href="/bgpage1c.html" class="othermenu">Sec Item 3</a> |
<a href="/bgpage1d.html" class="othermenu"> Sec Item 4</a> |
<a href="/bgpage1e.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="/bg#"><span>Menu Option 1</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 2</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 3</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 4</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 5</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 6</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 7</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 8</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 9</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 10</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 11</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 12</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 13</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 14</span></a></td></tr></table></td>
<td><table><tr><td><a href="/bg#"><span>Menu Option 15</span></a></td></tr></table></td>
</tr>
</table>
</div>'
