how to make a navigation bar for a mobile device

I need the code which would make a button display the navigation bar and hide it when not needed, like the one at apple.com. here is my code so far and please point out any mistakes or improvements! May i just add that this is for a mobile device!

.nav {
background: -webkit-linear-gradient(top left, #3c8dbc 0%, #307196 100%);
background: linear-gradient(to bottom right, #3c8dbc 0%, #307196 100%);
width:150%;
height:14%;
position:fixed;
left:0;
top:0;
list-style-type:none;
text-decoration:none;
}

.nav ul li {
list-style-type:none;
text-decoration:none;
color:white;
padding:2%;
font-size:80%;
list-style-position: inside;
display:inline-block;
background-color:#63A4C9;
border:2px solid white;
width:10%;
width:60%;
top:14%;
left:0;
}

.nav a:link {
color:white;
padding:1%;
padding-left:2%;
text-decoration:none;
list-style-position: inside;
list-style-type:none;
}
.nav a:hover {
background-color:white;
color:#3c8dbc;
}
.nav a:active {
color:white;
background-color:#3c8dbc;
}
.nav a:visited {
color:white;
background-color:#3c8dbc;
}

Thank you :)