Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
smartphone global menu which using SELECT tag
<!DOCTYPE html>
<link href="//" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title>JS Bin</title>
<nav class="menu">
<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>
* {
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