One of the growing trends in web design is to have a fixed header and menu at top. Having a completely fixed menu with header has some advantages and disadvantages both. Surely, with fixed header and menu, your visitor has always an option to click on menu links whenever required but at the same time the header consumes the precious space which could have been otherwise used for displaying useful contents.
To overcome this, many web designers keep the height of the header and menu small. However, a better solution will be to have a normal header and menu which becomes sticky after some amount of scroll. This type of design has become very trendy and many well designed websites are coming with animated menus these days.
In one of my posts, I have illustrated how to get this sticky menu on scroll effect with Waypoints. This is pretty straightforward and takes minimal amount of coding from your side. In this article, I will go one step further and add some additional contents below the header menu once the main contents have been scrolled and the menu becomes sticky. This is great if you wish to provide some additional information to user without distracting him from going through the current content. Have a look what we are going to create in this tutorial.
Once the visitor scroll downs and header goes above the viewport, the menu sticks to the top. With that, a small button also appears just below the main menu. User, thereafter, can click on this button to reveal the additional content. Here you may keep some popular links of your website, a message, contact form or anything important. Anyway, I would not recommend putting any kind of advertisement there because it would not go well with your visitors. This is especially because this small button creates the curiosity in the visitors which you wouldn’t like to destroy!
Let’s learn how to get this effect. As usual the complete web page with code is available for download at the end if you just want implementation without going through the tutorial.
HTML for Sticky Menu with Additional Contents
I would recommend going through my earlier post on sticky menu for learning how to achieve the sticky header on scroll effect. Here I will focus more on the effect of getting additional content after the menu has become fixed. Here is the html code which is quite straight-forward:
<div id="box-contents"> <input type="checkbox" id="check-additional-content" class="toggle" /> <div> Additional Contents Here </div> <label for="check-additional-content"> <i class="fa fa-bars"></i> </label> </div>
We keep all our codes related to additional contents in a div with “box-contents” id. Hide and show effect is achieved with a checkbox with “toggle” class. After that we have another div where we will keep the additional contents. At last, we have a label for check-box which will actually work as button for displaying additional contents. In fact, checkbox will always be hidden and we will use label with font awesome for working it as a button.
CSS for Additional Contents
Now let’s see the stylesheet part. You already know how to implement the sticky effect for menu after scroll. When the page is not scrolled and header is visible, box-contents are invisible. This is achieved with keeping the height of box-content as zero and overflow as hidden.
.sticky-navigation > #box-contents
{
height: 0;
margin: 0;
overflow: hidden;
}
Once the menu gets fixed at top, the height of box-contents is changed to “auto”.
.sticky-navigation > #box-contents
{
height: 0;
margin: 0;
overflow: hidden;
}
However, still the additional contents inside the div are hidden. This is because we are defining that when checkbox is unchecked, the height of this div should be zero. Please refer the code below.
.toggle ~ div
{
height: 0;
margin: 0;
overflow: hidden;
background-color: #FFFFFF;
box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
transition: 0.5s all ease-in;
}
.toggle:checked ~ div
{
height: 300px;
}
As the checkbox label (which is actually working as button) is clicked; the checkbox is checked and the height of div becomes 300 pixels. We can define the height as “auto” but we want to achieve the transition effect and so we need to explicitly define the height.
Well, that’s all about the styling part of div for additional contents. Now, we are left with most important style – i.e. label for checkbox which will be used as button.
.toggle
{
display: none;
}
#box-contents label
{
border-radius: 50%;
padding: 10px;
cursor: pointer;
background-color: #FFFFFF;
display: inline-block;
position: relative;
top: -20px;
border: 2px solid rgba(0, 0, 0, .2);
}
The checkbox is always hidden irrespective of it is checked or not. For the label, we are defining cursor as pointer to make it look like an active element. We are also defining the border color exactly as the box shadow of menu and shifting it up by 20 pixel (height: -20px) so that it look like the part of the main menu.
That’s all folks! You get an important place for the important links or any additional content just below the main menu. It also does not distract your visitor and may be helpful in retaining your visitor some more time on your website.
You may like to download the complete codes from the below link.
Feel free to write in the comment box below if you encounter any problem or have a better suggestion.
