Sitewide Navigation
The navigation for the site is housed off screen. Clicking on the “hamburger” menu will show the navigation panel. Within the nav are collections of accordions to show/hide long lists of links.
Site Nav
<!-- start `site-nav` component;-->
<nav class="site-nav">
<button class="site-nav__button site-nav__button-icon site-nav__button-icon--open">
<svg class="icon-bars">
<title>Open Site Navigation Panel</title>
<use xlink:href="../images/icons/icons.svg#icon-bars"></use>
</svg>
</button>
<nav class="site-nav__drawer">
<div class="site-nav__section"><a href="#">Home</a>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>Customer Service</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__sub-sections">
<div class="site-nav__sub-section">
<p>SITE INFORMATION</p>
<div class="site-nav__links"><a href="#">Contact Us</a> <a href="#">About Us</a> <a href="#">Store</a> <a href="#">RSS Feeds</a> <a href="#">Special Sections</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>ADVERTISE</p>
<div class="site-nav__links"><a href="#">Advertise with Us</a> <a href="#">Media Kit</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>MOBILE</p>
<div class="site-nav__links"><a href="#">Mobile Apps & eReaders</a> <a href="#">Newsletters</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>SOCIAL</p>
<div class="site-nav__links"><a href="#">Facebook</a> <a href="#">Twitter</a> <a href="#">Instagram</a> <a href="#">YouTube</a>
</div>
</div>
</div>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>News</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__sub-sections">
<div class="site-nav__sub-section">
<p>SECTIONS</p>
<div class="site-nav__links"><a href="#">News</a> <a href="#">Politics</a> <a href="#">Weather</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>NATIONAL & WORLD</p>
<div class="site-nav__links"><a href="#">National</a> <a href="#">World</a> <a href="#">Americas</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>LOCAL ISSUES</p>
<div class="site-nav__links"><a href="#">Crime</a> <a href="#">Education</a> <a href="#">Environment</a> <a href="#">Traffic</a>
</div>
</div>
</div>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>Sports</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__sub-sections">
<div class="site-nav__sub-section">
<p>SECTIONS</p>
<div class="site-nav__links"><a href="#">Sports</a> <a href="#">Blogs & Columnists</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>PRO & COLLEGEs</p>
<div class="site-nav__links"><a href="#">Miami Dolphins</a> <a href="#">Miami Heat</a> <a href="#">Miami Marlins</a> <a href="#">Florida Panthers</a> <a href="#">College Sports</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>MORE SPORTS</p>
<div class="site-nav__links"><a href="#">High School Sports</a> <a href="#">Auto Racing</a> <a href="#">Fighting</a> <a href="#">Golf</a> <a href="#">Soccer</a> <a href="#">Tennis</a>
</div>
</div>
</div>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>Politics</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__links"><a href="#">Politics</a> <a href="#">Elections</a>
</div>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>Business</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__links"><a href="#">Business</a> <a href="#">Banking</a> <a href="#">International Business</a> <a href="#">Personal Finance</a> <a href="#">Real Estate News</a>
</div>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>Living</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__sub-sections">
<div class="site-nav__sub-section">
<p>SECTIONS</p>
<div class="site-nav__links"><a href="#">Living</a> <a href="#">Advice</a> <a href="#">Fashion</a> <a href="#">Health & Fitness</a> <a href="#">Home & Garden</a> <a href="#">Travel</a>
</div>
</div>
</div>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>Entertainment</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__sub-sections">
<div class="site-nav__sub-section">
<p>SECTIONS</p>
<div class="site-nav__links"><a href="#">Entertainment</a> <a href="#">Books</a> <a href="#">Games & Puzzles</a> <a href="#">Movies</a> <a href="#">Performing Arts</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>MORE ENTERTAINMENT</p>
<div class="site-nav__links"><a href="#">Events Calendar</a> <a href="#">Contests & Promotions</a>
</div>
</div>
</div>
</div>
<button class="site-nav__button site-nav__button-icon site-nav__button-icon--close">
<svg class="icon-times">
<title>Close Site Navigation Panel</title>
<use xlink:href="../images/icons/icons.svg#icon-times"></use>
</svg>
</button>
</nav>
</nav>
<!-- end `site-nav` component; -->{
"sections": [
{
"url": "#",
"title": "Home"
},
{
"title": "Customer Service",
"sections": [
{
"title": "SITE INFORMATION",
"links": [
{
"url": "#",
"title": "Contact Us"
},
{
"url": "#",
"title": "About Us"
},
{
"url": "#",
"title": "Store"
},
{
"url": "#",
"title": "RSS Feeds"
},
{
"url": "#",
"title": "Special Sections"
}
]
},
{
"title": "ADVERTISE",
"links": [
{
"url": "#",
"title": "Advertise with Us"
},
{
"url": "#",
"title": "Media Kit"
}
]
},
{
"title": "MOBILE",
"links": [
{
"url": "#",
"title": "Mobile Apps & eReaders"
},
{
"url": "#",
"title": "Newsletters"
}
]
},
{
"title": "SOCIAL",
"links": [
{
"url": "#",
"title": "Facebook"
},
{
"url": "#",
"title": "Twitter"
},
{
"url": "#",
"title": "Instagram"
},
{
"url": "#",
"title": "YouTube"
}
]
}
]
},
{
"title": "News",
"sections": [
{
"title": "SECTIONS",
"links": [
{
"url": "#",
"title": "News"
},
{
"url": "#",
"title": "Politics"
},
{
"url": "#",
"title": "Weather"
}
]
},
{
"title": "NATIONAL & WORLD",
"links": [
{
"url": "#",
"title": "National"
},
{
"url": "#",
"title": "World"
},
{
"url": "#",
"title": "Americas"
}
]
},
{
"title": "LOCAL ISSUES",
"links": [
{
"url": "#",
"title": "Crime"
},
{
"url": "#",
"title": "Education"
},
{
"url": "#",
"title": "Environment"
},
{
"url": "#",
"title": "Traffic"
}
]
}
]
},
{
"title": "Sports",
"sections": [
{
"title": "SECTIONS",
"links": [
{
"url": "#",
"title": "Sports"
},
{
"url": "#",
"title": "Blogs & Columnists"
}
]
},
{
"title": "PRO & COLLEGEs",
"links": [
{
"url": "#",
"title": "Miami Dolphins"
},
{
"url": "#",
"title": "Miami Heat"
},
{
"url": "#",
"title": "Miami Marlins"
},
{
"url": "#",
"title": "Florida Panthers"
},
{
"url": "#",
"title": "College Sports"
}
]
},
{
"title": "MORE SPORTS",
"links": [
{
"url": "#",
"title": "High School Sports"
},
{
"url": "#",
"title": "Auto Racing"
},
{
"url": "#",
"title": "Fighting"
},
{
"url": "#",
"title": "Golf"
},
{
"url": "#",
"title": "Soccer"
},
{
"url": "#",
"title": "Tennis"
}
]
}
]
},
{
"title": "Politics",
"links": [
{
"url": "#",
"title": "Politics"
},
{
"url": "#",
"title": "Elections"
}
]
},
{
"title": "Business",
"links": [
{
"url": "#",
"title": "Business"
},
{
"url": "#",
"title": "Banking"
},
{
"url": "#",
"title": "International Business"
},
{
"url": "#",
"title": "Personal Finance"
},
{
"url": "#",
"title": "Real Estate News"
}
]
},
{
"title": "Living",
"sections": [
{
"title": "SECTIONS",
"links": [
{
"url": "#",
"title": "Living"
},
{
"url": "#",
"title": "Advice"
},
{
"url": "#",
"title": "Fashion"
},
{
"url": "#",
"title": "Health & Fitness"
},
{
"url": "#",
"title": "Home & Garden"
},
{
"url": "#",
"title": "Travel"
}
]
}
]
},
{
"title": "Entertainment",
"sections": [
{
"title": "SECTIONS",
"links": [
{
"url": "#",
"title": "Entertainment"
},
{
"url": "#",
"title": "Books"
},
{
"url": "#",
"title": "Games & Puzzles"
},
{
"url": "#",
"title": "Movies"
},
{
"url": "#",
"title": "Performing Arts"
}
]
},
{
"title": "MORE ENTERTAINMENT",
"links": [
{
"url": "#",
"title": "Events Calendar"
},
{
"url": "#",
"title": "Contests & Promotions"
}
]
}
]
}
]
}
jQuery(($: JQueryStatic) => {
const $drawer = $('.site-nav__drawer');
const drawerVisibleClass = 'site-nav__drawer--show';
const sectionVisibleClass = 'site-nav__section--show';
// stop clicks within the nav from closing the nav (click event on the body);
$('.site-nav__drawer').on('click', (event: Event) => {
event.stopPropagation();
});
$('.site-nav__button-toggle').on('click', (event: Event) => {
$(event.currentTarget)
.parent('.site-nav__section')
.toggleClass(sectionVisibleClass);
});
$('.site-nav__button-icon--open').on('click', (event: Event) => {
$drawer.addClass(drawerVisibleClass);
event.stopPropagation();
});
$('body, .site-nav__button-icon--close').on('click', () => {
$drawer.removeClass(drawerVisibleClass);
});
});
$paddingWithBottomBorder: size(0.5) - 1px size(1) size(0.5);
.site-nav {
a {
color: $color__textLight;
display: block;
padding: $paddingWithBottomBorder;
text-decoration: none;
border-top: 1px solid $color__highlightDark;
padding-left: size(2);
transition: color $duration__color;
&:hover,
&:focus {
color: $color__highlightDark;
text-decoration: underline;
}
}
p {
color: $color__textLight;
font-weight: 500;
margin: 0;
padding: $paddingWithBottomBorder;
border-top: 1px solid $color__highlightDark;
padding-left: size(1.5);
}
&__skip {
position: absolute;
color: $color__highlightLight;
border: 0;
padding: 12px;
top: 24px;
line-height: 24px;
left: 72px;
}
// panel/drawer of navigation that appears from off-left;
&__drawer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 1;
outline: none;
transition: transform 0.5s ease-in-out;
width: size(11);
transform: translateX(-120%);
background-color: $color__backgroundDark;
padding: size(4) 0 size(1);
overflow-x: hidden;
&:after {
content: '';
display: block;
height: 1px;
background-color: $color__highlightDark;
}
&--show {
transform: translateX(0);
}
}
// list of links, nested within a section, or subsection;
&__links {
display: none;
}
// heading with links;
&__sub-sections {
display: none;
}
// make buttons appear to be links;
// all buttons trigger an action, they dont take the user to a new URL;
&__button {
background: transparent;
border: 0;
color: $color__textLight;
cursor: pointer;
line-height: $line-height__medium;
margin: 0;
padding: 0;
transition: color $duration__color;
&:hover,
&:focus {
color: $color__highlightDark;
text-decoration: underline;
svg {
fill: $color__highlightDark;
}
}
// navigation open/close icon buttons;
&-icon {
position: absolute;
svg {
transition: fill $duration__color;
width: 100%;
height: 100%;
}
&--open {
top: size(1.25);
left: size(1);
width: size(1.5);
height: size(1.5);
}
&--close {
top: size(1);
right: size(0.5);
width: size(2);
height: size(2);
// icon looks a little off center at this size, move it up a pixel to fix;
svg {
position: relative;
top: -1px;
left: -1px;
}
}
}
&-toggle {
padding: $paddingWithBottomBorder;
text-align: left;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid $color__highlightDark;
span {
flex-grow: 1;
}
svg {
height: size(1);
width: size(1);
fill: $color__textLight;
transition: transform 0.5s ease-out;
}
}
}
// top level grouping of links;
// may contain one, may contain a list, may contain a list with headings;
&__section {
// home link is the only A that isn't nested;
// make it appear to be a button;
&:nth-of-type(1) a {
padding-left: size(1);
}
&--show {
.site-nav__links,
.site-nav__sub-sections {
display: block;
}
.site-nav__button-toggle {
svg {
transform: rotate(180deg);
}
}
}
}
}