Responsive Horizontal Layout

Today we want to show you how to create a horizontal layout with several content panels. The idea is to make each panel individually scrollable and animate a content panel to the left of the viewport once it’s clicked or selected from the menu. The challenge is to deal with different viewport sizes meaning that we will change the layout if the screen is not wide enough in order to be stacked vertically instead of horizontally.

The first wrapper with the class hs-content-scroller will act like a mask, having the width and height that is visible in the viewport. This will be the division that we’ll scroll horizontally because the second wrapper with the class hs-content-wrapper will be as wide as the sum of all article widths.

As you can see, each article will get an ID which we link to in our navigation.

Let’s style this thing.

The CSS

So, our main aim is to fix the sidebar at the left side of the screen and place the content as a horizontal stack.
Let’s first style the body and some headings. We’ll set both, overflow-x and overflow-y to hidden. We use the separate properties instead of the single “overflow” because we want to adjust something in a media query later, but we’ll get back to that.

We’ll first import the normalize.css, a really nice and sensible alternative to the common resets:

The position of the navigation will be absolute and by setting a top and bottom value, we have a flexible height. Later, we will add custom scrolling to the navigation so that we don’t have to worry about the menu items fitting into the area.

Now, let’s style the content part. As mentioned before, the division with the class .hs-content-scroller will be acting as a mask where any overflow won’t be visible. This is basically the same principle as in sliders. The left will be set to 200 pixel because of the sidebar:

The next wrapper will have a width which allows all the inner content panels to fit inside of it if stacked horizontally. We’ll set the overflow to hidden, because each of our content panels will have a custom scroll bar.

Remember that little anchor right after the sidebar? When clicking that anchor, the page will scroll up. We’ll only need this anchor when our screen is not big enough to stack the content panels horizontally but only vertically, so we’ll set it to display: none initially. In a media query we’ll then show it.

At this point, we’ll change the layout in order to be stacked vertically. We have to “reset” all the properties that forced the content to be stacked horizontally. We’ll also show the anchor that will bring us back to the top:

init = function() {
// initialize the jScrollPane on both the menu and articles
_initCustomScroll();
// initialize some events
_initEvents();
// sets some css properties
_layout();
// jumps to the respective chapter
// according to the url
_goto();
},

The first step is to create / initialize the jScrollPane (the custom scrollbars) on both the menu and the articles. However, for the articles, we will not do this in case the screen size is smaller than 715px:

When we click on an article or menu link, we will check to which chapter it refers to, and we will change the state of the browser history object. This will trigger the statechange event which in turn will make the page / scrolling division jump to the respective area.

The _goto function triggers the animation for changing the area / chapter on the page. We get the current chapter from the history state URL, and given the respective article we either scroll to the left or top depending on the screen size. Also, if we are in landscape mode, the element scrolling is the div "hs-content-scroller", otherwise it's the BODY element.

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Firstly I love the tutorials that you post they have been a great teaching material.

In the demo for < 715px the scroll is just controlled by the scrollbar, normal scroll doesn't seem to be working.What is causing that?
Also I think it would look better if instead of including panels that are cut off. the excess space is filled up with 'skeumorphistic' design elements.

This is a really interesting tutorial and something I have never come across before. It definatly provides an alternative solution to responsive web design! The only drawback it would seem is the amount of coding evolved and how intuitive it is to a first time user.

@alirot: It does work in IE – hope you aren´t talking about IE6?! If you mean the media queries – there are JQuery plugins that make them work in IE, too, just do a search.
Great work as always, Mary Lou! Many thanks for sharing your ideas!