smartphone global menu which using SELECT tag
<!DOCTYPE html> | |
<html> | |
<head> | |
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> | |
<link href="style.css" rel="stylesheet" type="text/css" /> | |
<meta charset="utf-8"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<nav class="menu"> | |
<p> MENU </p> | |
<select class="nav-select"> | |
<option value="" disabled selected> - select - </option> | |
<option value="email">E-Mail</option> | |
<option value="twitter">Twitter</option> | |
<option value="linkedin">LinkedIn</option> | |
</select> | |
</nav> | |
</body> | |
</html> |
* { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
} | |
.menu p { | |
font-family: FontAwesome; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
background: #33a; | |
line-height: 50px; | |
text-align: right; | |
color: #FFF; | |
} | |
.nav-select { | |
position: absolute; | |
top: 0px; | |
-webkit-appearance: button; | |
-moz-appearance: button; | |
appearance: button; | |
-webkit-border-radius: 0; | |
-moz-border-radius: 0; | |
border-radius: 0; | |
width: 100%; | |
height: 50px; | |
font-size: 18px; | |
text-align: right; | |
background: transparent; | |
color: #33a; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment