I am facing an issue with the horizontal menu on my website, as it extends beyond the page width, creating a horizontal scroll bar which looks unappealing.
The menu is dynamic and if the number of items (options in the menu) increases, it overflows the boundary. I am looking to implement a jQuery solution where the menu displays icons (left and right arrows) when the number of items increases. Clicking on these icons should scroll the menu left and right.
Below is the HTML structure:
<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>
...
</div>
</div>
CSS styling for the menu:
.wrapperClass { width:1000px; margin: 0px auto; padding:0px;}
...
#popupmenu div a:hover { background: #11439d; color: #FFF;}
Next, there is a second example of a different menu structure:
<div id="secondMenue" >
<a href="page1a.html" class="othermenu">Sec Item 1</a> |
<a href="page1b.html" class="active">Sec Item 2</a> |
...
</code></pre>
<p>In a specific layout that cannot be changed, a carousel needs to be applied. The layout is shown below:</p>
<pre><code>'<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>
...
</tr>
</table>
</div>'