Roll-out Navigation with CSS3 Transitions

A quick solution for simple roll-out hamburger navigation created with CSS3.

Hamburger navigation is quite popular nowadays. Last year, there was an extensive debate whether it should be used or not. A lot of people in the web design and development industry questioned this particular design solution.

If you run a quick search on Google for hamburger icon usage, you will see that almost every design blog came up with a negative opinion about it. Most of the people claim that the content revealed by this icon is less discoverable and efficient.

I did a quick look on my smartphone and opened 7-8 applications that I use every day and guess what the hamburger was present in each of the apps. And I am talking about three Google apps, Feedly, Prismatic, Solmail, Viber… For a solution that is so hatred it is a bit surprising that is so much used.

Actually, this long introduction is probably not needed for the solution I am presenting today. But I thought that Designify readers should know the facts before using the roll-out CSS3 nav I am presenting today.

This type of navigation is suitable for websites probably and not for mobile apps but I thought that it is a nice way to present navigation content by using CSS3 transitions.

Let’s get to it finally…

Roll-out Navigation with CSS3 Transitions

HTML

First of all, you need to create the markup for the icon and navigation. Create a header containing a button for the hamburger icon and a simple navigation ul.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

<header>
 <button class="hamburger hamburger-x">
 <span>Menu</span>
 </button>
 
 <nav>
 <ul id="header-nav" class="menu">
 <li class="menu-item"><a href="#">HTML</a></li>
 <li class="menu-item"><a href="#">CSS</a></li>
 <li class="menu-item"><a href="#">Javascript</a></li>
 <li class="menu-item"><a href="#">PHP</a></li>
 <li class="menu-item"><a href="#">Wordpress</a></li>
 <li class="menu-item"><a href="#">Drupal</a></li>
 </ul>
 </nav>
 </header>

CSS

After the main structure, you will need some CSS where the transitions are defined.

header nav {
	height: 0;
	left: -1px;
	position: absolute;
	right: 0;
	top: 96px;
	z-index: 2;
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	-o-transition: -o-transform 0.5s;
	transition: transform 0.5s;
}
@media (min-width: 685px) {
header nav {
	left: 100px;
	right: auto;
	top: 25px;
	z-index: 2;
}
}
header nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
header nav ul li {
	background: rgba(26, 26, 26, 0.95);
	float: left;
	width: 33.33333333333%;
	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	-o-transition: -o-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	-o-transition: -o-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: translate(-700px, 0);
	-moz-transform: translate(-700px, 0);
	-ms-transform: translate(-700px, 0);
	-o-transform: translate(-700px, 0);
	transform: translate(-700px, 0);
}
@media (min-width: 685px) {
header nav ul li {
	background: transparent;
	float: left;
	width: auto;
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	-o-transition: -o-transform 0.4s;
	transition: transform 0.4s;
}
}
header nav ul li:nth-child(2) {
	-webkit-transition-delay: 0.05s;
	-moz-transition-delay: 0.05s;
	transition-delay: 0.05s;
}
header nav ul li:nth-child(3) {
	-webkit-transition-delay: 0.1s;
	-moz-transition-delay: 0.1s;
	transition-delay: 0.1s;
}
header nav ul li:nth-child(4) {
	-webkit-transition-delay: 0.15s;
	-moz-transition-delay: 0.15s;
	transition-delay: 0.15s;
}
header nav ul li:nth-child(5) {
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
header nav ul li:nth-child(6) {
	-webkit-transition-delay: 0.25s;
	-moz-transition-delay: 0.25s;
	transition-delay: 0.25s;
}
header nav ul li a {
	color: #fff;
	display: block;
	font-size: 1.25em;
	line-height: 100px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
@media (min-width: 685px) {
header nav ul li a {
	border-bottom: 4px solid #fff;
	color: #333;
	padding: 15px 15px;
	line-height: 1em;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
}
header nav ul li a:hover {
	background: #eee;
	border-color: #ddd;
	color: #999;
}
header.nav-open nav {
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
}
header.nav-open nav ul li {
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
}
header .hamburger {
	appearance: none;
	border: none;
	border-radius: none;
	box-shadow: none;
	cursor: pointer;
	display: block;
	font-size: 0;
	height: 96px;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	text-indent: -9999px;
	width: 96px;
	z-index: 10;
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	-o-transition: background 0.3s;
	transition: background 0.3s;
}
header .hamburger:focus {
	outline: none;
}
header .hamburger span {
	background: #fff;
	display: block;
	height: 8px;
	left: 18px;
	position: absolute;
	right: 18px;
	top: 44px;
}
header .hamburger span:before, header .hamburger span:after {
	background-color: #fff;
	content: "";
	display: block;
	height: 8px;
	left: 0;
	position: absolute;
	width: 100%;
}
header .hamburger span:before {
	top: -20px;
}
header .hamburger span:after {
	bottom: -20px;
}
header .hamburger.hamburger-x {
	background-color: #ff3264;
}
header .hamburger.hamburger-x span {
	-webkit-transition: background 0s 0.3s;
	-moz-transition: background 0s 0.3s;
	-o-transition: background 0s 0.3s;
	transition: background 0s 0.3s;
}
header .hamburger.hamburger-x span:before, header .hamburger.hamburger-x span:after {
	-webkit-transition-duration: 0.3s, 0.3s;
	-moz-transition-duration: 0.3s, 0.3s;
	-o-transition-duration: 0.3s, 0.3s;
	transition-duration: 0.3s, 0.3s;
	-webkit-transition-delay: 0.3s, 0s;
	-moz-transition-delay: 0.3s, 0s;
	-o-transition-delay: 0.3s, 0s;
	transition-delay: 0.3s, 0s;
}
header .hamburger.hamburger-x span:before {
	-webkit-transition-property: top, transform;
	-moz-transition-property: top, transform;
	-o-transition-property: top, transform;
	transition-property: top, transform;
}
header .hamburger.hamburger-x span:after {
	-webkit-transition-property: bottom, transform;
	-moz-transition-property: bottom, transform;
	-o-transition-property: bottom, transform;
	transition-property: bottom, transform;
}
header .hamburger.hamburger-x.is-active {
	background-color: #cb0032;
}
header .hamburger.hamburger-x.is-active span {
	background: none;
}
header .hamburger.hamburger-x.is-active span:before {
	top: 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
header .hamburger.hamburger-x.is-active span:after {
	bottom: 0;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
header .hamburger.hamburger-x.is-active span:before, header .hamburger.hamburger-x.is-active span:after {
	-webkit-transition-delay: 0s, 0.3s;
	-moz-transition-delay: 0s, 0.3s;
	-o-transition-delay: 0s, 0.3s;
	transition-delay: 0s, 0.3s;
}
header .hamburger.hamburger-x:hover {
	background-color: #cb0032;
}

JS

To finish it off and have a full working solution, a little JS is required. This code snippet activates the toggle of the hamburger menu. You also need to include the latest jQuery library.

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>(function($) {
 $(".hamburger").click(function(event) {
 event.preventDefault();
 $(this).toggleClass("is-active");
 $("header").toggleClass("nav-open");
 });
})(jQuery);
</script>

That’s it. If you followed the steps you should have a fully working animated navigation that is triggered by the controversial hamburger icon. In case of an issue, do not hesitate to leave a comment below.

Download CSS Rollout Navigation DEMO


Credit: Laurel Streng on Codepen


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *