Sliding Horizontal Layout

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

Sliding Triple View Layout

View demo Download source

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

View demo Download source

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 42

    • 2

      Hey.
      first: thanks for this awesomeness!
      second: I’m also trying to get more than tree nav-items.
      I want to have 5 items. I’m new to js but what I just found out is, that if you give the other two items the classes .vs-nav-left-outer / .vs-nav-right-outer like this (via Inspector) and change the left alignment in the css like this you will get the other two items on the left and right side. BUT: I don’t know how to change the js…..

      can someone help us?

  1. 5

    Slick, clever, and thanks for sharing.

    Refreshing to see stuff challenging the “scrolling up and down is fine but left/right is a no no” stance.

    Thanks again.

  2. 7

    Hello,

    How can i position the 2 lateral strips so they overlap the content (not the main visible content) ?
    I want those strips to have a higher z-index, but i can’t figure out how. They always stay behind text, no matter what.

    Can you help me ?

    Thanks.

    Great script , btw.

  3. 12

    Love this, but I have a slight problem. When switching between SOME panes (not all), the content “jolts” at the end of the sliding animation. It looks like it gets 90% of the way there and then snaps to the end. My site is not hosted yet so I can’t give a link, but does someone else know what could be happening? Why would it be happening with some #sections and not others?

    • 13

      For the record, I figured out the deal. I had a transition: all .2s on the p and h2 anchors. That was causing vs-content slide errors. Removed it, everything was fine. Weird, but whatever.

  4. 14

    Great bit of coding.

    Does anyone know how you’d get this working with just two columns?

    Whenever I try the left or previous animation breaks, whereas the right or next works fine.

  5. 16

    I am using this on my website, of course editing the heck out of it first. I was wondering if there is a way I can post a small link somewhere on my site so that you get the credit for the design.

    Also, to remove columns shall I just delete the ‘col’ class/div or is there a way I can make it more LtoR reading friendly?

    Thanks a lot for this design.

  6. 17

    Hi thanks for sharing, I was wondering how can you disable the arrows throw navigation, example if I’m currently at the last “slide” how can I create a conditional so I can’t go further and the “next arrow” turn on an alpha state or something??? and same case, if I’m starting the “prev” arrow will be off. Maybe you can guide me throw this. Thanks a lot!!!

  7. 19

    I have a question, if I wanted to place a button to advance to the next section, which class should call. I have not been able to do.

    I thank and congratulate you on this project.

    Sebastian

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>