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!
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.
<!-- 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>
<!-- put your content here -->
<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.
<!-- all its children here -->
<!-- other .item-has-children here -->
<ul class="cd-navigation cd-single-item-wrapper">
<!-- other simple items here -->
<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>
To animate the
<main> element, we combined a CSS3 Transformation with a CSS3 Transition:
/* set a min-height and a z-index to be sure that the main element completely covers the lateral menu */
We did the same to animate the
Note that, to assign a
min-height to the
<main> element, we set
height: 100%; to
<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
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!
Nothing fancy in the jQuery file, apart from adding/removing classes according to specific events. Next time will be better!