Navigations should always be accessible to users. But there are cases in which you don't have enough space in your header to show all your menu items, or you just want to give more relevance to some items rather than others. In these cases, a secondary navigation can make the job!
We were inspired by a nice solution adopted by Squarespace: the secondary navigation is hidden under the main content of the page; a click on the menu icon makes the page content to smoothly translate, revealing the hidden navigation. Like it!
Creating the structure
We inserted the primary navigation in a <header> element and used a <main> element to wrap all our content. We inserted the secondary navigation outside the <main> element, so that it is not affected by the CSS Translation of the main content.
<header>
<!-- logo here -->
<nav id="cd-top-nav"><!-- your primary navigation here --></nav>
<a id="cd-menu-trigger" href="#0"><span class="cd-menu-text">Menu</span><span class="cd-menu-icon"></span></a>
</header>
<main class="cd-main-content">
<!-- put your content here -->
</main>
<nav id="cd-lateral-nav"><!-- your secondary navigation here --></nav>Inside the secondary navigation, we created two separate unordered lists, one for items with submenu elements and one for simple items. Also a .socials container was added for your social links.
<nav id="cd-lateral-nav">
<ul class="cd-navigation">
<li class="item-has-children">
<a href="#0">Products</a>
<ul class="sub-menu">
<!-- all its children here -->
</ul>
</li>
<!-- other .item-has-children here -->
</ul>
<ul class="cd-navigation cd-single-item-wrapper">
<li><a href="#0">Info</a></li>
<!-- other simple items here -->
</ul>
<div class="cd-navigation socials">
<a class="cd-twitter cd-img-replace" href="#0">Twitter</a>
<a class="cd-github cd-img-replace" href="#0">Git Hub</a>
<a class="cd-facebook cd-img-replace" href="#0">Facebook</a>
<a class="cd-google cd-img-replace" href="#0">Google Plus</a>
</div>
</nav>Adding style
To animate the <main> element, we combined a CSS3 Transformation with a CSS3 Transition:
.cd-main-content {
/* set a min-height and a z-index to be sure that the main element completely covers the lateral menu */
min-height: 100%;
z-index: 2;
transition-property: transform;
transition-duration: 0.4s;
}
.cd-main-content.lateral-menu-is-open {
transform: translateX(-260px);
}We did the same to animate the <header>.
Note that, to assign a min-height to the <main> element, we set height: 100%; to <body> and <html>. But you'll eventually have content right below the header, so these properties could not be necessary.
As default, the primary navigation scrolls with the content. To switch form a scrolling navigation (in position: absolute;) to a fixed navigation, add the class .is-fixed to the <header> element.
An interesting note: the hamburger icon, and the 'X' icon that replaces it when the menu is visible, have been created in CSS. We used a <span> element and 2 pseudo-elements (::before and ::after). Now when the the 'X' is visible, we hide the <span> element by setting visibility: hidden; while for the pseudo-elements we set visibility: visible; - since the visibility property isn't inherited by default (unlike the Display and Opacity properties). It did work...except in IE, where looks like pseudo-elements inherit the parent visibility property. The trick here was to use the rgba function to give background-color: rgba(255, 255, 255, 0); to the <span> element, while background-color: rgba(255, 255, 255, 1); to the pseudo-elements. It worked!
Events handling
Nothing fancy in the jQuery file, apart from adding/removing classes according to specific events. Next time will be better!
