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.

<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.

Related post:  20 Useful Lightbox Plugins for WordPress

Download CSS Rollout Navigation DEMO


Credit: Laurel Streng on Codepen

Divi WordPress Theme

You may also like...

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close