Created
January 14, 2013 20:31
-
-
Save alexcican/4533131 to your computer and use it in GitHub Desktop.
Account Menu Dropdown (CSS3 & HTML5 Experiment)
This file contains hidden or 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
| <!doctype html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <link rel="shortcut icon" href="favicon.png" /> | |
| <title>Account Menu Dropdown – CSS3 & HTML5 experiment</title> | |
| <meta name="description" content="Card flip | SicanStudios.com"> | |
| <meta name="author" content="http://SicanStudios.com"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| @font-face { | |
| font-family: 'icons'; | |
| src: url('fontello.eot'); | |
| src: url('fontello.eot?#iefix') format('embedded-opentype'), | |
| url('fontello.woff') format('woff'), | |
| url('fontello.ttf') format('truetype'), | |
| url('fontello.svg#icons') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| a, a:visited, nav { | |
| -moz-transition: color 0.5s, background 0.7s, -moz-border-radius 0.7s, text-indent 0.2s; | |
| -webkit-transition: color 0.5s, background 0.7s, -webkit-border-radius 0.7s, text-indent 0.2s; | |
| -o-transition: color 0.5s, background 0.7s, border-radius 0.7s, text-indent 0.2s; | |
| transition: color 0.5s, background 0.7s, border-radius 0.7s, text-indent 0.2s; | |
| -webkit-tap-highlight-color: rgba(0,0,0,0); | |
| } | |
| body { | |
| -webkit-font-smoothing: antialiased; | |
| background: #7a8499; | |
| font-family: "PT Sans", sans-serif; | |
| font-size: 16px; | |
| color: #fff; | |
| margin: 15% auto 5%; | |
| width: 70%; | |
| max-width: 620px; | |
| position: relative; | |
| } | |
| a, a:visited { | |
| color: #5aedef; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| color: #95f1f2; | |
| } | |
| nav { | |
| height: 50px; | |
| width: 60px; | |
| display: block; | |
| position: absolute; | |
| z-index: 10; | |
| overflow-y: hidden; | |
| text-align: center; | |
| } | |
| nav:hover { | |
| width: 140px; | |
| height: 210px; | |
| } | |
| nav a { | |
| display: none; | |
| text-indent: -9999px; | |
| position: relative; | |
| height: 20px; | |
| padding: 13px 0; | |
| color: #fff !important; | |
| } | |
| nav a:first-child:hover { | |
| text-indent: -9999px; | |
| } | |
| nav:hover>a { | |
| display: block; | |
| } | |
| nav:hover>a:first-child:after { | |
| color: #6daeaf; | |
| background: #505664; | |
| } | |
| nav a:first-child { | |
| display: block; | |
| text-align: center; | |
| margin-bottom: 16px; | |
| cursor: default; | |
| } | |
| nav a:after { | |
| position: absolute; | |
| top: 0; | |
| padding: 12px 0; | |
| width: 60px; | |
| color: #fff; | |
| font-family: 'icons'; | |
| font-size: 24px; | |
| display: block; | |
| text-indent: 0; | |
| background: #6daeaf; | |
| } | |
| nav a:hover { | |
| text-indent: 0px; | |
| text-align: left; | |
| margin-left: 70px; | |
| } | |
| nav a:hover:after { | |
| color: #999; | |
| background: #fff; | |
| text-align: center; | |
| margin-left: -70px; | |
| } | |
| nav a:first-child:before { | |
| position: absolute; | |
| text-indent: 0; | |
| top: 55px; | |
| left: 23px; | |
| content: ""; | |
| width: 0; | |
| height: 0; | |
| border-left: 7px solid transparent; | |
| border-right: 7px solid transparent; | |
| border-bottom: 7px solid #6daeaf; | |
| } | |
| nav a:first-child:hover:before { | |
| margin-left: -70px; | |
| } | |
| nav a:first-child:after { | |
| left: 0; | |
| content: "m"; | |
| background: #656d7e; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| } | |
| nav a:nth-child(2):after { | |
| content: "p"; | |
| -webkit-border-top-left-radius: 5px; | |
| -webkit-border-top-right-radius: 5px; | |
| -moz-border-radius-topleft: 5px; | |
| -moz-border-radius-topright: 5px; | |
| border-top-left-radius: 5px; | |
| border-top-right-radius: 5px; | |
| } | |
| nav a:nth-child(3):after { | |
| content: "s"; | |
| } | |
| nav a:last-child:after { | |
| content: "e"; | |
| -webkit-border-bottom-left-radius: 5px; | |
| -webkit-border-bottom-right-radius: 5px; | |
| -moz-border-radius-bottomleft: 5px; | |
| -moz-border-radius-bottomright: 5px; | |
| border-bottom-left-radius: 5px; | |
| border-bottom-right-radius: 5px; | |
| } | |
| h1 { | |
| font-weight: normal | |
| } | |
| article { | |
| margin-left: 140px; | |
| } | |
| p { | |
| padding: 0.3em 0; | |
| } | |
| footer { | |
| margin-left: 140px; | |
| margin-top: 10%; | |
| font-size: 0.875em; | |
| } | |
| footer br { | |
| display: none; | |
| } | |
| .twitter-share-button { | |
| vertical-align: -15%; | |
| } | |
| @media only screen and (max-width : 768px) { | |
| body { | |
| width: 95%; | |
| margin-top: 5%; | |
| } | |
| article { | |
| padding-top: 70px; | |
| margin-left: 0; | |
| } | |
| nav a:hover { | |
| color: #6daeaf !important; | |
| background: #fff; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| margin-left: 53px; | |
| padding-left: 17px; | |
| } | |
| nav a:hover:after { | |
| margin-left: -70px; | |
| padding-left: 0 !important; | |
| } | |
| nav a:first-child:hover:after { | |
| margin-left: -53px !important; | |
| } | |
| nav a:first-child:hover { | |
| background: transparent; | |
| } | |
| nav a:first-child:hover:before { | |
| margin-left: -53px; | |
| } | |
| footer { | |
| margin-left: 0; | |
| } | |
| footer br { | |
| display: block; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav onmouseover=""> | |
| <a href="#" title="Menu">Menu</a> | |
| <a href="#" title="Account">Account</a> | |
| <a href="#" title="Settings">Settings</a> | |
| <a href="#" title="Email">Email</a> | |
| </nav> | |
| <article> | |
| <h1>Account Menu Dropdown</h1> | |
| <p>This is a pure CSS3 demo, no JavaScript required. It should work on all modern browsers, OSs, and mobile devices.</p> | |
| <p>On mobile Safari the dropdown might not be hidden on tapping elsewhere, but that’s OK—the dropdown is hidden once the user navigates to a link. | |
| <p>The icons are basically a font so they should scale nicely, and be retina-ready.</p> | |
| <p>Inspired by this <a href="http://dribbble.com/shots/893233-Simple-Account-Menu-Dropdown" target="_blank" title="Simple Account Menu Dropdown on Dribbble">Dribbble shot</a>.</p> | |
| </article> | |
| <footer> | |
| Made by <a href="http://twitter.com/sican" target="_blank" title="Alex Cican on Twitter">Alex Cican</a>. <br/>Source code on <a href="https://gist.github.com/4533131" target="_blank" title="Source code on GitHub">GitHub</a>. <a href="https://twitter.com/share" class="twitter-share-button" data-via="sican" data-related="sican">Tweet</a> | |
| <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> | |
| </footer> | |
| <script type="text/javascript"> | |
| /* iOS re-orientation fix */ | |
| if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { | |
| var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0]; | |
| if (viewportmeta) { | |
| viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0'; | |
| document.body.addEventListener('gesturestart', function() { | |
| viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6'; | |
| }, false); | |
| } | |
| /* iOS hides Safari address bar */ | |
| window.addEventListener("load",function() { | |
| setTimeout(function() { | |
| window.scrollTo(0, 1); | |
| }, 300); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Make sure to check out the live demo.