Sliding Horizontal Layout

A slider-like layout where the neighboring sections are positioned horizontally next to each other.
Sliding Triple View Layout

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

Today we’d like to share an interesting layout with you. You might have seen it already on Skybox or on the website of Lotta Nieminen. It’s a layout where we see the main section in the middle and part of the previous and next section on the sides. The navigation reflects this view by showing the three items currently visible. When clicking on one of the sides or on one of the lateral navigation items, the sections will slide to the respective side, showing the next or previous section. The same happens to the navigation.

We use CSS 3D Transforms for moving the lateral sections. In a browser that does not support 3D Transforms (or where JavaScript is not enabled), you will see the default layout.

The main structure for the layout is the following:

<div id="vs-container" class="vs-container">
	<header class="vs-header">
		<h1>Sliding Triple View Layout <span>with Visible Adjoining Sections</span></h1>
		<ul class="vs-nav">
			<li><a href="#section-1">Hate dog flop</a></li>
			<li><a href="#section-2">Stretch hopped</a></li>
			<li><a href="#section-3">Inspect anything</a></li>
			<li><!-- ... --></li>
			<!-- ... -->
		</ul>
	</header>
	<div class="vs-wrapper">
		<section id="section-1">
			<div class="vs-content">
				<!-- content -->
			</div>
		</section>
		<section id="section-2"><!-- ... --></section>
		<section id="section-3"><!-- ... --></section>
		<!-- ... -->
	</div>
</div>

What we do is to first check if 3D Transforms are supported. If they are, we assign classes to the sections which will help us position them correctly next to each other.

TripleViewLayout01

The idea is to position the sections absolutely on top of each other and then position them with the right left value. With a width of 80%, we will have the following left values:

.vs-triplelayout .vs-wrapper .vs-left {
	left: -70%; /* 80 - 10 */
}

.vs-triplelayout .vs-wrapper .vs-left-outer {
	left: -150%; /* - 70 - 80 */
}

.vs-triplelayout .vs-wrapper .vs-current {
	position: relative;
	z-index: 100;
}

.vs-triplelayout .vs-wrapper .vs-right {
	left: 90%; /* 80 + 10 */
}

.vs-triplelayout .vs-wrapper .vs-right-outer {
	left: 170%; /* 90 + 80 */
}

The outer classes will be assigned to the sections following or preceding the lateral sections once we are sliding to the left or right side, respectively.

When we navigate to one side, we will control the sliding of the sections with a class that we apply to the main container. Here is an example of what happens when we apply the class vs-move-right:

.vs-container.vs-move-right .vs-left,
.vs-container.vs-move-right .vs-left-outer,
.vs-container.vs-move-right .vs-current,
.vs-container.vs-move-right .vs-right {
	transition: transform 0.5s;
	transform: translate3d(100%,0,0);
}

Once the transition is done, we reset the classes to the newly positioned sections. The same logic is applied to the navigation.

Since the layout itself is percentage based, it’s fluid by nature. We use a couple of media queries to size down the font and paddings/margins in order to look nice on smaller devices.

TripleViewLayout02

As pointed out by some readers, this demo has a problem with the scrollbar being hidden by the navigation overlay. To solve that problem, we’ve created an alternative version which replaced the overlays with arrows. We also give the lateral sections a background color which animated on sliding:

Alternative layout with arrows (DEMO)

Alternative layout with arrows (ZIP)

Note that you can also use the arrow keys to navigate through the sections.

We hope you like this layout and find it useful and inspiring.

Credits: Flat iMac in featured image by Pierre Borodin, filler text by Catipsum, cats by All Silhouettes

Tagged with:

Mary Lou

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

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 52

Comments are closed.
  1. @Mary Lou, Beautiful as usually, but have to ask one thing that i noticed in demo that scrollbar covered by the CSS, how?

  2. hello mary,

    it’s a nice way to present a linear navigation structure. but div.vs-sidenav-right is overlaying the scrollbar and the scrollevent is only fired on mousover the focused ‘paged’. that’s really no nice accesibility.

    feedback from firefox23.0.1
    greets Dom

  3. This is already second demo that doesn’t work in Chrome (Ubuntu 13.04)

    It works fine in Firefox

  4. Looks really nice. One tip on creating dynamic elements, you should ideally use ‘document.createDocumentFragment’ and append those elements to it as the docFrag isn’t part of the DOM tree, and then inject that into the DOM, it’s much better on performance as well as not causing reflows.

  5. Thank you all for the feedback! Yes, the scrollbar of the wrapper is hidden by the navigation elements which is not good. I’ve created a second version that is more similar to the effect seen on http://www.lottanieminen.com/
    The overlays are replaced by arrows and the lateral sections have a tint, which separates them from the middle section. The background color gets animated when sliding to the next or previous section.

    Having arrows as navigation elements solves the problem of the hidden scrollbar:

    Alternative layout with arrows (DEMO)

    Alternative layout with arrows (ZIP)

    Thanks and cheers, ML

  6. Oh wow. I love this. Now, to figure out how to create a WordPress theme. I see that Lotta Nieminen’s site is WP, so it’s totally possible.

  7. As always, great tutorial Mary Lou.

    Don’t know if it’s my iPhone 4s viewport settings, but the arrows seem to go over the content and the original navigation.

    Is it supposed to be an exercise for readers to tweak this behavior on their own to fit their needs, or was it supposed be on the page a more specific way?

    • * Run over the content

      Also, there seems to be an odd z-index / stacking-context-related problem with the new version with the arrows involving the attribution text, the header, and other content found on the top of the page.

    • Hi Kevin, this alternative version is not optimized for smaller screens; the arrow size should definitely be adjusted to fit better. Thanks for the feedback! Cheers, ML

  8. Hi,
    Am not able to drag scroll bar vertically with mouse, works ONLY with Scroll wheel #FF23.0.1.

  9. Very nice Mary Lou!

    Both for the design innovation and the technical. You’re a great designer 🙂

  10. Nice article !

    It would be good if there would be a permalink per link then you could refer to it!!!

    —–Stooni

  11. Another awesome tutorial/demo. Thank you Mary Lou! 🙂

    Is there a way to make it possible to link directly to a certain div by adding #id-of-the-desired-div to the URL? Imagine this is a list of articles and you’d like to send someone a direct link to the third one from the left.

  12. On an iPad, the main content flckers badly when the transition completes. Also, there is no preservation of state when changing sections. Why not use :target for saving state and clean up the transitions on more devices? Sorry for the criticism, but this needs some work to be considered great.