Self Initiated: Java Script (Off Canvas Navigation)

For further implementation of java script into the IVY Infant Clothier website, I added an off canvas navigation with animation. After doing some research into the off canvas navigation I decided to go forth and add one to the website, mainly because it is in within modern web trends, and is also more user friendly on touch screen devices such as smart phones and tablets, and also saves room on the screen.

HTML

offcanvasnav

Here is the HTML code for the off canvas navigation, just the same as the sticky navigation the off canvas must be outside the main container of the website, mainly because this one needs to stick  to the screen as well.

There are two main containers within this process of using an off canvas menu:

  • Container for the menu (menu-wrap)
    The main container which includes all of the links to the pages, and is the section that slides out once the ‘ham burger button’ is activated.
  • Container to wrap all of the content together
    The container which wraps around the site, but is hidden until the button is selected. this puts an overlay over the full page, and allows for the menu to scroll freely within this container.

And then underneath the code that creates the actual menu, is the code for the close and open buttons of the off canvas, these are very important allowing the user to open and close the actual menu.

CSS

offcanvascss

Here is the CSS for the off canvas menu itself, (the section that appears once the ham burger button is activated), making sure that I had implemented the correct ‘z-index’ so that the menu move forward in front of the rest of the content, and then setting the position to ‘fixed’ to that the menu scrolls with the user, as they go down the page.

Also implementing the correct ‘web-kit’ so that this function works across each different browser, I also set the height to ‘100%’ so that this menu fits the height of each device screen that is used on.

JAVA SCRIPT

javascriptoff

Here is a gif of the off-canvas navigation working:

offcanvas.gif

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s