Skip to content

Instantly share code, notes, and snippets.

@farmerbradllc

farmerbradllc/wi nav css

Created November 30, 2012 18:52
Show Gist options
  • Save farmerbradllc/4177709 to your computer and use it in GitHub Desktop.
Save farmerbradllc/4177709 to your computer and use it in GitHub Desktop.
Download ZIP
css
Raw
wi nav css
#navigation {
background: #303030;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMwMzAzMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjNTk1OTU5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzclIiBzdG9wLWNvbG9yPSIjNjM2MzYzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTMlIiBzdG9wLWNvbG9yPSIjN2M3YzdjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, #303030 0%, #595959 7%, #636363 77%, #7c7c7c 93%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303030), color-stop(7%,#595959), color-stop(77%,#636363), color-stop(93%,#7c7c7c));
background: -webkit-linear-gradient(top, #303030 0%,#595959 7%,#636363 77%,#7c7c7c 93%);
background: -o-linear-gradient(top, #303030 0%,#595959 7%,#636363 77%,#7c7c7c 93%);
background: -ms-linear-gradient(top, #303030 0%,#595959 7%,#636363 77%,#7c7c7c 93%);
background: linear-gradient(to bottom, #303030 0%,#595959 7%,#636363 77%,#7c7c7c 93%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#7c7c7c',GradientType=0 );
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
height: 35px;
padding-left: 125px;
position: absolute;
top: 88px;
width: 835px;
}
#navigation ul.root {
margin: 0;
}
#navigation ul li.link-2 {
padding-left: 0;
}
#navigation ul li {
padding: 0;
display: block;
float: left;
margin: 0;
}
#navigation ul.root li a {
display: block;
color: #FFF;
font-size: 1.5em;
line-height: 1em;
padding: 10px 15px;
margin: 0 5px;
text-decoration: none;
text-transform: uppercase;
}
#navigation ul.root li:hover a.nav-item {
box-shadow: 1px 7px 7px rgb(0,0,0);
box-shadow: 1px 7px 7px rgba(0,0,0, .3);
-moz-box-shadow: 1px 7px 7px rgba(0,0,0, .3);
-webkit-box-shadow: 1px 7px 7px rgba(0,0,0, .3);
position: relative;
z-index: 3;
}
#navigation ul.root li.has-children a:hover,
#navigation ul.root li.has-children:hover a {
border-top-left-radius:5px;
border-top-right-radius: 5px;
padding: 22px 15px 42px;
margin-top: -12px;
z-index: 4;
}
/* -------- Navigation / Child-Menu -------- */
#navigation li.has-children:hover ul.child-menu {
display: block;
left: 0;
position: absolute;
margin-top: -10px;
min-height: 239px;
z-index: 3;
}
#navigation ul.root li.orange.has-children:hover a,
#navigation ul.root li.orange ul.child-menu {
background: rgb(191, 121, 49);
background: rgba(191, 121, 49, 0.95);
}
#navigation ul.root li.orange.has-children:hover a.nav-item:before,
#navigation ul.root li.orange.has-children:hover a.nav-item:after,
#navigation ul.root li.orange.has-children:hover a.nav-item,
#navigation ul.root li.orange.has-children a.nav-item2:hover,
#navigation ul.root li.orange ul.child-menu ul.grand-child-menu li.selected a,
#navigation ul.root li.orange ul.child-menu a:hover {
background: rgb(215, 139, 59);
background: rgba(215, 139, 59, 1) !important;
}
#navigation ul.root li.purple.has-children a:hover,
#navigation ul.root li.purple.has-children:hover a,
#navigation ul.root li.purple ul.child-menu {
background: rgb(100, 68, 107);
background: rgba(100, 68, 107, 0.95);
}
#navigation ul.root li.purple.has-children:hover a.nav-item:before,
#navigation ul.root li.purple.has-children a.nav-item:after,
#navigation ul.root li.purple.has-children:hover a.nav-item,
#navigation ul.root li.purple.has-children a.nav-item2:hover,
#navigation ul.root li.purple ul.child-menu ul.grand-child-menu li.selected a,
#navigation ul.root li.purple ul.child-menu a:hover {
background: rgb(125, 86, 135);
background: rgba(125, 86, 135, 1) !important;
}
#navigation ul.root li.green.has-children a:hover,
#navigation ul.root li.green.has-children:hover a,
#navigation ul.root li.green ul.child-menu {
background: rgb(177, 181, 120);
background: rgba(177, 181, 120, 0.95);
}
#navigation ul.root li.green.has-children:hover a.nav-item:before,
#navigation ul.root li.green.has-children:hover a.nav-item:after,
#navigation ul.root li.green.has-children:hover a.nav-item,
#navigation ul.root li.green.has-children a.nav-item2:hover,
#navigation ul.root li.green ul.child-menu ul.grand-child-menu li.selected a,
#navigation ul.root li.green ul.child-menu a:hover {
background: rgb(198, 202, 135);
background: rgba(198, 202, 135, 1) !important;
}
#navigation ul.root li.blue.has-children a:hover,
#navigation ul.root li.blue.has-children:hover a,
#navigation ul.root li.blue ul.child-menu {
background: rgb(10, 99, 131);
background: rgba(10, 99, 131, 0.95);
}
#navigation ul.root li.blue.has-children:hover a.nav-item:before,
#navigation ul.root li.blue.has-children:hover a.nav-item:after,
#navigation ul.root li.blue.has-children:hover a.nav-item,
#navigation ul.root li.blue.has-children a.nav-item2:hover,
#navigation ul.root li.blue ul.child-menu ul.grand-child-menu li.selected a,
#navigation ul.root li.blue ul.child-menu a:hover {
background: rgb(10, 99, 131);
background: rgba(10, 99, 131, 1) !important;
}
#navigation ul.root li.has-children:hover a.nav-item:before, #navigation ul.root li.has-children:hover a.nav-item:after {
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.3em;
content: "";
display: block;
height: 0.7em;
position: absolute;
right: 0;
width: 54%;
}
#navigation ul.root li.has-children:hover a.nav-item:before{
bottom:-6px;
left: 0;
-moz-transform:rotate(7deg);
-o-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
transform:rotate(7deg);
}
#navigation ul.root li.has-children:hover a.nav-item:after{
bottom: -6px;
right: 0;
-moz-transform:rotate(-7deg);
-o-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
transform:rotate(-7deg);
}
#navigation ul.child-menu {
background: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
display: none;
left: 0;
clear: both;
padding: 30px 0;
margin: 0px 10px;
position: absolute;
width: 940px;
}
#navigation ul.child-menu li {
margin: 0;
padding: 0 20px;
position: relative;
width: 270px;
}
#navigation ul.child-menu li,
#navigation ul.child-menu li a {
background: none !important;
}
#navigation ul.child-menu li a {
font-weight: 600;
padding: 3px 5px !important;
margin: 0 !important;
}
/* -------- Navigation / Grand-Child-Menu -------- */
#navigation ul.grand-child-menu {
background: none;
display: inline-block;
margin: 0;
}
#navigation ul.grand-child-menu li {
display: block;
float: left;
position: relative;
margin: 0;
padding: 0;
width: 100%;
}
#navigation ul.grand-child-menu li a {
font-size: 1.25em;
font-weight: 200;
text-transform: capitalize;
padding: 5px 0 5px 40px !important;
width: 215px;
}
#navigation li.has-children:hover ul.child-menu a,
#navigation li.has-children:hover ul.grand-child-menu a {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: none;
}
#navigation ul.child-menu a.nav-item-2:hover,
#navigation ul.grand-child-menu a:hover {
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment