Enjoy!
A Pen by John Urbank on CodePen.
Created
December 30, 2016 03:14
-
-
Save Maux/73cb521928c18f9d14e8952f7d400317 to your computer and use it in GitHub Desktop.
Simple, CSS only, responsive menu
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
| <head> | |
| <meta name="viewport" content="width=device-width"> | |
| </head> | |
| <div class="wrap"> | |
| <span class="decor"></span> | |
| <nav> | |
| <ul class="primary"> | |
| <li> | |
| <a href="">Dog</a> | |
| <ul class="sub"> | |
| <li><a href="">Bulldog</a></li> | |
| <li><a href="">Mastiff</a></li> | |
| <li><a href="">Labrador</a></li> | |
| <li><a href="">Mutt</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href="">Cat</a> | |
| <ul class="sub"> | |
| <li><a href="">Tabby</a></li> | |
| <li><a href="">Black Cat</a></li> | |
| <li><a href="">Wrinkly Cat</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href="">Bird</a> | |
| <ul class="sub"> | |
| <li><a href="">Humming Bird</a></li> | |
| <li><a href="">Hawk</a></li> | |
| <li><a href="">Crow</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href="">Horse</a> | |
| <ul class="sub"> | |
| <li><a href="">Brown Horse</a></li> | |
| <li><a href="">Race Horse</a></li> | |
| <li><a href="">Tall Horse</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href="">Burger</a> | |
| <ul class="sub"> | |
| <li><a href="">Cheesy</a></li> | |
| <li><a href="">More Ketchup</a></li> | |
| <li><a href="">Some Mustard</a></li> | |
| <li><a href="">Extra Butter</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> |
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
| /* A simple, css only, (some-what) responsive menu */ | |
| body { | |
| background: #ccc; | |
| font-family: helvetica, arial, serif; | |
| font-size: 13px; | |
| text-transform: uppercase; | |
| text-align: center; | |
| } | |
| .wrap { | |
| display: inline-block; | |
| -webkit-box-shadow: 0 0 70px #fff; | |
| -moz-box-shadow: 0 0 70px #fff; | |
| box-shadow: 0 0 70px #fff; | |
| margin-top: 40px; | |
| } | |
| /* a little "umph" */ | |
| .decor { | |
| background: #6EAF8D; | |
| background: -webkit-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%); | |
| background: -moz-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%); | |
| background: -o-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%); | |
| background: linear-gradient(left, white 50%, #6EAF8D 50%); | |
| background-size: 50px 25%;; | |
| padding: 2px; | |
| display: block; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: #fff; | |
| display: block; | |
| } | |
| ul { | |
| list-style: none; | |
| position: relative; | |
| text-align: left; | |
| } | |
| li { | |
| float: left; | |
| } | |
| /* clear'n floats */ | |
| ul:after { | |
| clear: both; | |
| } | |
| ul:before, | |
| ul:after { | |
| content: " "; | |
| display: table; | |
| } | |
| nav { | |
| position: relative; | |
| background: #2B2B2B; | |
| background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%); | |
| background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%); | |
| background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%); | |
| background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%); | |
| text-align: center; | |
| letter-spacing: 1px; | |
| text-shadow: 1px 1px 1px #0E0E0E; | |
| -webkit-box-shadow: 2px 2px 3px #888; | |
| -moz-box-shadow: 2px 2px 3px #888; | |
| box-shadow: 2px 2px 3px #888; | |
| border-bottom-right-radius: 8px; | |
| border-bottom-left-radius: 8px; | |
| } | |
| /* prime */ | |
| ul.primary li a { | |
| display: block; | |
| padding: 20px 30px; | |
| border-right: 1px solid #3D3D3D; | |
| } | |
| ul.primary li:last-child a { | |
| border-right: none; | |
| } | |
| ul.primary li a:hover { | |
| color: #000; | |
| } | |
| /* subs */ | |
| ul.sub { | |
| position: absolute; | |
| z-index: 200; | |
| box-shadow: 2px 2px 0 #BEBEBE; | |
| width: 35%; | |
| display:none; | |
| } | |
| ul.sub li { | |
| float: none; | |
| margin: 0; | |
| } | |
| ul.sub li a { | |
| border-bottom: 1px dotted #ccc; | |
| border-right: none; | |
| color: #000; | |
| padding: 15px 30px; | |
| } | |
| ul.sub li:last-child a { | |
| border-bottom: none; | |
| } | |
| ul.sub li a:hover { | |
| color: #000; | |
| background: #eeeeee; | |
| } | |
| /* sub display*/ | |
| ul.primary li:hover ul { | |
| display: block; | |
| background: #fff; | |
| } | |
| /* keeps the tab background white */ | |
| ul.primary li:hover a { | |
| background: #fff; | |
| color: #666; | |
| text-shadow: none; | |
| } | |
| ul.primary li:hover > a{ | |
| color: #000; | |
| } | |
| @media only screen and (max-width: 600px) { | |
| .decor { | |
| padding: 3px; | |
| } | |
| .wrap { | |
| width: 100%; | |
| margin-top: 0px; | |
| } | |
| li { | |
| float: none; | |
| } | |
| ul.primary li:hover a { | |
| background: none; | |
| color: #8B8B8B; | |
| text-shadow: 1px 1px #000; | |
| } | |
| ul.primary li:hover ul { | |
| display: block; | |
| background: #272727; | |
| color: #fff; | |
| } | |
| ul.sub { | |
| display: block; | |
| position: static; | |
| box-shadow: none; | |
| width: 100%; | |
| } | |
| ul.sub li a { | |
| background: #272727; | |
| border: none; | |
| color: #8B8B8B; | |
| } | |
| ul.sub li a:hover { | |
| color: #ccc; | |
| background: none; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment