6

I have this horizontal menu that has a scrollbar. I want to make it scroll right or left with out the scrollbar. Is that possible? Either left/right arrow buttons (on screen not keyboard) or mouse over. What is the best solution?

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;
}
<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>
vzupo
  • 235
  • 4
  • 11
  • check [this](http://stackoverflow.com/questions/20409744/html-horizontal-scrolling-without-a-scollbar) – Mike B Dec 09 '16 at 15:35

3 Answers3

4

Here is a solution using script - for illustration I have picked left arrow and right arrow keys and the mousewheel for the right-left navigation.

EDIT: Also added in left/right navigation buttons.

Check out the demo below:

var $this = $('.scrollmenu');
var scrollAmount = 50;

function moveRight() {
  if ($this[0].scrollWidth - $this.scrollLeft() > $this.outerWidth()) {
    $this.scrollLeft($this.scrollLeft() + scrollAmount);
  }
}

function moveLeft() {
  if ($this.scrollLeft() > 0) {
    $this.scrollLeft($this.scrollLeft() - scrollAmount);
  }
}

$("body").keydown(function(e) {
  // left arrow
  if ((e.keyCode || e.which) == 37) {
    moveLeft();
  }
  // right arrow
  if ((e.keyCode || e.which) == 39) {
    moveRight();
  }
});

$this.bind('mousewheel', function(e) {
  if (e.originalEvent.wheelDelta / 120 > 0) {
    moveLeft();
  } else {
    moveRight();
  }
});

// push button navigation
$('.leftNav').click(moveLeft);
$('.rightNav').click(moveRight);
div.wrapper {
  position: relative;
}
div.scrollmenu {
  background-color: #333;
  white-space: nowrap;
  overflow: hidden;
}
div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
div.scrollmenu a:hover {
  background-color: #777;
}
.leftNav {
  display: inline-block;
  color: white;
  font-weight: bolder;
  cursor: pointer;
  background: #333;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.rightNav {
  display: inline-block;
  color: white;
  font-weight: bolder;
  cursor: pointer;
  background: #333;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="leftNav">&lt;</div>
  <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 class="rightNav">&gt;</div>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • i dont want to use the keyboard at all, either make the menu slide with moving the mouse or just an left/right button – vzupo Dec 09 '16 at 16:05
  • i just want something if the user mouseover the left or right of the menu--the menu will slide in that direction. i have no idea what change you made – vzupo Dec 09 '16 at 16:15
  • @vzupo check out the left-right buttons too that I've added in, cheers! – kukkuz Dec 09 '16 at 16:27
3

you can wrap the menu in a container and set that container to overflow:hidden; - then just make it the height of the menu - minus the scrollbar!

Not great for accessibility but it works. The only way to scroll now is to highlight, use arrows keys or swipe on a touchscreen.

#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;
}
<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>

jsfiddle of example here

hairmot
  • 2,975
  • 1
  • 13
  • 26
2

I've used jquery to create something that works - it's by no means an elegant solution though.

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;
});
Ryan Gee
  • 394
  • 1
  • 9
  • Original answer updated to correct bug that caused scroll speed to increase based on the number of times a direction selector was hovered - removing `setInterval` from `mouse enter` event binding solves this. – Ryan Gee Dec 09 '16 at 18:03
  • great work.... I was thinking can we add the effect of touch and drag to move/scroll menu... just for touch screen devices? – mrabro Jul 23 '18 at 14:14