Use HTML & CSS to build elegant slide up navigation

Learn how to guide the user to see content one by one without serving everything up front


Learn how to guide the user to see content one by one without serving everything up front



1. Set up HTML

We create the main HTML document containing the head and body sections. The head section contains a link to the external stylesheet we start to create in Step 4. The body section is where we place the main website content.

<link rel="stylesheet" type="text/css" href="styles.css" />

2. Put in navigation links

The first section we add to the webpage is the navigation component. We use the semantic <nav> tag to contain regular HTML links. These links don’t link to an external page, but to an element that will be placed on the current page. This is achieved by using the hash character followed by the ID name of the element.

<a href="#page1"><span>Page 1</span></a>
<a href="#page2"><span>Page 2</span></a>
<a href="#page3"><span>Page 3</span></a>

3. Add article content

The <main> tag is used as a container to store each content article. The article tag is used to store the individual article content; there is no need to load different pages to access them. Each article container has an ID attribute that corresponds to the references defined in the navigation links created in Step 2.

<article id="page1">
<article id="page2">
<h1>Page 2</h1>
<article id="page3">
<h1>Page 3</h1>

4. Initiate CSS

Now create a new file called ‘styles.css’ for the styling rules. We start by creating rules for the main HTML and body containers of the document. This will have a black background and white text by default; we also ensure that there is no padding and full page height.

display: block;
background: #000;
color: #fff;
padding: 0;
margin: 0;
font-family: monospace;
height: 100%;

5. Define main container

The purpose of the main container is to control how each of its inner articles are stored and presented. The width of the container is set to 75 per cent of the screen width and full height; regardless of resolution. Margin values of auto are also used to ensure that the element is positioned in the middle. For the effect to work, we also want to hide any unwanted content overflow.

display: block;
width: 75%;
height: 100%;
margin: 0 auto 0 auto;
padding: 1em;
overflow: hidden;

6. Define article containers

Article containers are defined as being ready for presentation, but not visible by default. They also need to present themselves with a transition effect when activated. We will define this rule, with articles being set as the full height of <main> and vertical position being placed above the current page view. Transition effects are defined for top positioning, opacity and border.

position: absolute;
display: block;
width: 75%;
height: 100%;
top: -100%;
opacity: 0;
background-color: red;
border: 0;
transition: top 1s, opacity 1s, border 1s;
overflow: auto;

7. Work on navigation container

The content transition effect is triggered when the article’s ID is called. This can be detected with the CSS :target selector. Combining the changes in this with the transition attribute defined in Step 6 will trigger the animated effect. Activated articles will change to full visibility, screen into view and animate the borders.

opacity: 1;
top: 0;
border: 5px solid #fff;
background-color: #000;

8. Recursive drawing function

The navigation component is displayed on the right. It is important that this is always positioned in the same place and is not forced out of view by content. We achieve this by using absolute positioning to define the content as being placed at the top right. A z-index of 9999 will ensure that its display layer is above other content.

position: absolute;
right: 0;
top: 0;
z-index: 9999;

9. Link navigation

The actual navigation elements are the links inside the <nav>. We want this to be vertically positioned and not horizontally – like how <a> link tags are presented. This is achieved by setting the display rule for <a> tags inside the <nav> container to ‘block’. This forces elements to display on new lines. We also want links to appear as white text to be visible against the black background.

nav a{
display: block;
color: #fff;