Highlighted

Horizontal Scroll

Explorer ,
Dec 08, 2018

Copy link to clipboard

Copied

I want to create a Horizontal Scroll. I have found some coding that does this, but each one I see has the same issue, i.e. when you scroll the menu or an image scroll which I also need you to get a spacebar icon at the bottom.

Is there a way of turning this off, please?

Thanks, Tim

Screen Shot 2018-12-08 at 11.57.43.png

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

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;

}

</style>

</head>

<body>

<div class="scrollmenu">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <a href="#contact">Contact</a>

  <a href="#about">About</a>

  <a href="#support">Support</a>

  <a href="#blog">Blog</a>

  <a href="#tools">Tools</a> 

  <a href="#base">Base</a>

  <a href="#custom">Custom</a>

  <a href="#more">More</a>

  <a href="#logo">Logo</a>

  <a href="#friends">Friends</a>

  <a href="#partners">Partners</a>

  <a href="#people">People</a>

  <a href="#work">Work</a>

</div>

<h2>Horizontal Scrollable Menu</h2>

<p>Resize the browser window to see the effect.</p>

</body>

</html>

At this stage I think I would be inclined to use jquery UI draggable. It's an idea.....example below.

<!DOCTYPE htm>

<html>

<head>

<meta charset="UTF-8">

<title>Dragable</title>

<style>

* {

box-sizing: border-box;

}

body {

font-family: helvetica, sans-serif;

font-size: 14px;

}

.scrollable-nav-container {

width: 60%;

margin: 0 auto;

background-color: #f2f2f2;

display: flex;

align-items: center;

}

@media screen and (max-width: 768px) {

.scrollable-nav-container {

width: 90%;

}

}

@media screen and (max-width: 480px) {

.scrollable-nav-container {

width: 100%;

}

}

.scrollable-nav-inner {

overflow: hidden;

flex: 1;

}

.scrollable-nav ul {

margin: 0;

padding: 0;

white-space: nowrap;

}

.scrollable-nav li {

display: inline-block;

list-style: none;

margin: 0;

}

.scrollable-nav ul li a {

display: block;

text-decoration: none;

background-color: #000;

color: #fff;

padding: 10px 15px;

}

.fa-angle-left, .fa-angle-right {

font-size: 30px!important;

padding: 5px 10px;

}

.instructions {

width: 60%;

margin: 0 auto;

}

.instructions span {

font-size: 13px;

text-align: center;

display: block;

padding: 8px 0;

}

</style>

<!-- jQuery library -->

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

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

<script>

$(document).ready(function(){

$( ".scrollable-nav" ).draggable({ axis: 'x' });

});

</script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<div class="scrollable-nav-container">

<div class="arrow-left"><i class="fa fa-angle-left"></i></div>

<div class="scrollable-nav-inner">

<nav class="scrollable-nav">

<ul>

<li><a href="#">Link One</a></li>

<li><a href="#">Link Two</a></li>

<li><a href="#">Link Three</a></li>

<li><a href="#">Link Four</a></li>

<li><a href="#">Link Five</a></li>

<li><a href="#">Link Six</a></li>

<li><a href="#">Link Seven</a></li>

<li><a href="#">Link Eight</a></li>

<li><a href="#">Link Nine</a></li>

<li><a href="#">Link Ten</a></li>

</ul>

</nav>

</div>

<div class="arrow-right"><i class="fa fa-angle-right"></i></div>

</div>

<div class="instructions"><span>Drag right/left</span></div>

</body>

</html>

Views

639

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Horizontal Scroll

Explorer ,
Dec 08, 2018

Copy link to clipboard

Copied

I want to create a Horizontal Scroll. I have found some coding that does this, but each one I see has the same issue, i.e. when you scroll the menu or an image scroll which I also need you to get a spacebar icon at the bottom.

Is there a way of turning this off, please?

Thanks, Tim

Screen Shot 2018-12-08 at 11.57.43.png

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

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;

}

</style>

</head>

<body>

<div class="scrollmenu">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <a href="#contact">Contact</a>

  <a href="#about">About</a>

  <a href="#support">Support</a>

  <a href="#blog">Blog</a>

  <a href="#tools">Tools</a> 

  <a href="#base">Base</a>

  <a href="#custom">Custom</a>

  <a href="#more">More</a>

  <a href="#logo">Logo</a>

  <a href="#friends">Friends</a>

  <a href="#partners">Partners</a>

  <a href="#people">People</a>

  <a href="#work">Work</a>

</div>

<h2>Horizontal Scrollable Menu</h2>

<p>Resize the browser window to see the effect.</p>

</body>

</html>

At this stage I think I would be inclined to use jquery UI draggable. It's an idea.....example below.

<!DOCTYPE htm>

<html>

<head>

<meta charset="UTF-8">

<title>Dragable</title>

<style>

* {

box-sizing: border-box;

}

body {

font-family: helvetica, sans-serif;

font-size: 14px;

}

.scrollable-nav-container {

width: 60%;

margin: 0 auto;

background-color: #f2f2f2;

display: flex;

align-items: center;

}

@media screen and (max-width: 768px) {

.scrollable-nav-container {

width: 90%;

}

}

@media screen and (max-width: 480px) {

.scrollable-nav-container {

width: 100%;

}

}

.scrollable-nav-inner {

overflow: hidden;

flex: 1;

}

.scrollable-nav ul {

margin: 0;

padding: 0;

white-space: nowrap;

}

.scrollable-nav li {

display: inline-block;

list-style: none;

margin: 0;

}

.scrollable-nav ul li a {

display: block;

text-decoration: none;

background-color: #000;

color: #fff;

padding: 10px 15px;

}

.fa-angle-left, .fa-angle-right {

font-size: 30px!important;

padding: 5px 10px;

}

.instructions {

width: 60%;

margin: 0 auto;

}

.instructions span {

font-size: 13px;

text-align: center;

display: block;

padding: 8px 0;

}

</style>

<!-- jQuery library -->

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

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

<script>

$(document).ready(function(){

$( ".scrollable-nav" ).draggable({ axis: 'x' });

});

</script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<div class="scrollable-nav-container">

<div class="arrow-left"><i class="fa fa-angle-left"></i></div>

<div class="scrollable-nav-inner">

<nav class="scrollable-nav">

<ul>

<li><a href="#">Link One</a></li>

<li><a href="#">Link Two</a></li>

<li><a href="#">Link Three</a></li>

<li><a href="#">Link Four</a></li>

<li><a href="#">Link Five</a></li>

<li><a href="#">Link Six</a></li>

<li><a href="#">Link Seven</a></li>

<li><a href="#">Link Eight</a></li>

<li><a href="#">Link Nine</a></li>

<li><a href="#">Link Ten</a></li>

</ul>

</nav>

</div>

<div class="arrow-right"><i class="fa fa-angle-right"></i></div>

</div>

<div class="instructions"><span>Drag right/left</span></div>

</body>

</html>

Views

640

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 08, 2018 0
Adobe Community Professional ,
Dec 08, 2018

Copy link to clipboard

Copied

Thanks for showing the code directly from Tryit Editor v3.6

The proper way to create a horizontal scroll (shiver) is to use CSS Grid. For more info see https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 08, 2018 1
Adobe Community Professional ,
Dec 08, 2018

Copy link to clipboard

Copied

I think you should edit your menu down to 5 or 6 items.  The prevailing thought in responsive web design is that menus should comfortably fit a portrait mobile device without scrolling.    Complex desktop menus of the past don't work well in RWD. 

Get creative, put links into cards or boxes within your page content.  Or place less important links into the footer.   Pay attention to what other responsive web sites are doing with their menus.  There's a reason you don't see scrolling menus .

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 08, 2018 1
LEGEND ,
Dec 09, 2018

Copy link to clipboard

Copied

There's plenty of sources if you search in Google that you could adapt for your purposes:

https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6

From a personal point of view I dont think horizontal scrolling or horizontal swiping is that intuitive unless you have a bloody great sign saying that is what you are supposed to do. Its more common to scroll vertically. Your users may miss something important IF you dont make it obviously aware that there is information off-canvas to the left or right.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 09, 2018 1
Explorer ,
Dec 09, 2018

Copy link to clipboard

Copied

Thank you, everyone, yes that code is perfect.

I was looking at the code, and I wanted to add a black panel inside the main grey box as shown below, but foursome reason the black box will not fit the edge of the grey panel?

I have looked at the CSS, but it's not obvious what caused it?

Hope you can offer advice, please?

Code attached

Thanks, Tim

Screen Shot 2018-12-09 at 15.15.40.png

   <!DOCTYPE html>

<html><style> 

  :root {

  --gutter: 20px;

}

.app {

    padding: var(--gutter) 0;

    display: grid;

    grid-gap: var(--gutter) 0;

    grid-template-columns: var(--gutter) 1fr var(--gutter);

    align-content: start;

}

.app > * {

  grid-column: 2 / -2;

}

.app > .full {

    grid-column: 1 / -1;

}

.hs {

    display: grid;

    grid-gap: calc(var(--gutter) / 2);

    grid-template-columns: 10px;

    grid-template-rows: minmax(50px, 1fr);

    grid-auto-flow: column;

  grid-auto-columns: calc(20% - var(--gutter) * 2);

    overflow-x: scroll;

    scroll-snap-type: x proximity;

  padding-bottom: calc(.75 * var(--gutter));

  margin-bottom: calc(-.25 * var(--gutter));

    width: 1201px;

}

.hs:before,

.hs:after {

  content: '';

  width: 10px;

}

ul {

    list-style: none;

    padding: 0;

    width: auto;

}

h1,

h2,

h3 {

  margin: 0;

}

.app {

    width: 1200px;

    height: 234px;

    /* [disabled]background-color: #DBD0BC; */

    overflow-y: scroll;

}

.event-title {

    font-size: 36px;

    margin-bottom: -25px;

    margin-top: -16px;

    padding-top: 11px;

    padding-left: 0px;

    font-weight: 400;

    font-style: italic;

}

.hs > li,

.item {

    scroll-snap-align: center;

  padding: calc(var(--gutter) / 2 * 1.5);

    display: table;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background-color: #CBCBCB;

    border-radius: 8px;

    max-width: 71px;

}

.item {

    width: 220px;

    min-width: 174px;

    height: 145px;

}

.grey-panel {

    width: 174px;

    background-color: #0F0F0F;

    height: 63px;

    border-bottom-left-radius: 8px;

    border-bottom-right-radius: 8px;

    margin-top: 79px;

}

.line1-text {

    color: #FFFFFF;

    padding-left: 13px;

    padding-top: 11px;

}

.line2-text {

    color: #FFFFFF;

    padding-left: 14px;

    padding-top: 0px;

    padding-bottom: 0px;

    margin-top: -11px;

}

.fav {

    background-color: #F80004;

    border-radius: 5px;

    width: 25px;

    height: 23px;

    float: right;

}

</style>

<head>

 

<div class="app">

  <h1 class="event-title">title</h1>

 

  <ul class="hs full">

    <li class="item">

      <div class="fav"></div>

      <div class="grey-panel"><p class="line1-text">Line 1</p>

        <p class="line2-text">line2</p>

      </div>

    </li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test1</li>

  <li class="item">test1</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test1</li>

  <li class="item">test1</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test1</li>

  <li class="item">test1</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test1</li>

  <li class="item">test1</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test</li>

    <li class="item">test1</li>

  </ul>

</div>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 09, 2018 0
LEGEND ,
Dec 09, 2018

