Skip to content

Instantly share code, notes, and snippets.

@bellflower2015

bellflower2015/index.html

Created June 23, 2015 11:41
Show Gist options
  • Save bellflower2015/99833fcce8ed52c3480b to your computer and use it in GitHub Desktop.
Save bellflower2015/99833fcce8ed52c3480b to your computer and use it in GitHub Desktop.
Download ZIP
smartphone global menu which using SELECT tag
Raw
index.html
<!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>&#xf0c9;&nbsp;&nbsp;MENU&nbsp;&nbsp;</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>
Raw
style.css
* {
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