Sliding Door

The Unkuna sliding door is a flexible structure that allows you to show a minimal content summary when the door is closed and a more detailed, expanded content when the door is open. Ideal for use with icon based navigation and progress bars. On full size screens the "sliding" door opens by reducing the size of the "fixed" door. On small and medium screens the "sliding" door opens on top of the "fixed" door.

Example

Open in new tab

Country overview

PeruZuela is a beautiful country!

Economy

Peru depends heavily on tourism and mining for foreign currency inflows.

Food

Peruvian food is consistently rated among the best in the world.

HTML Structure

Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.


        

Usage

The sliding door structure is designed to be fixed in the viewport. The sliding door frame has CSS "absolute" position with vertical scroll in both the fixed and sliding doors. Inside a sliding door, elements with class name .nkn-sliding-door-open are visible only when the sliding door is open. The sliding door can be configured to show on the LH or RH side of the structure by applying class name nkn-opens-left or nkn-opens-right to the sliding door frame.

CSS class names.

Class Description
"nkn-sliding-door-frame" It is the container
"nkn-fixed-door" It is the fixed part
"nkn-sliding-door" It is the moving part
"nkn-sliding-door-open" When the sliding-door is opened the HTML elements that have this class will be shown.
"nkn-open" In order to load with the moving portion open.
"nkn-opens-left" To put the moving part to the left.
"nkn-opens-right" To put the moving part to the right.
"nkn-sliding-door-knob" This class is used to make the click handler open or close the sliding-door

HTML data-attributes.

Data role Description
data-nkn-role="sliding-door-knob" For the javascript