<h1>Menu | Nav </h1>
<nav id="navigation">
<ul>
<li><a href="http://www.najmacode.com">www.najmacode.com</a>
</li>
<li><a href="http://www.najmacode.com">www.najmacode.com</a>
</li>
<li><a href="http://www.najmacode.com">www.najmacode.com</a>
</li>
<li><a href="http://www.najmacode.com">www.najmacode.com</a>
</li>
<li><a href="http://www.najmacode.com">www.najmacode.com</a>
</li>
<li><a href="http://www.najmacode.com">www.najmacode.com</a>
</li>
</ul>
</nav>
/* www.najmacode.com */
* {
box-sizing: border-box;
}
/* Responsive Navigation styles begin here */
@media (max-width: 767px) {
/* Theming opened nav */
nav ul {
position: absolute;
top: 1rem;
width: 75%;
z-index: 1;
/* translate with hardware acceleration */
-webkit-transform: translateY(0) translateZ(0);
-ms-transform: translateY(0) translateZ(0);
transform: translateY(0) translateZ(0);
-webkit-transition: -webkit-transform .3s cubic-bezier(.72, .89, .28, 1.39);
transition: transform .3s cubic-bezier(.72, .89, .28, 1.39);
will-change: transform;
/* global styles */
margin: 0;
padding: 0;
list-style: none;
}
nav a {
display: block;
padding: 1.2rem;
color: #fff;
background: #114b69;
text-decoration: none;
margin-bottom: 2px;
}
nav a:hover,
nav a:focus,
nav a:active {
background: #222;
}
/* Theming closed nav */
nav.is-closed ul {
-webkit-transform: translateY(-30rem) translateZ(0);
-ms-transform: translateY(-30rem) translateZ(0);
transform: translateY(-30rem) translateZ(0);
/* number of links x5 */
}
/* Global styling nav button */
nav > button {
position: absolute;
top: .8rem;
right: 1rem;
z-index: 1;
height: 4rem;
width: 4rem;
background-color: transparent;
padding: 0;
outline: 0;
border: 1px solid #333;
border-radius: 50%;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transition: -webkit-transform .2s;
transition: transform .2s;
}
/* Removing Firefox's dotted outline on button */
nav > button::-moz-focus-inner {
border: 0;
}
nav > button::after,
nav > button::before {
content: "";
position: absolute;
top: 15%;
right: 40%;
bottom: 15%;
left: 40%;
background-color: #333;
border-radius: 10px;
-webkit-transition: -webkit-transform .2s;
transition: transform .2s;
}
nav > button::before {
top: 40%;
right: 15%;
bottom: 40%;
left: 15%;
}
/* Theming opened nav button */
nav:not(.is-closed) > button,
nav:not(.is-closed) > button::before {
-webkit-transform: rotate(90deg) translateZ(0);
-ms-transform: rotate(90deg) translateZ(0);
transform: rotate(90deg) translateZ(0);
}
/* Hide alternate text except from screen readers */
.visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
}
}
/* BONUS deco */
/* Global deco */
html {
font-size: 62.5%;
}
body {
margin: 0;
padding: 1rem;
background: #e3e3e3;
color: #000;
font-family: helvetica, arial, sans-serif;
font-size: 1.3em;
line-height: 1.5;
}
section {
position: relative;
margin-top: 1rem;
;
padding: 1rem;
background: #fff;
}
h1,
h2 {
margin-top: 0;
margin-bottom: 1rem;
color: #345;
text-shadow: 1px 1px 1px #fff;
}
h1 {
font-size: 2.4rem;
}
h2 {
margin-top: 2rem;
}
a {
color: #345
}
ul {
padding-left: 1em;
list-style-position: inside
}
section li {
list-style: none;
}
section li::before {
content: "\2713 ";
margin-right: .8rem;
}
/* orientation */
@media (orientation: landscape) and (max-device-width: 767px) {
html,
body {
-webkit-text-size-adjust: 100%;
}
}
var maxBreakpoint = 767;
var targetID = 'navigation';
var n = document.getElementById(targetID);
n.classList.add('is-closed');
function navi() {
if (window.matchMedia("(max-width:" + maxBreakpoint + "px)").matches && document.getElementById("toggle-button") == undefined) {
n.insertAdjacentHTML('afterBegin', '<button id="toggle-button" aria-label="open/close navigation"></button>');
t = document.getElementById("toggle-button");
t.onclick = function () {
n.classList.toggle('is-closed');
}
}
var minBreakpoint = maxBreakpoint + 1;
if (window.matchMedia("(min-width: " + minBreakpoint + "px)").matches && document.getElementById("toggle-button")) {
document.getElementById("toggle-button").outerHTML = "";
}
}
navi();
window.addEventListener('resize', navi);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.