Recreate Path’s IOS Style Navigation Using HTML, CSS3 & Jquery
Written by Aaron Lumsden on 20 Sep 2012
In this tutorial I show you how to recreate Paths IOS style menu using HTML, CSS3 and a sprinkling of Jquery magic.
UI/ UX designers are constantly trying to push forward with cool new ways to interact with our devices. For the majority of the past we have been focussed on navigating a website by using the standard menu across the top or in the sidebar. Since the advent of mobile apps we are being introduced to new ways to navigate.
What we’ll be creating
This has been tested in Chrome, Safari, Firefox & Opera
The Path menu makes you hit one button from which a host of sub menu options spring out from the original menu button.
An unique approach to navigation has been set out by the guys at Path inc who are the people behind Path.
For those who are unfamiliar with Path it is described as:
“A the personal network where you connect with family and close friends. By limiting you to 150 connections, Path is a safe and trusted place to share the moments that matter with the people who matter most.”
The HTML
The html markup for the menu really is quite simple. We start by creating a div with an id title “container” that will hold the menu. This is followed by the main button which is an anchor tag with an id of “centerbutton”. We then need to create an unordered list that we give a class of “circles”. With each list item representing a circlular sub menu item. Within each list item we add a span with a class that related to what the menu item is. These spans are just so that we can store the image for them items. That’s basically all there is to the markup. Simple!
<div id="menu"> <a id="centerbutton" href="" title="">+</a> <ul class="circles"> <li><a href="" title=""><span class="camera"></span></a></li> <li><a href="" title=""><span class="location"></span></a></li> <li><a href="" title=""><span class="music"></span></a></li> <li><a href="" title=""><span class="chat"></span></a></li> <li><a href="" title=""><span class="moon"></span></a></li> </ul> </div>
The CSS
I’ve chosen to only display the -webkit prefix for the tutorial below but you can download the source code which contains the other vendor prefixes.
The CSS is a little bit more than the HTML markup but is still nothing to be afraid of. Firstly we give the #container some position styling. This just centers it nicely in the middle of the screen.
#container {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -250px;
}
Next we create the styling for our main button. By setting the width and height to 66px and creating the border-radius at 37px we are able to create a nice rounded circular shape using CSS. Usually you would do it half of the width but in this case we need to take into consideration the 4px white border that we add to it. We have then again positioned it in the center both top and bottom. We then need to add a gradient with a sudden stop. To create your own CSS3 gradients easily you can use this CSS3 generator. After this we position the text in the center of the button. In this case the text is the ‘x’ that we have used in our HTML markup that will act as a close or open button. Finally we add a CSS3 transition so that the button can be animated.
#centerbutton {
display: block;
width: 66px;
height: 66px;
border-radius: 37px;
background: rgb(213,46,23); /* Old browsers */
background: -webkit-linear-gradient(top, rgba(213,46,23,1) 50%, rgba(230,79,49,1) 50%);
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
color: white;
text-decoration: none;
text-align: center;
line-height: 56px;
font-size: 63px;
font-weight: bold;
z-index: 100;
border: 4px solid white;
-webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,.3);
-webkit-transition: all .1s ease-in-out;
}
We also need to add a little bit of extra code to make the line-height of the ‘+’ play correctly in Firefox.
@-moz-document url-prefix() {
#centerbutton {
line-height:65px;
}
}
The next two steps are to create some different states for the #centerbutton. The first one is to rotate it by ‘-45deg’ so that it will rotate from ‘+’ to an ‘x’ when we click on it. We will add this ‘click’ action later using Jquery. We also add an active state that is scaled up to ’1.3′ its original size. This will make the button larger.
#centerbutton.centerbuttonon {
-webkit-transform: rotate(-45deg);
}
#centerbutton:active {
-webkit-transform: scale(1.3);
}
Now we have the main button complete. Its time to move onto the sub category navigation holders. We start by positioning the container ‘.circles’. Once this has done we now need to create the list items. The way these will work is by creating each list item to be 200px tall and 50px width. Inside these ‘li’ containers will sit the anchor tag that will act as our circle. The reason we create the list items like this is so that once we have created all 5 of them we can rotate each one by a certain amount of degrees so that they all flow round in the quarter circle equally. The illustration Below demonstrates this.
Each ‘li’ item contains the circle and is rotated using CSS3 transforms to allow the mini circles to form a perfect quarter circle.
.circles {
position: absolute;
top: 50%;
left: 50%;
margin-top: -208px;
margin-left: -47px;
}
.circles li {
position: absolute;
width: 50px;
height: 200px;
display: inline-block;
-webkit-transform-origin: 40px 200px;
position: absolute;
}
.circles li a.out:hover {
-webkit-transform: scale(1.5) rotate(-30deg);
}
Creating the sub Navigation Circles
The actual circle’s are created in a similar way to the main button but they’re just a little smaller. We also add a class of ‘out’ which will become active for when the main button has been pressed. This will be added later using Jquery. This just rotates the circles to give them a spin effect and adds a drop shadow.
.circles li a {
background-color: #44403d;
width: 50px;
height: 50px;
border-radius: 29px;
display: block;
position: absolute;
-webkit-transition: all .3s cubic-bezier(.36,.88,.26,1.26);
color: white;
line-height: 50px;
text-align: center;
bottom: -30px;
text-decoration: none;
border: 4px solid white;
}
.circles li a.out {
bottom: 200px;
-webkit-transform: rotate(360deg);
-webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,.3);
}
We now rotate each link holder so that it gives each containing anchor circle its position when the mini circles have all popped out. Each container is rotated by 22deg from the previous list item.
.circles li:nth-child(1) {
position: absolute;
top: 0px;
left: 0px;
-webkit-transform: rotate(0deg);
}
.circles li:nth-child(2) {
position: absolute;
top: 0px;
left: 0px;
-webkit-transform: rotate(22deg);
}
.circles li:nth-child(3) {
position: absolute;
top: 0px;
left: 0px;
-webkit-transform: rotate(44deg);
}
.circles li:nth-child(4) {
position: absolute;
top: 0px;
left: 0px;
-webkit-transform: rotate(66deg);
}
.circles li:nth-child(5) {
position: absolute;
top: 0px;
left: 0px;
-webkit-transform: rotate(90deg);
}
To give even more spring to our animation, we add a little delay to each of the circles so that they all pop out sequentially.
.circles li:nth-child(1) a {
-webkit-transition-delay: .30s;
}
.circles li:nth-child(2) a {
-webkit-transition-delay: .25s;
}
.circles li:nth-child(3) a {
-webkit-transition-delay: .20s;
}
.circles li:nth-child(4) a {
-webkit-transition-delay: .15s;
}
.circles li:nth-child(5) a {
-webkit-transition-delay: .10s;
}
.circles li:nth-child(6) a {
-webkit-transition-delay: .05s;
}
We’re almost done with the CSS but before we’re finished its time to add the icons to each circle. We do this using a sprite image that I created using spritepad. This is a great little tool for making sprites easily. We also add a little but of rotation so that each item sits correctly when it is popped out.
.camera,.chat,.location,.moon,.music {
background-image: url(../images/sprites.png);
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -11px;
margin-left: -11px;
}
.camera {
background-position: 0 0;
width: 22px;
height: 22px;
}
.location {
background-position: -27px 0;
width: 22px;
height: 22px;
-webkit-transform: rotate(-20deg);
}
.music {
background-position: -53px 0;
width: 22px;
height: 22px;
-webkit-transform: rotate(-40deg);
}
.chat {
background-position: -80px 0;
width: 22px;
height: 22px;
-webkit-transform: rotate(-70deg);
}
.moon {
background-position: -107px 0;
width: 22px;
height: 22px;
-webkit-transform: rotate(-80deg);
}
The Jquery
The jquery is super simple as well. We create the document ready function and then on click of the main button we toggle the class ‘.out’ onto the circle anchor tags and also toggle the class on the ‘#centerbutton’ to ‘.centerbuttonon’. This allows the main button to rotate from the ‘+’ position to the ‘x’ position.
jQuery(document).ready(function($) {
$('#centerbutton').click(function(e) {
e.preventDefault();
$('.circles li a').toggleClass('out');
$(this).toggleClass('centerbuttonon');
});;
});
Wrapping it up
We’re now complete, we have now recreated the Path menu using CSS3 & jquery. You can add more bounce to the animation by using the CSS3 transition property ‘cubic-bezier’, although this isn’t supported by all modern browsers. This allows us to control our own easing effect. We just need to replace the ‘ease-in-out’ effect on ‘.circles li a’ with the one below.
-webkit-transition: all .3s cubic-bezier(.36,.88,.26,1.26); -moz-transition: all .3s cubic-bezier(.36,.88,.26,1.26); -o-transition: all .3s cubic-bezier(.36,.88,.26,1.26); -ms-transition: all .3s cubic-bezier(.36,.88,.26,1.26); transition: all .3s cubic-bezier(.36,.88,.26,1.26);
Have you tried using this effect or similar on any navigation items. Let me know if you have before or let me know if you get stuck and I’ll be happy to help!
An Introduction to CSS Variables
Responsive Web Design Made Simple with Adobe Edge Reflow
A Brief History of the World Wide Web
A small pet peeve, if I may:
Why does the gloss rotate with the button? Assuming the ‘light source’ is static, the position where the light hits the glossy button will not change.
Cheers,
Stuart
Good observation Stuart,
To solve this you can always add the transform:rotate to the actual ‘x’ as opposed to the whole button. This way only that will rotate and the light gloss reflection will remain static.
Thanks Aaron, great tutorial, well explained and works great
Cheers