By
Be inspired by the impressive navigation effects found on the Giacomorelli site
inspiration: www.giacomorelli.com
GET THE CODE
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.
TECHNIQUE
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> 013
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;
007 menu.click(function(){`
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.
001if(open){
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>
