How to create the Apple iOS7 menu using CSS and HTML

Now that we all have iOS7 installed after several attempts to download I wanted to share with you something I have been working on for my Flat UI web apps, the creation of the iOS7 menu using CSS and HTML!

I have fallen in love with Flat UI and decided that the design Apple has taken for its context menu (the menu that appears when you press and hold a link) will be the design that I use for my “pop-up” elements in my web app UIs.

Today I am going to share with you the code to make your own context menu and show you where you can customize it to make it your own! Here is a look at what I am talking about, on the left is the native iOS7 context menu, on the right my CSS and HTML web app version.

iOS7 and CSS HTML context menu comparission image

As you can see there are some minor differences, primarily when Apple black’s out the background it takes up the entire interface, if I were operating my web app in fullscreen mode from the homescreen the whole application would also be blacked out.

I have also increased the spacing a bit with my buttons and positioning of the menu to be where the user has clicked, those are choices you can make on your own and customize later as well. Let’s get to it! First like any HTML standards compliant menu you have to start off with a list:

</pre>
<div id="ios7menu">
<ul>
	<li>Set New Status</li>
	<li><a href="javascript:void(0);" data-state="complete">Complete</a></li>
	<li><a href="javascript:void(0);" data-state="inprogress">In Progress</a></li>
	<li><a href="javascript:void(0);" data-state="waiting">Waiting</a></li>
</ul>
<ul>
	<li><a href="javascript:void(0);"><strong>Cancel</strong></a></li>
</ul>
</div>
<div id="blackout" style="display: none;"></div>
<pre>

In addition to the list I have wrapped the list in a div that I have given a unique ID, and I’ve added in the blackout background div that we will talk about later. Now onto the CSS!

#ios7menu{
  width: 96%;
  position: absolute;
  top: 25px;
  left: 2%;
  z-index: 150;
}
#ios7menu ul{
  background: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  margin: 0 0 20px 0;
  padding: 0 0 0 0;
}
#ios7menu ul li{
  list-style: none;
  text-align: center;
  color: #565656;
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 0 0;
  padding: 8px 0;
  height: 29px;
  border-bottom: solid 1px #e3e3e3;
  box-shadow: 0 1px 0 rgb(255,255,255);
}
#ios7menu ul li:last-child{
  border-bottom: none;
  box-shadow: none;
}
#ios7menu ul li a{
  display: block;
  color: #026fff;
  font-size: 22px;
  font-weight: 400;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
}
#blackout{
  background-color: rgba(0,0,0,0.35);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
}

A lot of the CSS is pretty straightforward but I want to go over a few things with you. The first is the use of rounded corners I have used the CSS3 standard box-radius but have chosen not include the browser specific versions of this code as my destination is only as an iOS web app. Other CSS3 features used are box-shadow to give the menu a little bit of pop from the background, but these are still really simple.

The CSS get’s really fun when we start dividing the list items. You will see that we have both a border-bottom and a box-shadow property. The combination of these two with box-shadow’s attributes set to 0 creates a double border effect, this effect is very faint in the Apple UI but contributes to the subtleties that really make Flat UI pop while still being clean and clear.

Above I take advantage of the CSS3 selector :last-child on the menu’s last li element, this prevents a little white line appearing outside of the rounded menu if we otherwise didn’t include this.

To make our links clickable across the entire menu we simply add display:block to the css and away we click!

Now the most important part about Flat UI, TYPOGRAPHY! The Flat UI is really dependant on crisp and clean typography, I am using Helvetica Neue which is built into the iOS7 operating system however it may not be installed on your machine you are testing with. To make the typography more crisp we use font-weight to set the weight lower than the standard 500-800(depending on the font). When you do this you may find the letters are quite close together, once again you need to test on an actual device as the letter-spacing properties on the iOS7 software vs Chrome are quite different.

Finally you need to blackout the rest of your application when the menu comes up. You will need to employ some type of javascript to hide and show the menu when someone clicks the link you want to open the menu. In the css you can see that we have set the background-position to fixed, this is important so that the entire background remains covered when the user scrolls. I have also used z-index to make sure that this div shows up behind the menu, and on the menu you can see has a higher z-index.

Thats it! I hope you guys like this code sample on how to create the iOS7 menu with CSS and HTML if you have any questions on how to implement it please leave a comment below and I will get back to you as soon as I can! If you like my skill set and want to talk about an upcoming project you have please feel free to use my contact form to get in touch!

Tags:

Subscribe

Subscribe to our e-mail newsletter to receive updates.

No comments yet.

Leave a Reply