Horizontal Scroll

Report · Dec 08, 2018

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

<!DOCTYPE html>

<html>

<head>

<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>

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

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

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

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

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

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

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

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

</div>

<h2>Horizontal Scrollable Menu</h2>

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

</body>

</html>

Report · Dec 08, 2018

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

Wappler, the only real Dreamweaver alternative.

Report · Dec 08, 2018

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Dec 09, 2018

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.

Report · Dec 09, 2018

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

<!DOCTYPE html>

: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>

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

</div>

</li>

</ul>

</div>

</body>

</html>

Report · Dec 09, 2018

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

<!DOCTYPE htm>

<html>

<head>

<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>

$(document).ready(function(){

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

});

</script>

</head>

<body>

<ul>

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

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

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

</ul>

</nav>

</div>

</div>

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

</body>

</html>

Report · Dec 10, 2018

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

Report · Dec 09, 2018

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>

<head>

<title>jQuery Lightslider</title>

<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>

<li>

<h3>First Slide</h3>

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

</li>

<li>

<h3>Second Slide</h3>