Created
August 19, 2012 16:55
-
-
Save joesteinkamp/3396230 to your computer and use it in GitHub Desktop.
iOS Menu List, CSS Only
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul> | |
<li><a href="">Item One</a></li> | |
<li><a href="">Item Two</a></li> | |
<li><a href="">Item Three</a></li> | |
<li><a href="">Item Four</a></li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ul { | |
list-style-type: none; | |
padding: 0; | |
background: #fff; | |
} | |
a { | |
display: block; | |
padding: 9px 10px 5px 10px; | |
border-bottom: 1px solid #E7E7E7; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
text-decoration: none; | |
font-family: Helvetica, Arial, sans-serif; | |
font-size: 18px; | |
font-weight: bold; | |
color: #000; | |
} | |
a:hover, a:active { | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#058cf5), color-stop(100%,#015ee6)); | |
background: -webkit-linear-gradient(top, #058cf5 0%,#015ee6 100%); | |
background: linear-gradient(top, #058cf5 0%,#015ee6 100%); | |
color: #fff; | |
} | |
a:after { | |
content: "〉"; | |
float: right; | |
font-weight: bold; | |
color: #808080; | |
font-size: 13px; | |
text-shadow: 1px 0 1px #808080; | |
} | |
a:hover:after, a:hover:after { | |
color: #fff; | |
text-shadow: 1px 0 1px #fff; | |
} | |
/* IGNORE: CodePen only */ | |
body {margin:0;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment