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