Skip to content

Instantly share code, notes, and snippets.

@napotopia
Created July 7, 2014 18:17
Show Gist options
  • Save napotopia/ed29023863634c6ab86c to your computer and use it in GitHub Desktop.
Save napotopia/ed29023863634c6ab86c to your computer and use it in GitHub Desktop.
M.com Global Nav.
// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----
$navHeaderBG: #fff;
$navBG: #00305e;
$navIconColor: #DD760C;
$navLinkArrowColor: #99acbf;
$navLinkArrowHoverColor: $navBG;
$subMenuBG: #fff;
$subMenuIconHoverColor: $navIconColor;
$subMenuHoverBG: $navBG;
$subMenuHoverLink: $navHeaderBG;
$navLinkTop: $navHeaderBG;
$navLinkBase: $navBG;
$navLinkIconHoverColor: $navLinkBase;
$navPipeLighterPercentage: 10%;
$navPipeDarkerPercentage: 10%;
$menuWidth: 51em;
$logoURL: 'manheim-global-sprite.png';
$logoHeight: 56px;
$logoWidth: 210px;
$maxPageWidth: 972px;
$breakPointMedium: 39em;
$breakPointLarge: 41em;
$breakPointXLarge: 60em;
$navBGDarker:darken($navBG, $navPipeDarkerPercentage);
$navBGLighter:lighten($navBG, $navPipeLighterPercentage);
nav.nav-main {
background: $navBG;
padding-right: 1em;
display: table;
width: 100%;
// Top Level Menu Links
> ul {
border: 1px solid $navBG;
border-bottom: 0;
display: table-cell;
width: $menuWidth;
}
}
.nav-main-item {
padding: 0;
margin: 0;
position: relative;
z-index: 9999;
display: inline-block;
a {
display: block;
}
& > a {
font-family:"Arial Narrow", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
font-size: 1rem;
position: relative;
color: $navLinkTop;
text-transform: uppercase;
padding: 1.25em;
display: inline-block;
}
& > a:hover {
text-decoration: none;
}
& > a:before {
content: '.';
text-indent: -99999em;
color: transparent;
height: 2.5em;
position: absolute;
right: 0;
top: 0.5em;
margin-right: -2px;
display: inline-block;
border-left: 1px solid $navBGDarker;
border-right: 1px solid $navBGLighter;
}
& > a:after {
content: '';
position:absolute;
bottom: 0.75em;
left: 46%;
display: inline-block;
height: 0;
width: 0;
border-style: solid;
border-color: transparent;
*vertical-align: middle;
border-width: 5px 4px 0;
border-top-color: $navLinkArrowColor;
}
.no-touch &:hover,
&.active {
background: $subMenuBG;
}
.no-touch &:hover a,
&.active a {
background: $subMenuBG;
color: $navLinkBase;
text-decoration: none;
}
.no-touch &:hover a:before,
&.active a:before {
display: none;
}
.no-touch &:hover a:after,
&.active a:after {
border-top-color: $navLinkArrowHoverColor;
}
.no-touch &:hover ul,
&.active ul {
display:block;
}
ul {
position: absolute;
z-index: 9990;
left: -1px;
background: $subMenuBG;
border: 1px solid $navBG;
border-top: 0;
padding: 1em 0;
min-width: 14em;
li {
line-height: 2;
font-size: 12px;
font-size: 0.75rem;
a {
padding: 0 2em;
&:hover {
background: $subMenuHoverBG;
color: $subMenuHoverLink;
i.icon-dotted-arrow,
i.icon-dotted-arrow:before,
i.icon-dotted-arrow:after {
background: $subMenuIconHoverColor;
}
}
}
}
li a {
font-weight: bold;
padding: 0 1em;
}
}
}
.nav-utility {
ul {
display: inline-block;
li {
display: inline-block;
margin-left: 0.5em;
a {
font-size: 11px;
font-size: 0.7rem;
&:hover {
text-decoration: underline;
}
}
}
}
[class^="icon-icom"] {
color: $navIconColor;
margin-right: 0.25em;
}
}
nav.nav-main {
background: #00305e;
padding-right: 1em;
display: table;
width: 100%;
}
nav.nav-main > ul {
border: 1px solid #00305e;
border-bottom: 0;
display: table-cell;
width: 51em;
}
.nav-main-item {
padding: 0;
margin: 0;
position: relative;
z-index: 9999;
display: inline-block;
}
.nav-main-item a {
display: block;
}
.nav-main-item > a {
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
font-size: 1rem;
position: relative;
color: white;
text-transform: uppercase;
padding: 1.25em;
display: inline-block;
}
.nav-main-item > a:hover {
text-decoration: none;
}
.nav-main-item > a:before {
content: '.';
text-indent: -99999em;
color: transparent;
height: 2.5em;
position: absolute;
right: 0;
top: 0.5em;
margin-right: -2px;
display: inline-block;
border-left: 1px solid #00162b;
border-right: 1px solid #004a91;
}
.nav-main-item > a:after {
content: '';
position: absolute;
bottom: 0.75em;
left: 46%;
display: inline-block;
height: 0;
width: 0;
border-style: solid;
border-color: transparent;
*vertical-align: middle;
border-width: 5px 4px 0;
border-top-color: #99acbf;
}
.no-touch .nav-main-item:hover, .nav-main-item.active {
background: white;
}
.no-touch .nav-main-item:hover a, .nav-main-item.active a {
background: white;
color: #00305e;
text-decoration: none;
}
.no-touch .nav-main-item:hover a:before, .nav-main-item.active a:before {
display: none;
}
.no-touch .nav-main-item:hover a:after, .nav-main-item.active a:after {
border-top-color: #00305e;
}
.no-touch .nav-main-item:hover ul, .nav-main-item.active ul {
display: block;
}
.nav-main-item ul {
position: absolute;
z-index: 9990;
left: -1px;
background: white;
border: 1px solid #00305e;
border-top: 0;
padding: 1em 0;
min-width: 14em;
}
.nav-main-item ul li {
line-height: 2;
font-size: 12px;
font-size: 0.75rem;
}
.nav-main-item ul li a {
padding: 0 2em;
}
.nav-main-item ul li a:hover {
background: #00305e;
color: white;
}
.nav-main-item ul li a:hover i.icon-dotted-arrow,
.nav-main-item ul li a:hover i.icon-dotted-arrow:before,
.nav-main-item ul li a:hover i.icon-dotted-arrow:after {
background: #dd760c;
}
.nav-main-item ul li a {
font-weight: bold;
padding: 0 1em;
}
.nav-utility ul {
display: inline-block;
}
.nav-utility ul li {
display: inline-block;
margin-left: 0.5em;
}
.nav-utility ul li a {
font-size: 11px;
font-size: 0.7rem;
}
.nav-utility ul li a:hover {
text-decoration: underline;
}
.nav-utility [class^="icon-icom"] {
color: #dd760c;
margin-right: 0.25em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment