Horizontal scrolling touch-screen menu (click and drag) on PCs

Question

Horizontal scrolling touch-screen menu (click and drag) on PCs

Navigation

#1 by (1 votes)

1

Based on the menu below, can you make it slider like on mobile phones (without having to use the scroll bar, just with click and drag)?

ul.marcadores {white-space:nowrap; overflow-x:auto; background-color:#2D2D2D; width:300px}
ul.marcadores li {display:inline-block; float:none; margin:10px; padding:4px}
ul.marcadores li:hover {border-bottom:1px solid #FFFFFF; padding-bottom:1px}
ul.marcadores a {color:#FFFFFF; font-size:12px; font-family:Open Sans; text-transform:uppercase; font-weight:bold; text-decoration:none}

<ul class='marcadores'>
<li><a href='#'>Link 0</a></li>
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
<li><a href='#'>Link 5</a></li>
</ul>

html css rolamento touch

asked by anonymous 17.10.2018 / 22:41

1 answer

"JsonResult" does not contain a constructor that accepts 0 arguments How to return to the most predominant category associated with a group?

score 1 · Accepted Answer

Yes, but for this you will need a knowledge of javascript, you can use jQuery.

In this link you have all the Draggable documentation which is what you need to use link

The first example shown on the home page is similar to what you need, in your case it is blocking the movement on the Y axis, allowing the user to move only on the X axis. I gave a modified one in the code to better exemplify.

$( function() {
    $( "#draggable" ).draggable({
     containment: 'parent'
     });
});

  .divPai{
    width: 100%;
    height: 150px;
    background: black;
  }
  
  #draggable { 
    width: 150px; 
    height: 150px; 
    background: red
  }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="divPai">
  <div id="draggable">
    <p>Drag me around</p>
  </div>
</div>