By
Recreate the impressive pop-out navigation effect found on the The story of Palm Oil site
inspiration: bit.ly/1qAk0Er | GET THE CODE
There’s nothing new about giving your navigation elements some sort of hover effect. The advent of CSS3 simply gave us more effects to utilise, rather than any new ways to use the hovering act itself.
But that’s not to say that there aren’t options for giving our navigation hover effects more function, as well as more gimmicks. What we’re looking to do in this web workshop is to have a series of image-based navigation links with two completely separate hover effects. The first is a simple colour change of the border, but the second is a pop-out tool-tip box with some info about the link itself. Let’s look at the inspiration for this effect.
BUILD THE NAVIGATION
Structure the page
Our page will be constructed around two distinct areas, a fixed navigation column on the left (#navbar) and the main page area on the right (#main). Within the navbar div, place an unordered list with six empty list elements. In the main div we can put the page title.
001 <body> 002 <div id="navbar"> 003 <ul> 004 <li></li> 005 ... 006 </ul> 007 </div> 008 <div id="main"> 009 <h1>Do Something!</h1> 010 </div> 011 </body>
Write the body CSS
We are focusing on the navigation elements in this workshop, rather than any page sections, so give the body of our site a fullscreen image background.
001 body {
002 font-family: 'Open Sans', sans-serif;
003 font-size:12px;
004 background: url('images/bg.jpg') no-repeat 50% 50% fixed;
005 background-size: cover;
006 margin:0;
007 }
Continue to the section CSS
We want our navigation column to have a fixed position and occupy the height of the page it sits in. We also want to give it a fixed width, 100px in this case, which we will match with the left padding of the main div area. This is a layout that would need to be readjusted for smaller screens.
001 #navbar {
002 width: 100px;
003 height: 100%;
004 position: fixed;
005 background-color:#369;
006 }
007 #main {
008 padding-left:100px;
009 }
Place navigation icons
You will need six PNG icons to use for your navigation elements. Ours have been obtained from icomoon.io, all connected with a type of activity. Place each icon within an <a> link, within each list element. There are six in all, as with the example below. Add the CSS for the unordered list, setting it tidily within the navigation column.
001 <li>
002 <a href="#">
003 <img src="images/streetsign. png" alt=""/>
004 </a>
005 </li>
006 ul {
007 list-style-type:none;
008 padding-left:17px;
009 margin-top:50px;
010 }
Style the nav elements
Now we can apply the styling needed to arrange them. Each should be given a circular border-radius and base colour for the border. Width and height can be fixed, with padding and text-align properties keeping the images central. The relative positioning comes into play when the pop-out boxes are added in the next section.
001 li {
002 position:relative;
003 border: 2px solid #eee;
004 border-radius: 50%;
005 padding: 10px;
006 width: 40px;
007 height: 40px;
008 text-align: center;
009 margin: 10px 0;
010 transition: border 0.2s ease-in;
011 }
012
ADD THE HOVER
Add a div element
Put in the new div with the class activebox that sits within the <li> tag, but not the <a> tag. Add an inline display:none property. Give it a title and some blurb.
001 <li> 002 <a href="#"> 003 <img src="images/ streetsign.png" alt=""/> 004 </a> 005 <div class="activebox" style="display:none;"> 006 <h2>Go for a Walk</h2> 007 <p>Lorem ipsum.</p> 008 </div> 009 </li>
Change hover properties
Let’s change the border colour of the icon on hover with added CSS easing. The activebox elements must be absolutely positioned, to enable them to align with relative icons, and adjusted to sit in line with the navigation column.
001 li:hover {
002 border: 2px solid #fe000a;
003 transition: border 0.2s ease-in;
004 }
005 .activebox {
006 position: absolute;
007 width: 300px;
008 top:0;
009 left:70px;
010 padding:10px;
011 background-color:#369;
012 color:#fff;
013 border-top-right-radius:30px;
014 border-bottom-right-radius:30px;
015 }
The JavaScript
Toggle the display state of each activebox element so that it has a fade-in when the matching icon is hovered over. Using ‘$this’ ensures that only the corresponding element is displayed.
