<div class="container">
<div class="headnav">
<header class="header">
<div class="header__logo">
<svg width="320" height="60" viewBox="0 0 320 60">
<path fill="#fff" d="M284 45h16v-3l-3-1.5v-20c1.2-.9 2.8-1.1 4.3-1.1 2.8 0 3.7.9 3.7 4.1v17l-3 1.5v3h16v-3l-3-1.5v-19c0-5.7-2.1-8.3-7.1-8.3-4.1 0-8.1 1.5-10.8 4V13h-1l-12.4 2.2v2.7l3.3 1.6v21l-3 1.5v3zM245.3.4c-3 0-5.4 2.4-5.4 5.5 0 3 2.4 5.4 5.4 5.4 2.9 0 5.4-2.4 5.4-5.4-.1-3.1-2.5-5.5-5.4-5.5zM237 15.1v2.8l3 1.6v20.9l-3 1.5V45h16v-3.1l-3-1.5V13.1h-1l-12 2zM223 39c-.7.6-1.7 1.1-3.2 1.1-4 0-5.9-3.3-5.9-10.9 0-8.7 2.4-11.6 5.6-11.6 1.8 0 2.8.6 3.5 1.4v20zm0-24.4c-1.2-.9-3.3-1.4-5-1.4-7.4 0-14.5 4.4-14.5 16.8 0 11.9 7.1 15.7 11.8 15.7 3.8 0 6.4-1.7 7.6-3.4h.3v3.3h.9l11.9-1.4v-2.3l-3-1.8V.6h-1l-12.6 2v2.8l3.6 1.5v7.7zM181 18l3 1.5v20.9l-3 1.5V45h17v-3.1l-4-1.5V24.1c1.8-1.4 4.1-1.9 6.8-1.9.9 0 1.6.2 2.2.3v-9c-.3-.1-.7-.2-1.2-.2-3.3 0-6 2.2-7.8 6.2V13h-1l-12 2v3zm-19.3-.8c3.9 0 5.3 2 5.3 5.9v3.5l-6.1 1.1c-5.9 1.1-10.4 2.9-10.4 9.3 0 5.1 3.5 8.7 8.3 8.7 3.8 0 7.4-1.7 8.7-4.4h.3c.5 3.3 3.3 4.4 6.4 4.4 2.4 0 4.8-.6 5.7-1.6v-2l-2.9-1.5v-18c0-7-5.2-9.4-13.3-9.4-5.3 0-8.6 1.3-11.4 2.6v7.8h4.7l2-6c1.1-.4 2.3-.4 2.7-.4zm2.3 22.9c-1.9 0-4-1.1-4-4.6 0-2.4 2.4-4.7 4.8-5l2.2-.5v8.5s-1.9 1.6-3 1.6zm100.7-22.9c3.9 0 5.3 2 5.3 5.9v3.5l-6.1 1.1c-5.9 1.1-10.4 2.9-10.4 9.3 0 5.1 3.5 8.7 8.3 8.7 3.8 0 7.4-1.7 8.7-4.4h.3c.5 3.3 3.3 4.4 6.4 4.4 2.4 0 4.8-.6 5.7-1.6v-2l-2.9-1.5v-18c0-7-5.2-9.4-13.3-9.4-5.3 0-8.6 1.3-11.4 2.6v7.8h4.7l2-6c1.1-.4 2.3-.4 2.7-.4zm2.3 22.9c-1.9 0-4-1.1-4-4.6 0-2.4 2.4-4.7 4.8-5l2.2-.5v8.5s-1.9 1.6-3 1.6zm-138.7 5.6c.4 0 .9 0 1.3-.1 3.5-.3 6.7-2 8.4-4.2v4.1l12-1.5v-2l-3-2V13h-1l-12 2.3V18l4 1.7V38c-1.1.8-2.4 1.3-4.2 1.3-2.5 0-4.8-.8-4.8-4.3V13h-1l-12 2.5v2.6l4 1.6V36c0 5.4 2.2 9.7 8.3 9.7zM96 38c-1.2 0-2.5-.8-2.5-1.9 0-.8.6-1.7 1.4-2.3 1.6.5 3 .6 5 .6 7.8 0 13.2-3.7 13.2-10.4 0-3-1.3-4.6-3.2-6.4L115 19v-6l-8.2 1.6c-1.9-.7-4.5-1.6-7-1.6-7.8 0-13.2 4.1-13.2 10.8 0 4.1 2 7.1 5 8.8l.2.2c-1.7 1.2-5.3 4-5.3 7.2 0 2.4 1.5 4.8 4.8 5.5-3.4.8-7.3 2.5-7.3 6.5 0 4.1 5.9 8 15.5 8 11.8 0 16.5-5.7 16.5-13 0-6.1-2.8-9-9.5-9H96zm7.5-14c0 5.7-1.3 6.5-3.5 6.5s-4-.8-4-6.5c0-5.8 1.8-7.5 4-7.5s3.5 2 3.5 7.5zM92 50.9c.1-1.5 1.1-3.4 3.7-3.6h8.6c2.5 0 3.7 2 3.7 3.6 0 3.2-2 4.4-8.3 4.4-5.5 0-7.8-2.2-7.7-4.4z"></path>
<path fill="#AADCE6" d="M83 30c0-13-5.1-16.9-13-16.9-9 0-15 6.2-15 16.4 0 10.5 5.5 16.2 15.8 16.2 5.6 0 9.7-2.7 11.2-4.7v-3c-2.1.7-3.9 1.2-7.7 1.2-5.6 0-9.3-3.2-9.3-9.2h18zM69.9 16.6c2.5 0 3.8 1.8 3.8 9.6l-8.4.7c.1-7.9 1.8-10.3 4.6-10.3zM37 45v-3l-3-1.5V21c1.2-.9 3.2-1.7 4.8-1.7 2.8 0 4.3 1.6 4.2 4.2v17L40 42v3h16v-3l-3-1.5v-19c0-5.7-3.3-8.3-7.7-8.3-4.1 0-8.6 1.3-11.3 3.8V0h-1L21 2v3l4 1.5v34L22 42v3h15zM4 36.4c0 5.7 2.8 9.3 8.9 9.3 3.1 0 6.2-.8 8.1-2.3v-3.8c-.8.3-1.9.5-2.9.5-2.9 0-4.1-1.6-4.1-4.6V19h7v-5h-7V6.5L4 8v6l-4 1v4h4v17.4z"></path>
</svg>
</div>
</header>
<nav class="header__nav js-header-nav" role="navigation">
<ul class="header__nav__list">
<li class="header__nav__item">
<a href="#" class="header__nav__item__link">UK</a>
</li>
<li class="header__nav__item">
<a href="#" class="header__nav__item__link">World</a>
</li>
<li class="header__nav__item">
<a href="#" class="header__nav__item__link">Sport</a>
</li>
<li class="header__nav__item">
<a href="#" class="header__nav__item__link">Football</a>
</li>
<li class="header__nav__item">
<a href="#" class="header__nav__item__link">Opinion</a>
</li>
<li class="header__nav__item">
<a href="#" class="header__nav__item__link">Culture</a>
</li>
<li class="header__nav__item">
<a href="#" class="header__nav__item__link">Business</a>
</li>
<li class="header__nav__item">
<a href="#" class="header__nav__item__link">Lifestyle</a>
</li>
<li class="header__nav__item">
<a href="#" class="header__nav__item__link">Fashion</a>
</li>
<li class="header__nav__item">
<a href="#" class="header__nav__item__link">Environment</a>
</li>
</ul>
<div class="nav__item--toggle">
<button href="#" class="nav-toggle nav-toggle--open js-nav-toggle" title="navigation menu" aria-label="navigation menu" role="button" aria-controls="navigation" aria-expanded="false">All</button>
</div>
</nav>
<nav class="nav js-nav" role="navigation">
<header class="nav__header">
Home
<div class="nav__header__toggle">
<button href="#" class="nav-toggle nav-toggle--close js-nav-toggle" title="navigation menu" aria-label="navigation menu" role="button" aria-controls="navigation" aria-expanded="false">Close</button>
</div>
</header>
<ul class="nav__list">
<li class="nav__item">
<header class="nav__item__header">UK</header>
<ul class="nav__item__actions">
<li class="nav__item__action">Education</li>
<li class="nav__item__action">Media</li>
<li class="nav__item__action">Society</li>
<li class="nav__item__action">Law</li>
<li class="nav__item__action">Scotland</li>
<li class="nav__item__action">Wales</li>
<li class="nav__item__action">Nothern Ireland</li>
</ul>
</li>
<li class="nav__item">
<header class="nav__item__header">World</header>
<ul class="nav__item__actions">
<li class="nav__item__action">Europe</li>
<li class="nav__item__action">US</li>
<li class="nav__item__action">Americas</li>
<li class="nav__item__action">Asia</li>
<li class="nav__item__action">Australia</li>
<li class="nav__item__action">Africa</li>
<li class="nav__item__action">Middle East</li>
</ul>
</li>
<li class="nav__item">
<header class="nav__item__header">Sport</header>
<ul class="nav__item__actions">
<li class="nav__item__action">Football</li>
<li class="nav__item__action">Cricket</li>
<li class="nav__item__action">Rugby Union</li>
<li class="nav__item__action">F1</li>
<li class="nav__item__action">Tennis</li>
<li class="nav__item__action">Golf</li>
<li class="nav__item__action">Boxing</li>
<li class="nav__item__action">Cycling</li>
</ul>
</li>
<li class="nav__item">
<header class="nav__item__header">Football</header>
<ul class="nav__item__actions">
<li class="nav__item__action">Live Scores</li>
<li class="nav__item__action">Tables</li>
<li class="nav__item__action">Competiton</li>
<li class="nav__item__action">Results</li>
<li class="nav__item__action">Fixtures</li>
<li class="nav__item__action">Club</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="content">
<h3>Resize the viewport and play with the nav :)</h3>
</div>
</div>html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
padding: 5%;
font-family: 'Montserrat', sans-serif;
background-color: rgba(0,0,0,0.6);
}
img {
height: auto;
max-width: 100%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
h1 {
color: white;
text-align: center;
margin-bottom: 3rem;
}
.hidden { display: none; }
//Params
$white: #FBFBFB;
$black: #323232;
$black-light: #4C4C4C;
$blue: #014E79;
$blue-light: #016094;
$grey: #D8D8D8;
$grey-light: #F3F3F3;
$header-height: 3rem;
$nav-toggle-height: 3rem;
$breakpoint: 60rem;
.container {
width: 90%;
margin: 0 auto;
height: 30rem;
background-color: white;
overflow: auto;
}
.headnav {
position: relative;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
height: $header-height;
width: 100%;
background-color: $blue-light;
z-index: 2;
}
.header__logo {
display: flex;
flex-shrink: 0;
width: 6rem;
margin: 0 .5rem;
}
.header__nav {
position: relative;
display: flex;
height: $header-height;
background-color: $blue;
overflow: hidden;
}
.header__nav__list {
position: relative;
display: flex;
height: 100%;
background-color: $blue;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
backface-visibility: hidden;
&::-webkit-scrollbar { display: none; }
}
.header__nav__item {
position: relative;
padding: 0 .5rem;
height: 100%;
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 5px;
background-color: $blue;
transition: all ease-out .2s;
transform: translateY(5px);
}
&:hover:after {
transform: translateY(0);
}
}
//.nav__item--hidden {
// display: none;
//}
.nav__item--toggle,
.nav__header__toggle {
display: flex;
height: 100%;
padding: 0 .5rem;
margin-left: auto;
background-color: $black-light;
border-left: 2px solid $black;
color: white;
&:after { display: none; }
}
.header__nav__item__link {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 100%;
color: white;
text-decoration: none;
&:hover { text-decoration: underline; }
}
.nav-toggle {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: inherit;
padding-right: 18px;
padding-left: 0;
border: none;
overflow: hidden;
outline: 0;
&:hover { text-decoration: underline; }
&:after {
content: '';
position: absolute;
display: block;
width: 12px;
height: 12px;
right: 0;
top: 50%;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
}
.nav-toggle--open:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAmElEQVQ4T6WS0Q3DIAxE7ybpSt2gdIJ2lGSDdLNschUIIkRMIDI/SOju/GxMOA+dfvgDJD0BPEiud2gkfQHslKRs3Ei+Z0IkbQBeURsDFgCf2ZDaDGBNM2geuySN7kcyHEMchVjm1ELdcy+kZz4FWO3kAiHfCbsuau5BU7HoT2aToKivsIcEVUjCJRn/3Tz+VZ7ZvCuNm+APF2xM5wC4k90AAAAASUVORK5CYII=');
}
.nav-toggle--close:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAw0lEQVQ4T42TYRXCMAyEvygAKTgAHIATUAJOwAHgYFJAQXg3Nl7XNe36s6/3NZdczN3XwA04m1nHguPuG+ACHM3dn8AWeAP7FmQQPwB9/BJANEFWLUgm/gA7U8VLIEWxWdcDWpBILN0fEEEG/uj5V3bS7AkggOhaDZuJZxUEdnRdFLcAY9l6F444spB6FiAccamJk4YNtsKc5GMsdruWkzRI4ahqORmjXBVXw5YsUziqdEEzO/0yKSR34NTaxKySK3D4ArhVl/9crtFYAAAAAElFTkSuQmCC');
}
.nav {
position: absolute;
top: $header-height;
left: 0;
display: none;
flex-direction: column;
height: auto;
width: 100%;
&.is-open {
display: flex;
}
}
.nav__header {
display: flex;
align-items: center;
height: $header-height;
background-color: $grey;
padding-left: .8rem;
color: $blue-light;
}
.nav__list,
.nav__item {
display: flex;
flex-direction: column;
}
.nav__item {
display: flex;
width: 100%;
color: $black;
@media screen and (min-width: $breakpoint) {
flex-direction: row;
}
}
.nav__item__header {
display: flex;
padding: .8rem;
background-color: $blue;
color: white;
@media screen and (min-width: $breakpoint) {
width: 7rem;
flex-shrink: 0;
border-top: 1px solid $blue-light;
}
}
.nav__item__actions {
display: flex;
flex-flow: row wrap;
background-color: $grey-light;
width: 100%;
border-bottom: 1px solid white;
}
.nav__item__action {
padding: .5rem .8rem;
width: 50%;
@media screen and (min-width: $breakpoint) {
width: initial;
display: flex;
align-items: center;
}
}
.content {
display: flex;
align-items: center;
justify-content: center;
height: 80%;
padding: 0 4rem;
text-align: center;
}var Menu = {
$el: $('.js-nav'),
$elToggle: $('.js-nav-toggle'),
isOpened: false,
init: function() {
this.events();
},
events: function() {
var self = this;
this.$elToggle.on('click', function() {
if (self.isOpened) {
self.close();
} else {
self.open();
}
});
$(document).on('click', function(e) {
if(self.isOpened) {
var is_menu = $(e.target).closest(self.$el).length;
var is_toggle = $(e.target).closest(self.$elToggle).length;
if(!is_menu && !is_toggle) {
self.close();
}
}
});
},
open: function() {
this.$el.addClass('is-open');
this.$elToggle.addClass('is-active');
this.isOpened = true;
},
close: function() {
this.$el.removeClass('is-open');
this.$elToggle.removeClass('is-active');
this.isOpened = false;
}
};
Menu.init();
External CSS
This Pen doesn't use any external CSS resources.