Can someone help me with the code to create a button that displays the navigation bar when needed and hides it when not in use, similar to the one on apple.com? I'm working on this for a mobile device and would appreciate any suggestions or corrections! Here's what I have so far:
.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;
}
Your feedback is greatly appreciated :)