Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to build a fixed menu in 3 easy steps

DZone's Guide to

How to build a fixed menu in 3 easy steps

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Fixed menus are a definitive web design trend of 2014. They look good, and they are also super useful for visitors. Today, I’m showing you how you can create a lightweight, functional and beautiful fixed menu for your website or WordPress blog.

The HTML

Let’s start with the basis: The HTML. Place this code just after the opening <body> tag of your html document. If you’re applying this tutorial to a WordPress blog, this code should go into your header.php file.

<div id="fixmenu">
	<a href="http://www.yoursite.com"><img src="path/to/yourlogo.png" alt="" /></a>
	<ul class="menu-fixed">
		<li><a href="http://www.yoursite.com">Home</a></li>
		<li><a href="#header" id="srolltotop">Top</a></li>
	</ul>
</div><!-- #fixmenu -->

As you can see, we created a container (#fixmenu), a site logo and link, as well as a <ul> list containing our menu items. Feel free to add more menu items to fit your needs.

The CSS

The second step is the CSS. Let’s make a beautiful fixed menu! Paste the code below in your style.css (or whatever it is named) file.

#fixmenu{
	width: 1122px;
	height:30px;
	margin-left:-48px;
	padding:5px 48px;
	position:fixed;
	top:0;
	background:#7eb7d9;
	display:none;
}
	
.menu-fixed{
	width: 260px;
	float: right;
	text-align: right;
	padding:4px 0 5px 0;
	list-style-type:none;
}

.menu-fixed li{ display:inline; }

.menu-fixed a{
	ont-size:0.9em;
	color:#fff; 
	text-shadow:1px 1px #5E8BC5;
	padding:0 0 0 10px;
}

This is the exact CSS code I used on CatsWhoCode, so maybe you’ll have to adapt it a bit. If you have a look at your html document right now, nothing will show up. Why? because of the display:none; property that I added to the #fixmenu container. This is simply because we only want our fixed menu to be visible when the regular header menu can’t be seen due to scrolling.

The jQuery

So how do we detect when the page have been scrolled enough so the header of the site isn’t visible anymore? We’re going to use jQuery, of course. Paste this code in the bottom of your html document; in the footer.php file if you’re applying this to a WordPress blog. Of course, make sure you have included the jQuery framework before this code.

$(document).ready(function() {
	$(window).scroll(function(){
		if(document.body.scrollTop > 300)
			$('#fixmenu').fadeIn( "slow", function() { });
		else	
			$('#fixmenu').fadeOut( "slow", function() { });
	});

	$('a#srolltotop').click(function(){
		$('html, body').animate({scrollTop:0}, 100);
		return false;
	});
});

What this code do is pretty simple: On line 3, we detect if the document has been scrolled more than 300 pixels from the top. If yes, the fadeIn() jQuery function is called in order to display the fixed menu. On the other hand, the fadeOut() function is used to hide the menu when the top of the document is visible.

On line 9, I added a bit of code to detect when the #scrolltop link is activated. A click will smooth scroll to top of the document.



Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Jean-Baptiste Jung, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}