Copy link to clipboard

Copied

At this stage I think I would be inclined to use jquery UI draggable. It's an idea.....example below.

<!DOCTYPE htm>

<html>

<head>

<meta charset="UTF-8">

<title>Dragable</title>

<style>

* {

box-sizing: border-box;

}

body {

font-family: helvetica, sans-serif;

font-size: 14px;

}

.scrollable-nav-container {

width: 60%;

margin: 0 auto;

background-color: #f2f2f2;

display: flex;

align-items: center;

}

@media screen and (max-width: 768px) {

.scrollable-nav-container {

width: 90%;

}

}

@media screen and (max-width: 480px) {

.scrollable-nav-container {

width: 100%;

}

}

.scrollable-nav-inner {

overflow: hidden;

flex: 1;

}

.scrollable-nav ul {

margin: 0;

padding: 0;

white-space: nowrap;

}

.scrollable-nav li {

display: inline-block;

list-style: none;

margin: 0;

}

.scrollable-nav ul li a {

display: block;

text-decoration: none;

background-color: #000;

color: #fff;

padding: 10px 15px;

}

.fa-angle-left, .fa-angle-right {

font-size: 30px!important;

padding: 5px 10px;

}

.instructions {

width: 60%;

margin: 0 auto;

}

.instructions span {

font-size: 13px;

text-align: center;

display: block;

padding: 8px 0;

}

</style>

<!-- jQuery library -->

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

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

<script>

$(document).ready(function(){

$( ".scrollable-nav" ).draggable({ axis: 'x' });

});

</script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<div class="scrollable-nav-container">

<div class="arrow-left"><i class="fa fa-angle-left"></i></div>

<div class="scrollable-nav-inner">

<nav class="scrollable-nav">

<ul>

<li><a href="#">Link One</a></li>

<li><a href="#">Link Two</a></li>

<li><a href="#">Link Three</a></li>

<li><a href="#">Link Four</a></li>

<li><a href="#">Link Five</a></li>

<li><a href="#">Link Six</a></li>

<li><a href="#">Link Seven</a></li>

<li><a href="#">Link Eight</a></li>

<li><a href="#">Link Nine</a></li>

<li><a href="#">Link Ten</a></li>

</ul>

</nav>

</div>

<div class="arrow-right"><i class="fa fa-angle-right"></i></div>

</div>

<div class="instructions"><span>Drag right/left</span></div>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 09, 2018 1
Adobe Community Professional ,
Dec 09, 2018

Copy link to clipboard

Copied

I'm not too sure what you're doing now.  But here is a lightweight slider that works on swipe or drag.

CODE:

=========

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery Lightslider</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--LightSlider-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.css" type="text/css">

<style>

/**optional slide styles**/

#lightSlider li {

padding: 1em;

background: #A9070A;

color: #FFF;

}

#lightSlider p {

padding: 0.50em;

background: #222;

}

</style>

</head>

<body>

<h1>LightSlider</h1>

<h2><a href="http://sachinchoolur.github.io/lightslider/">Documentation On GitHub</a></h2>

<ul id="lightSlider">

<li>

<h3>First Slide</h3>

<p>Lorem ipsum Cupidatat quis pariatur anim.</p>

</li>

<li>

<h3>Second Slide</h3>

<p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>

</li>

<li>

<h3>Third Slide</h3>

<p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>

</li>

<li>

<h3>Fourth Slide</h3>

<p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>

</li>

<li>

<h3>Fifth Slide</h3>

<p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>

</li>

<li>

<h3>Sixth Slide</h3>

<p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>

</li>

</ul>

<!--jQuery Core-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--LightSlider-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>

<script>

$(document).ready(function() {

$("#lightSlider").lightSlider();

});

</script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 09, 2018 1
Explorer ,
Dec 10, 2018

Copy link to clipboard

Copied

Yes that will work, will playground to get it to fit my design. Thanks Tim

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 10, 2018 0