News

Code a CSS & JS slide down menu

Keeping navigation in the frame at all times typically enhances the user experience. Adding a subtle touch of style and class can make the experience even better

ColoniesvsEmpires

Keeping navigation in the frame at all times typically enhances the user experience. Adding a subtle touch of style and class can make the experience even better

balldi01

As seen on lellabaldi.com | GET THE CODE

Menus are one of the most important aspects of any site, they provide the way that your visitors are going to actually navigate and interact with your content. This provides a tremendous opportunity to do something unique, at the very least the designer needs to take something that’s quite familiar and do something a little unexpected.

The creators of lellabaldi.com have done just that with their transformation of the familiar burger menu. As the page loads the burger icon is present at the top of the page in the right-hand corner of the screen, so no big change there. But as the user scrolls down the page this icon will then scroll off the top as any normal content scrolls with the page. Just as the icon is scrolling off the page another header bar slides down with a different coloured background, containing another burger menu.

It’s a simple but effective change and certainly grabs the user’s attention. When the icon is clicked, the off-screen menu slides up from the bottom of the screen and overlays with the new header, covering the entire screen. The way the menu slides up until it touches the header is actually very pleasing and shows how a simple animation can be effective.


TECHNIQUE

1. Creating the menu reveal

The Lella Baldi site has a unique menu system, to get the same effect start by adding the jQuery library and the CSS styling to the head section of your document. The body is set to have no padding and the header is made into a fixed element. Make sure that you download all the code for this Web Workshop on our FileSilo.

2. Finish the styling

The content of the page is given an arbitrary 1,600 pixel height so that it is larger than the browser window, and just so that there is some scrolling on the page to reveal the header. The menu is placed as a fixed element off the bottom of the page.

#content{
width: 100%;
height: 1600px;
}
#menu {
width: 100%; height: 100%;
background: #222; color: #fff;
padding-left: 20px;
z-index: 201;
position: fixed;
bottom: -100%;
}

3. Add the HTML tags

Now move to the body section of the page and add div tags. These correspond to the CSS added in the previous two steps. If this was a real page then you would put your own content in the div with the id of ‘content’.

<div id="header">Header</div>
<div id="content">Page Content goes here</div>
<div id="menu">Menu</div>

4. Add the functionality

Below the HTML tags, JavaScript content can be added. The document is checked to make sure it has loaded, then two variables are set to track whether the header has slid down onto the page or if the menu is on.

5. Scroll detection

When the scrolling has gone more than 100 pixels the header is animated onto the page to sit at the top. If the user scrolls up it slides back off again.

$(window).on('scroll', function() {
var scrollTop = $(this).scrollTop();
if ( scrollTop > 100 && down == false) {
$('#header').animate({"top": 0}, 300 );
down = true;
}
if ( scrollTop < 100 && down == true) {
$('#header').animate({"top": -100}, 300 );
down = false;
}
});

6. Click the header

Rather than just click a burger icon, the whole header is set to be a button to move the menu onto the page. The menu slides up from the bottom and stops below the header. The menu slides off if clicked a second time.

$( "#header" ).click(function() {
if (menuOn == false){
$('#menu').animate({"bottom": -100}, 500 );
menuOn = true;
} else {
$('#menu').animate({"bottom": "-100%"}, 500 );
menuOn = false;
}
});
});
×