Rotating Page NavBar

Code Breakdown
Introduction

This project adds an interesting take on the standard Navigation Bar. Typically you would have something like a horizontal nav bar at the top of the page, or a vertical menu that displays when you click on a "Hamburger" icon.

Instead, with this concept, when you click on the "hamburger" icon, the entire page is going to rotate counter-clockwise 20°, and then display a hidden vertical nav bar in the left bottom portion of the screen. We set the pivot point for the rotation to be the top left corner of the page, so when the page rotates, it opens up that bottom left area that the page has rotated away from.

The complete source code for this project can be downloaded here.

the HTML

With the html, we create a "parent" container <div> that holds the circle at the top left corner, and our "main page" content.

The circle will hold our icons that display to either open or close our "nav bar". And the main page consists of a basic page containing an <h1>, <h3>, a couple or "lorem ipsum" paragraphs, and an image.

After the "parent" container, we have an unordered list inside a <nav> container, that become our actual nav links. It's important to note that this <nav> container is after the main "parent" container and is a separate entity unto itself. It is not part of the "parent" container.

Initially, this <nav> container is hidden and when the page rotates, it becomes visible in the bottom left corner of the page. This functionality is controlled with JavaScript by adding or removing the show-nav class to the main container <div>.

We are utilizing font-awesome in this page so we need the following link in the head section of our page:

 

and here is the html code:

the CSS

The css for this is very interesting. We start with some basic styling for the body, headings, paragraphs, image, and nav links, for appearance purposes only.

We're giving the overall <body> a background color of #333 and the main container <div> a background color of #fafafa. This gives us a white background for the page, and when we rotate, we see a dark background with white text, for the navigation links.

 

Let's start with the styling for the nav links:

nav: sets the nav <div> to a "fixed" position 40px up from the bottom of the page, with a z-index of 100 to place it on top of all other elements on the page.

nav ul: removes "bullets" from the list and move it right 30px.

nav ul li: text-transform/color/margin are setting the styling for each list item in the <nav> ul, which is our navigation links. And this is where it gets interesting:

nav ul li i: is setting the styling for the font-awesome images for the nav links.

nav ul li:nth-of-type(2), and nav ul li:nth-of-type(3) are just setting different horizontal positions for the nav links so that when displayed, the links are offset from to the right, instead of in a vertical column.

and nav ul li:last-child is setting some styling for the information <li> indicating that the <nav> section is non-functional.

 

Next we need to style our main "container" which holds the main body of our page. This styling defines the page rotation that happens when our JavaScript instructs the page to rotate.

Remember that the JavaScript will control this page rotation through "click" events. And when a "click" event is detected, this styling determines how the page actually rotates.

Here's the code:

the JavaScript

Back to Top