Use jQuery to build fading menus and floating panels

Be inspired by the impressive navigation effects found on the Giacomorelli site




Navigation is a key area of any website and it empowers the users to be able to move from one area to the next.

A lot of time on any design project goes into working out the best way to enable this to happen, and often, designers are coming up with new ways to push the boundaries of interaction or to leave users with a novel way of browsing content.

Giacomorelli’s site uses a unique navigation menu with floating panels that are not immediately obvious as menus. These panels move around in a sort of parallax fashion as the mouse moves and highlight when the mouse rolls over them, giving the site a unique way
of navigating.


Style the html

We are going to start by adding the CSS that we need for the menu. First we create a navigation style, which will be the hamburger menu icon, and this will become a close button when the menu opens. The panel is the panel in the middle of the screen.

Further styling

Now we create the style for the menu overlay panel that will be brought in over the top of the panel. We set the background of this to white, then we set a class called hidden, which will ensure that the menu is hidden until the hamburger is pressed.

001 #overlay{
002 width: 100%;
003 height: 600px;
004 background: #fff;
005 }
006    .hidden{
007  display: none;
008 }
009 </style>

Set the body

Now move into the body tag and we add the page structure. This has the nav element, which will hold the burger menu. The panel is here with the overlay element inside and this will have the actual menu links. The overlay will then appear when the burger is pressed.

001<nav id=”show”></nav>
002 <container id=”panel”>
003 <div id=”overlay”     class=”hidden”>
004 <ul>
005 <li><ahref=”#”>Menu Item 1</a></li>
006 <li><ahref=”#”>Menu Item 2</a></li>
007 <li><ahref=”#”>Menu Item 3</a></li>
008 <li><ahref=”#”>Menu Item 4</a></li>
009 <li><ahref=”#”>Menu Item 5</a></li>
010 </ul>
011 </div>
012 </container>

Add the functionality

Before the closing body tag add the following code, which adds a link to the jQuery library. We then open a script tag below this and have a document ready function. We store our DOM id elements in a variable and set up the click listener.

001<script src=”jquery.js”></script>
002 <script>
003  $(function() {
004  var overlay = $(“#overlay”);
005  var menu = $(“#show”);
006  var open=false;

Fade in and out

Here we test if the menu is open or not. If it is then we make the menu fade out and turn the menu back to a burger icon. If the menu is not open then we fade the menu in and change the burger icon to a closing cross icon. Save and test in the browser.

002  menu.css(“background-              position”, “0 0”);
003 overlay.        fadeOut();
004 open=false;
005  }else{
006  menu.css(“background-position”,     “-50px     0”);
007   overlay.    fadeIn();
008  open=true;
009  }
010  });
011  });
012  </script>