A key consideration I make when designing intranets is how the navigation must always be easily accessible because users can land on any page and each user will have a different set of aims when using the site. Links are sent over email all the time and I can’t expect the sender to clean up a URL to remove things like anchor references or variables.
The solution: sticky navigation bars.
The effect is simple. When a user scrolls down the page the navigation is seemingly ‘lifted’ out of it’s placeholder and flows down the page with them, allowing them to click through to any other part of the site (so long as it is held within the primary navigation system).
The method was also remarkably simple, thanks to a jQuery plugins called Waypoints.
I’m using WordPress for my intranet project, so the code I use in my header.php file is:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="row"> <div class="nav-container twelve columns"> <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_class' => '', 'container' => 'nav', 'menu' => 'nav-bar', 'menu_class' => 'nav-bar', 'walker'=> new DD_Wolker_Menu ) ); ?> </div> </div> |
The vital thing here is the containing element being set to use the nav HTML tag and the menu class being set to nav-bar.
Then in footer.php we call the Waypoints plugin. I put these JS calls in the footer because if they hang or fail the user can still use the website, albeit without the sticky nav. I’ve also added my site-specific code to a separate JS file because I like to keep things tidy. Don’t forget this is all jQuery so you’ll need to call the core files too.
|
1 2 |
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.waypoints.js"></script> <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.stickynav.js"></script> |
I also do some really simple css.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
nav { width: 100%; height: 40px; position: relative; z-index: 10;} .fixed { position: fixed; } .sticky { position: fixed; top: 0; width: 910px; } /* Navigation Overrides */ .nav-bar { margin-top: 0px; } /* End Navgation Overrides */ |
Then, inside stickynav.js I do this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function() { // Do our DOM lookups beforehand var nav_container = $(".nav-container"); var nav = $("nav"); nav_container.waypoint({ handler: function(event, direction) { nav.toggleClass('sticky', direction=='down'); if (direction == 'down') nav_container.css({ 'height':nav.outerHeight() }); else nav_container.css({ 'height':'auto' }); } }); }); |
Easy, huh? Credit where it’s due, this is not my own solution it’s my implementation of a tutorial here.