Utilizing jQuery, I have managed to develop a functional solution - although not particularly sophisticated.
Access the jsfiddle here.
HTML:
<div id="wrapper">
<div class="scrollmenu">
<a href="#home">Week 1</a>
<a href="#news">Week 2</a>
<a href="#contact">Week 3</a>
<a href="#about">Week 4</a>
<a href="#support">Week 5</a>
<a href="#blog">Week 6</a>
<a href="#tools">Week 7</a>
<a href="#base">Week 9</a>
<a href="#custom">Week 10</a>
<a href="#more">Week 11</a>
<a href="#logo">Week 12</a>
<a href="#friends">Week 13</a>
<a href="#partners">Week 14</a>
<a href="#people">Week 15</a>
<a href="#work">Week 16</a>
<a href="#home">Week 17</a>
<a href="#news">Week 18</a>
<a href="#contact">Week 19</a>
<a href="#about">Week 20</a>
<a href="#support">Week 21</a>
<a href="#blog">Week 22</a>
<a href="#tools">Week 23</a>
<a href="#base">Week 24</a>
<a href="#custom">Week 25</a>
<a href="#more">Week 26</a>
</div>
</div>
<div class="left">
Left</div>
<div class="right">
right</div>
</div>
</div>
css:
#wrapper{overflow:hidden;height:48px;}
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
.left, .right {
height: 50px;
background: red;
}
.right {
background: green;
margin-top: 50px;
}
jQuery:
var moveleft = false;
var moveright = false;
cur_pos = 0;
$(document).ready(function(){
setInterval(function(){
if (moveleft) {
$('.scrollmenu').scrollLeft(cur_pos + 10);
cur_pos = $('.scrollmenu').scrollLeft();
}
}, 5);
setInterval(function(){
if (moveright) {
$('.scrollmenu').scrollLeft(cur_pos - 10);
cur_pos = $('.scrollmenu').scrollLeft();
}
}, 5);
});
$('.left').mouseenter(function(){
moveleft = true;
});
$('.left').mouseleave(function(){
moveleft = false;
});
$('.right').mouseenter(function(){
moveright = true;
});
$('.right').mouseleave(function(){
moveright = false;
});