Instantly share code, notes, and snippets.
Last active
November 11, 2017 15:39
-
Save stvrbbns/735e6fadb6ea64a6f2dc to your computer and use it in GitHub Desktop.
Dark-theme navigation/menu bar, animated with CSS; requires a little jQuery JavaScript for mobile.
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
/* Dark-theme navigation/menu bar, animated with CSS; requires a little jQuery JavaScript for mobile. | |
* See: http://blog.logsine.com/2014/05/navigation-bar-gadget.html | |
* - http://red-team-design.com/css3-dropdown-menu/ | |
* - http://red-team-design.com/css3-animated-dropdown-menu/ ("© 2016 Catalin Rosu. Feel free to use the articles you may find here in your projects, with or without any attribution.") | |
* | |
* Stephen T. Robbins made substantial changes to the initial (Red Team Design) CSS: | |
* - matched the :hover styling to the jQuery-UI "Dark Hive" theme. | |
* - added support for use as a bottom-up, right-to-left (expand-right) menu bar | |
* - added support for use as a dropdown, left-to-right (expand-left) menu bar | |
* - added support for disabling menu items | |
* | |
* Copyright (C) 2016 Stephen T. Robbins | |
* License: MIT : https://choosealicense.com/licenses/mit/ | |
* : CC0 : https://creativecommons.org/publicdomain/zero/1.0/ | |
*/ | |
/* TODO: | |
* - add support for use as a bottom-up, left-to-right (expand-left) menu bar | |
*/ | |
/* REQUIRES (or equivalent) | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |
<script type="text/javascript"> | |
jQuery( document ).ready(function( $ ) { | |
// not linked | |
$('.menubar a.no-event').on('click', function(event){ | |
event.preventDefault(); | |
}); | |
// Mobile | |
$('.menubar-wrap').prepend('<div id="menubar-trigger">Menu</div>'); | |
$('#menubar-trigger').on('click', function(){ | |
$('.menubar').slideToggle(); | |
}); | |
// iPad | |
var isiPad = navigator.userAgent.match(/iPad/i) != null; | |
if (isiPad) $('.menubar ul').addClass('no-transition'); | |
}); | |
</script> | |
*/ | |
/* EXAMPLE | |
<nav class="menubar-wrap"> | |
<ul class="menubar"> | |
<li><a href="/">Home</a></li> | |
<li> | |
<a href="">Second</a> | |
<ul> | |
<li> | |
<a href="" class="no-event">Child</a> | |
<ul> | |
<li><a href="">Grandchild</a></li> | |
<li><a href="" class="disabled">Grandchild</a></li> | |
<li><a href="">Grandchild</a></li> | |
</ul> | |
</li> | |
</ul> | |
</li> | |
<li> | |
<a href="">Third</a> | |
<ul> | |
<li><a href="">Child</a></li> | |
</ul> | |
</li> | |
<li><a href="">Last</a></li> | |
</ul> | |
</nav> | |
*/ | |
.menubar, .menubar ul, .menubar li { | |
margin: 0px; | |
padding: 0px; | |
list-style: none; | |
} | |
.menubar { | |
width: auto; | |
background-color: #111; | |
background-image: -moz-linear-gradient(#444, #111); | |
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); | |
background-image: -webkit-linear-gradient(#444, #111); | |
background-image: -o-linear-gradient(#444, #111); | |
background-image: -ms-linear-gradient(#444, #111); | |
background-image: linear-gradient(#444, #111); | |
-moz-border-radius: 6px; | |
-webkit-border-radius: 6px; | |
border-radius: 6px; | |
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; | |
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; | |
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; | |
} | |
.menubar:before, | |
.menubar:after { | |
content: ""; | |
display: table; | |
} | |
.menubar:after { | |
clear: both; | |
} | |
.menubar { | |
zoom: 1; | |
} | |
.menubar li { | |
float: left; | |
border-right: 1px solid #222; | |
-moz-box-shadow: 1px 0 0 #444; | |
-webkit-box-shadow: 1px 0 0 #444; | |
box-shadow: 1px 0 0 #444; | |
position: relative; | |
} | |
.menubar a { | |
cursor: pointer; | |
float: left; | |
padding: 12px 30px; | |
color: #ddd; | |
text-transform: uppercase; | |
font: bold 12px Arial, Helvetica; | |
text-decoration: none; | |
text-shadow: 0 1px 0 #000; | |
} | |
.menubar a:hover { | |
background-color: #003147; | |
background-image: -moz-linear-gradient(#32596b, #003147); | |
background-image: -webkit-gradient(linear, left top, left bottom, from(#32596b), to(#003147)); | |
background-image: -webkit-linear-gradient(#32596b, #003147); | |
background-image: -o-linear-gradient(#32596b, #003147); | |
background-image: -ms-linear-gradient(#32596b, #003147); | |
background-image: linear-gradient(#32596b, #003147); | |
color: #fff; | |
} | |
.menubar li:hover > a { | |
color: #fff; | |
} | |
.menubar ul { | |
margin: 20px 0 0 0; | |
opacity: 0; | |
visibility: hidden; | |
position: absolute; | |
top: 38px; | |
left: 0; | |
z-index: 1; | |
background: #444; | |
background: -moz-linear-gradient(#444, #111); | |
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); | |
background: -webkit-linear-gradient(#444, #111); | |
background: -o-linear-gradient(#444, #111); | |
background: -ms-linear-gradient(#444, #111); | |
background: linear-gradient(#444, #111); | |
-moz-box-shadow: 0 -1px rgba(255,255,255,.3); | |
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); | |
box-shadow: 0 -1px 0 rgba(255,255,255,.3); | |
-moz-border-radius: 3px; | |
-webkit-border-radius: 3px; | |
border-radius: 3px; | |
-webkit-transition: all .2s ease-in-out; | |
-moz-transition: all .2s ease-in-out; | |
-ms-transition: all .2s ease-in-out; | |
-o-transition: all .2s ease-in-out; | |
transition: all .2s ease-in-out; | |
} | |
.menubar li:hover > ul { | |
opacity: 1; | |
visibility: visible; | |
margin: 0; | |
} | |
.menubar ul ul { | |
top: 0; | |
left: 150px; | |
margin: 0 0 0 20px; | |
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); | |
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); | |
box-shadow: -1px 0 0 rgba(255,255,255,.3); | |
} | |
.menubar ul li { | |
float: none; | |
display: block; | |
border: 0; | |
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; | |
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; | |
box-shadow: 0 1px 0 #111, 0 2px 0 #666; | |
} | |
.menubar ul li:last-child { | |
-moz-box-shadow: none; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.menubar ul a { | |
border: 1px solid #111; | |
padding: 10px; | |
width: 130px; | |
display: block; | |
white-space: nowrap; | |
float: none; | |
text-transform: none; | |
} | |
.menubar ul a:hover { | |
border: 1px solid #0b93d5; | |
background-color: #003147; | |
background-image: -moz-linear-gradient(#32596b, #003147); | |
background-image: -webkit-gradient(linear, left top, left bottom, from(#32596b), to(#003147)); | |
background-image: -webkit-linear-gradient(#32596b, #003147); | |
background-image: -o-linear-gradient(#32596b, #003147); | |
background-image: -ms-linear-gradient(#32596b, #003147); | |
background-image: linear-gradient(#32596b, #003147); | |
color: #fff; | |
} | |
.menubar li:first-child > a { | |
-moz-border-top-left-radius: 6px; | |
-moz-border-bottom-left-radius: 6px; | |
-webkit-border-top-left-radius: 6px; | |
-webkit-border-bottom-left-radius: 6px; | |
border-top-left-radius: 6px; | |
border-bottom-left-radius: 6px; | |
} | |
.menubar ul li:first-child > a { | |
-moz-border-top-left-radius: 3px; | |
-moz-border-top-right-radius: 3px; | |
-moz-border-bottom-right-radius: 0px; | |
-moz-border-bottom-left-radius: 0px; | |
-webkit-border-top-left-radius: 3px; | |
-webkit-border-top-right-radius: 3px; | |
-webkit-border-bottom-right-radius: 0px; | |
-webkit-border-bottom-left-radius: 0px; | |
border-top-left-radius: 3px; | |
border-top-right-radius: 3px; | |
border-bottom-right-radius: 0px; | |
border-bottom-left-radius: 0px; | |
} | |
.menubar ul li:first-child > a:after { | |
content: ''; | |
position: absolute; | |
left: 40px; | |
top: -6px; | |
border-left: 6px solid transparent; | |
border-right: 6px solid transparent; | |
border-bottom: 6px solid #111; | |
} | |
.menubar ul ul li:first-child a:after { | |
left: -6px; | |
top: 50%; | |
margin-top: -6px; | |
border-left: none; | |
border-bottom: 6px solid transparent; | |
border-top: 6px solid transparent; | |
border-right: 6px solid #111; | |
} | |
.menubar ul li:first-child > a:hover:after { | |
border-bottom-color: #04acec; | |
} | |
.menubar ul ul li:first-child a:hover:after { | |
border-right-color: #04acec; | |
border-bottom-color: transparent; | |
} | |
.menubar li:last-child > a { | |
-moz-border-top-right-radius: 6px; | |
-moz-border-bottom-right-radius: 6px; | |
-webkit-border-top-right-radius: 6px; | |
-webkit-border-bottom-right-radius: 6px; | |
border-top-right-radius: 6px; | |
border-bottom-right-radius: 6px; | |
} | |
.menubar ul li:last-child > a { | |
-moz-border-top-left-radius: 0px; | |
-moz-border-top-right-radius: 0px; | |
-moz-border-bottom-right-radius: 3px; | |
-moz-border-bottom-left-radius: 3px; | |
-webkit-border-top-left-radius: 0px; | |
-webkit-border-top-right-radius: 0px; | |
-webkit-border-bottom-right-radius: 3px; | |
-webkit-border-bottom-left-radius: 3px; | |
border-top-left-radius: 0px; | |
border-top-right-radius: 0px; | |
border-bottom-right-radius: 3px; | |
border-bottom-left-radius: 3px; | |
} | |
/* Reversed Vertical Direction - popup instead of dropdown. */ | |
.bottomup ul { | |
top: initial; | |
bottom: 38px; | |
} | |
.bottomup ul ul { | |
top: initial; | |
bottom: 0; | |
} | |
.bottomup ul li:first-child > a:after { | |
border-bottom: none; | |
} | |
.bottomup ul li:last-child > a:after { | |
content: ''; | |
position: absolute; | |
left: 40px; | |
bottom: -6px; | |
border-left: 6px solid transparent; | |
border-right: 6px solid transparent; | |
border-top: 6px solid #111; | |
top: auto; | |
} | |
.bottomup ul ul li:first-child a:after { | |
border-right: none; | |
} | |
.bottomup ul ul li:last-child a:after { | |
left: -6px; | |
bottom: 50%; | |
margin-bottom: -6px; | |
border-left: none; | |
border-bottom: 6px solid transparent; | |
border-top: 6px solid transparent; | |
border-right: 6px solid #111; | |
} | |
.bottomup ul li:last-child > a:hover:after { | |
border-top-color: #04acec; | |
} | |
.bottomup ul ul li:last-child a:hover:after { | |
border-right-color: #04acec; | |
border-top-color: transparent; | |
} | |
/* Reversed Horizontal Direction - expand-left instead of expand-right. */ | |
.expand-left li { | |
float: right; | |
border-right: inherit; | |
border-left: 1px solid #222; | |
} | |
.expand-left > li:first-child { | |
box-shadow: none; | |
} | |
.expand-left > li:last-child { | |
border-left: inherit; | |
} | |
.expand-left a { | |
float: right; | |
text-shadow: 0 1px 0 #000; | |
} | |
.expand-left ul { | |
left: inherit; | |
right: 0; | |
} | |
.expand-left ul ul { | |
left: inherit; | |
right: 150px; | |
margin: 0 20px 0 0; | |
} | |
.expand-left li > a { | |
-moz-border-top-left-radius: 0px; | |
-moz-border-top-right-radius: 0px; | |
-moz-border-bottom-right-radius: 0px; | |
-moz-border-bottom-left-radius: 0px; | |
-webkit-border-top-left-radius: 0px; | |
-webkit-border-top-right-radius: 0px; | |
-webkit-border-bottom-right-radius: 0px; | |
-webkit-border-bottom-left-radius: 0px; | |
border-top-left-radius: 0px; | |
border-top-right-radius: 0px; | |
border-bottom-right-radius: 0px; | |
border-bottom-left-radius: 0px; | |
} | |
.expand-left li:first-child > a { | |
-moz-border-top-right-radius: 6px; | |
-moz-border-bottom-right-radius: 6px; | |
-webkit-border-top-right-radius: 6px; | |
-webkit-border-bottom-right-radius: 6px; | |
border-top-right-radius: 6px; | |
border-bottom-right-radius: 6px; | |
} | |
.expand-left li:last-child > a { | |
-moz-border-top-left-radius: 6px; | |
-moz-border-bottom-left-radius: 6px; | |
-webkit-border-top-left-radius: 6px; | |
-webkit-border-bottom-left-radius: 6px; | |
border-top-left-radius: 6px; | |
border-bottom-left-radius: 6px; | |
} | |
.expand-left ul li:first-child > a:after { | |
left: inherit; | |
right: 40px; | |
} | |
.expand-left ul ul li:first-child a:after { | |
left: inherit; | |
right: -6px; | |
border-left: 6px solid #111; | |
border-right: none; | |
} | |
.expand-left ul ul li:first-child a:hover:after { | |
border-left-color: #04acec; | |
border-right-color: transparent; | |
} | |
/* Mobile */ | |
#menubar-trigger { | |
display: none; | |
} | |
@media screen and (max-width: 600px) { | |
/* nav-wrap */ | |
.menubar-wrap { | |
position: relative; | |
} | |
.menubar-wrap * { | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
/* menu icon */ | |
#menubar-trigger { | |
display: block; /* show menu icon */ | |
height: 40px; | |
line-height: 40px; | |
cursor: pointer; | |
padding: 0 0 0 35px; | |
border: 1px solid #222; | |
color: #fafafa; | |
font-weight: bold; | |
background-color: #111; | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -moz-linear-gradient(#444, #111); | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -webkit-linear-gradient(#444, #111); | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -o-linear-gradient(#444, #111); | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -ms-linear-gradient(#444, #111); | |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111); | |
-moz-border-radius: 6px; | |
-webkit-border-radius: 6px; | |
border-radius: 6px; | |
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; | |
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; | |
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; | |
} | |
/* main nav */ | |
.menubar { | |
margin: 0; padding: 10px; | |
position: absolute; | |
top: 40px; | |
width: 100%; | |
z-index: 1; | |
background-color: #444; | |
display: none; | |
-moz-box-shadow: none; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.menubar:after { | |
content: ''; | |
position: absolute; | |
left: 25px; | |
top: -8px; | |
border-left: 8px solid transparent; | |
border-right: 8px solid transparent; | |
border-bottom: 8px solid #444; | |
} | |
.menubar ul { | |
position: static; | |
visibility: visible; | |
opacity: 1; | |
margin: 0; | |
background: none; | |
-moz-box-shadow: none; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.menubar ul ul { | |
margin: 0 0 0 20px !important; | |
-moz-box-shadow: none; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.menubar li { | |
position: static; | |
display: block; | |
float: none; | |
border: 0; | |
margin: 5px; | |
-moz-box-shadow: none; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.menubar ul li{ | |
margin-left: 20px; | |
-moz-box-shadow: none; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.menubar a{ | |
display: block; | |
float: none; | |
padding: 0; | |
color: #999; | |
} | |
.menubar a:hover{ | |
color: #fafafa; | |
} | |
.menubar ul a{ | |
padding: 0; | |
width: auto; | |
} | |
.menubar ul a:hover{ | |
background: none; | |
} | |
.menubar ul li:first-child a:after, | |
.menubar ul ul li:first-child a:after { | |
border: 0; | |
} | |
} | |
@media screen and (min-width: 600px) { | |
.menubar { | |
display: block !important; | |
} | |
} | |
/* iPad */ | |
.no-transition { | |
-webkit-transition: none; | |
-moz-transition: none; | |
-ms-transition: none; | |
-o-transition: none; | |
transition: none; | |
opacity: 1; | |
visibility: visible; | |
display: none; | |
} | |
.menubar li:hover > .no-transition { | |
display: block; | |
} | |
/* support for event-less menu items (e.g. categories) */ | |
.menubar a.no-event { | |
cursor: default; | |
} | |
/* support for disabling menu items */ | |
ul .menubar li a.disabled { | |
cursor: default; | |
color: #aaa; | |
} | |
.menubar a.disabled:hover { | |
color: #aaa; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment