I had codyhouse's css animations tutorial which was really nice. We wrote this navigation menu and I wanted to tweak it further to my likes.
I guess I'm trying to show the navigation links on screens that are bigger than 640px and make it invisible (like this current state) on all other screen sizes.
Codepen
var navTrigger = document.getElementsByClassName('nav-trigger')[0],
body = document.getElementsByTagName('body')[0];
navTrigger.addEventListener('click', toggleNavigation);
function toggleNavigation(event) {
event.preventDefault();
body.classList.toggle('nav-open');
}
*, *::after, *::before {
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1;
margin: 0;
width: 100%;
height: 100%;
background: #333;
}
main {
position: relative;
z-index: 1;
height: 100vh;
overflow: hidden;
transition: transform .5s;
box-shadow: 0 0 50px #000;
}
.nav-open main {
transform: scale(.8)
}
.intro {
height: 100vh;
width: 100%;
display: table;
background: #f3f3f3;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 45px;
color: #ddd;
}
.nav-trigger {
position: fixed;
z-index: 4;
top: 40px;
right: 40px;
height: 44px;
width: 44px;
overflow: hidden;
color: transparent;
white-space: nowrap;
text-indent: 100%;
}
.nav-trigger span,
.nav-trigger span::before,
.nav-trigger span::after {
position: absolute;
height: 4px;
width: 36px;
background: #111;
transition: all .3s;
}
.nav-trigger span {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav-trigger span::before,
.nav-trigger span::after {
content: '';
top: 0;
left: 0;
}
.nav-trigger span::before {
transform: translateY(-12px);
}
.nav-trigger span::after {
transform: translateY(12px);
}
.nav-trigger:hover span,
.nav-trigger:hover span::before,
.nav-trigger:hover span::after {
background: #888;
}
.nav-open .nav-trigger span {
background: transparent;
}
.nav-open .nav-trigger span::before,
.nav-open .nav-trigger span::after {
background: #888;
}
.nav-open .nav-trigger span::before {
transform: rotate(-45deg);
}
.nav-open .nav-trigger span::after {
transform: rotate(45deg);
}
.overlay {
position: fixed;
z-index: 2;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #333;
opacity: 0;
visibility: hidden;
transition: all .5s;
}
.nav-open .overlay {
opacity: .5;
visibility: visible;
}
.nav-container {
position: fixed;
z-index: 3;
top: 0;
right: 0;
height: 100%;
width: 100%;
padding: 3em 3.5em;
background: #343434;
overflow: auto;
transform: translateZ(0);
transform: translateY(-100%);
transition: transform .5s cubic-bezier(.07,.23,.34,1);
}
.nav-open .nav-container {
transform: translateX(0);
}
.nav {
list-style: none;
padding: 0;
}
.nav a {
display: block;
padding: .6em 0;
font-size: 30px;
font-family: bold;
font-family: sans-serif;
text-decoration: none;
color: #747474;
transform: translateZ(0);
}
.nav-open .nav a {
animation: slide-in .4s .2s backwards;
}
.nav-open .nav li:nth-of-type(2) a {
animation-delay: .3s;
}
.nav-open .nav li:nth-of-type(3) a {
animation-delay: .4s;
}
.nav-open .nav li:nth-of-type(4) a {
animation-delay: .5s;
}
.nav-open .nav li:nth-of-type(5) a {
animation-delay: .6s;
}
.nav li {
text-align: center;
}
#keyframes slide-in {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
#media only screen and (min-width : 640px) {
/* .nav-trigger {
visibility: hidden;
} */
/* .nav li {
display: inline-block;
z-index: 60;
} */
}
<body>
<a href="#navigation" class="nav-trigger">
Menu<span></span>
</a>
<main>
<section class="intro">
<h1>Final Project</h1>
</section>
</main>
<nav class="nav-container" id="navigation">
<ul class="nav">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="overlay"></div>
</body>
Related
Im working on a slider and im burn out, you guys know how it is, working on something so much eventually the brain just cant do it, so im going to leave it for today and ask you if you have an answer for the issue.
So heres my slider on html
.header {
grid-area: header;
border: 1px solid black;
background-color: black;
}
.slideshow {
width: 923px;
height: 500px;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
}
.slideshow-container {
width: 4615px;
font-size: 0;
transition: 1s ease;
height: 500px;
overflow: hidden;
}
.slideshow-container:hover {
animation-play-state: paused;
}
.slide {
animation: slide 24s ease infinite;
}
.img1 {
width: 923px;
height: auto;
object-fit: cover;
}
.img2 {
width: 923px;
height: auto;
object-fit: cover;
}
.img3 {
width: 923px;
height: auto;
object-fit: cover;
}
.img4 {
width: 923px;
height: auto;
object-fit: cover;
}
.img5 {
width: 923px;
height: auto;
object-fit: cover;
}
#keyframes slide {
10% {
margin-left: 0px;
}
20% {
margin-left: -923px;
}
30% {
margin-left: -923px;
}
40% {
margin-left: -1846px;
}
50% {
margin-left: -1846px;
}
60% {
margin-left: -2769px;
}
70% {
margin-left: -2769px;
}
80% {
margin-left: -3692px;
}
90% {
margin-left: -3692px;
}
}
.dot1 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 400px;
z-index: 2;
}
.dot1:hover {
border: 2px solid white;
background-color: black;
}
.dot2 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 430px;
z-index: 2;
}
.dot3 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 460px;
z-index: 2;
}
.dot4 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 490px;
z-index: 2;
}
<div class="header">
<div class="slideshow">
<span class="dot1"></span>
<span class="dot2"></span>
<span class="dot3"></span>
<span class="dot4"></span>
<div class="slideshow-container slide">
<img class="img1" src="https://i.imgur.com/xGMtCkJ.jpg">
<img class="img2" src="https://i.imgur.com/1F5Gtuz.jpg">
<img class="img3" src="https://i.imgur.com/GgikuGI.jpg">
<img class="img4" src="https://i.imgur.com/LlTDfcH.jpg">
<img class="img5" src="https://i.imgur.com/hNLNCgQ.png">
</div>
</div>
</div>
So here is what the slider and keyframes look like
What im looking for is a part of a code that i can include to
.dot1:hover {
border: 2px solid white;
background-color: black;
}
So what i want is that when someone hover's over the first dot the slider goes to the first keyframe or image, and so on with the other dots, if anyone knows a way to make that happen without javascripts and if i can reverse the keyframe animation that would be perfect.
thanks :)
It's possible using CSS:
Here is the snippet for slider using pure css:
.csslider {
display: inline-block;
position: relative;
max-width: 480px;
width: 100%;
margin-top: 10px;
}
.csslider > .cs_anchor {
display: none;
}
.csslider > ul {
position: relative;
z-index: 1;
font-size: 0;
line-height: 0;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
}
.csslider > ul > li.img img {
width: 100%;
}
.csslider > ul > li.img {
font-size: 0pt;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
.csslider > ul > li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
white-space: normal;
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.csslider .cs_lnk{
position: absolute;
top: -9999px;
left: -9999px;
font-size: 0pt;
opacity: 0;
filter: alpha(opacity=0);
}
.csslider > .cs_bullets {
position: absolute;
left: 0;
width: 100%;
z-index: 6;
font-size: 0;
line-height: 8pt;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider > .cs_bullets > div {
margin-left: -50%;
width: 100%;
}
.csslider > .cs_bullets > label {
position: relative;
display: inline-block;
cursor: pointer;
}
.csslider > .cs_description {
z-index: 3;
}
.csslider > ul > li {
position: absolute;
left: 0;
top: 0;
display: inline-block;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 2000ms ease, -webkit-transform 24000ms linear;
-moz-transition: opacity 2000ms ease, -moz-transform 24000ms linear;
-ms-transition: opacity 2000ms ease, -ms-transform 24000ms linear;
-o-transition: opacity 2000ms ease, -o-transform 24000ms linear;
transition: opacity 2000ms ease, transform 24000ms linear;
}
.csslider > ul > li.num0 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, 11.53846%);
transform: scale(1.3) translate(-11.53846%, 11.53846%);
}
.csslider > ul > li.num1 {
opacity: 0;
-webkit-transform: scale(1.3) translate(11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(11.53846%, 11.53846%);
transform: scale(1.3) translate(11.53846%, 11.53846%);
}
.csslider > ul > li.num2 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, -11.53846%);
transform: scale(1.3) translate(-11.53846%, -11.53846%);
}
.csslider > ul > li.num0 {
opacity: 1;
z-index: 2;
}
.csslider > .slide:hover ~ ul > li.num0 {
opacity: 0;
z-index: 1;
}
.csslider > #cs_slide1_0:hover ~ ul > li.num0,.csslider > #cs_slide1_1:hover ~ ul > li.num1,.csslider > #cs_slide1_2:hover ~ ul > li.num2 {
opacity: 1;
-webkit-transform: scale(1) translate(0, 0);
-moz-transform: scale(1) translate(0, 0);
-ms-transform: scale(1) translate(0, 0);
-o-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
z-index: 2;
}
.csslider > .cs_bullets {
bottom: 5px;
margin-bottom: 5px;
}
.csslider > .cs_bullets > label {
margin: 0 6px;
padding: 9px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider > .cs_bullets > label.num0 {
background-color: #E34B64;
}
.csslider > .slide:hover ~ .cs_bullets > label {
/* Fallback for web browsers that doesn't support RGBa */
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider > #cs_slide1_0:hover ~ .cs_bullets > label.num0,
.csslider > #cs_slide1_1:hover ~ .cs_bullets > label.num1,
.csslider > #cs_slide1_2:hover ~ .cs_bullets > label.num2 {
background-color: #E34B64;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>
</title>
</head>
<body>
<div class='csslider autoplay '>
<input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' hover>
<input name="cs_anchor1" id='cs_pause1' type="radio" class='cs_anchor'>
<ul>
<div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;">
<img src="http://cssslider.com/sliders/pen/images/buns.jpg" style="width: 100%;">
</div>
<li class='num0 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Buns' title='Buns' />
</li>
<li class='num1 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Croissant' title='Croissant' />
</li>
<li class='num2 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Lemon pie' title='Lemon pie' />
</li>
</ul>
<div class='cs_bullets'>
<label class='num0' for='cs_slide1_0'>
<span class='cs_point'></span>
</label>
<label class='num1' for='cs_slide1_1'>
<span class='cs_point'></span>
</label>
<label class='num2' for='cs_slide1_2'>
<span class='cs_point'></span>
</label>
</div>
</div>
</body>
</html>
Is there a way so that when I open my menu, it does not go beyond the first section or scrolling will be disabled once the menu is open? I tried giving every section z-index 999 but that does not work
HTML:
<section class="intro">
<label>
<input type="checkbox">
<span class="menu">
<span class="hamburger"></span>
</span>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</label>
<div class="text">
<h1>my<br>example<br>text</h1>
</div>
</div>
</section>
<section class="first">
</section>
<section class="second">
</section>
<section class="third">
</section>
CSS:
/* Section styling */
body, html {
height: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
section {
width: 100%;
display: table;
margin: 0;
max-width: none;
height: 100vh;
}
.intro {
background-color:#291411;
}
.first {
background-color:#834940;
}
.second {
background-color:#291411;
}
.third {
background-color:#834940;
}
/* Hide scrollbars */
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #FF0000;
}
/* Menu before */
label .hamburger {
position: absolute;
top: 135px;
left: 50px;
width: 30px;
height: 2px;
background: #291411;
display: block;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
label .hamburger:after, label .hamburger:before {
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #291411;
}
label .hamburger:before { top: -10px; }
label .hamburger:after { bottom: -10px; }
label input { display: none; }
label input:checked + .menu {
box-shadow: 0 0 0 100vw #E0C9B7, 0 0 0 100vh #E0C9B7;
border-radius: 0;
}
label input:checked + .menu .hamburger {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
label input:checked + .menu .hamburger:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
bottom: 0;
}
label input:checked + .menu .hamburger:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 0;
}
label input:checked + .menu + ul { opacity: 1; }
/* Menu after */
label .menu {
position: absolute;
right: -100px;
top: -100px;
z-index: 100;
width: 200px;
height: 200px;
background: #E0C9B7;
border-radius: 50% 50% 50% 50%;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
box-shadow: 0 0 0 0 #E0C9B7, 0 0 0 0 #E0C9B7;
cursor: pointer;
}
label ul {
z-index: 200;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: .25s 0s ease-in-out;
transition: .25s 0s ease-in-out;
list-style-type:none;
}
label a {
margin-bottom: 1em;
display: block;
color: #291411;
text-decoration: none;
}
/* Footer styling */
footer {
padding: 1% 5%;
text-align:center;
background-color: #291411;
color: #E0C9B7;
}
To disable the scroll when the menu is open I tried to add overflow-x:hidden to the html and body but this makes the whole page weird
Did a simple solution with jquery, you can do this with javascript. I used jquery just to save time.
$(".js-change").on("change", function() {
$("html").toggleClass("menu-open");
});
/* Section styling */
body, html {
height: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
section {
width: 100%;
display: table;
margin: 0;
max-width: none;
height: 100vh;
}
.intro {
background-color:#291411;
}
.first {
background-color:#834940;
}
.second {
background-color:#291411;
}
.third {
background-color:#834940;
}
/* Hide scrollbars */
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #FF0000;
}
/* Menu before */
label .hamburger {
position: absolute;
top: 135px;
left: 50px;
width: 30px;
height: 2px;
background: #291411;
display: block;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
label .hamburger:after, label .hamburger:before {
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #291411;
}
label .hamburger:before { top: -10px; }
label .hamburger:after { bottom: -10px; }
label input { display: none; }
label input:checked + .menu {
box-shadow: 0 0 0 100vw #E0C9B7, 0 0 0 100vh #E0C9B7;
border-radius: 0;
}
label input:checked + .menu .hamburger {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
label input:checked + .menu .hamburger:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
bottom: 0;
}
label input:checked + .menu .hamburger:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 0;
}
label input:checked + .menu + ul { opacity: 1; }
/* Menu after */
label .menu {
position: absolute;
right: -100px;
top: -100px;
z-index: 100;
width: 200px;
height: 200px;
background: #E0C9B7;
border-radius: 50% 50% 50% 50%;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
box-shadow: 0 0 0 0 #E0C9B7, 0 0 0 0 #E0C9B7;
cursor: pointer;
}
label ul {
z-index: 200;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: .25s 0s ease-in-out;
transition: .25s 0s ease-in-out;
list-style-type:none;
}
label a {
margin-bottom: 1em;
display: block;
color: #291411;
text-decoration: none;
}
/* Footer styling */
footer {
padding: 1% 5%;
text-align:center;
background-color: #291411;
color: #E0C9B7;
}
.menu-open,
.menu-open body {
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="intro">
<label>
<input type="checkbox" class="js-change">
<span class="menu">
<span class="hamburger"></span>
</span>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</label>
<div class="text">
<h1>my<br>example<br>text</h1>
</div>
</div>
</section>
<section class="first">
</section>
<section class="second">
</section>
<section class="third">
</section>
I have a menu that I want to drop down when you click on the hamburger icon. The list items show up after the button is clicked, but is still seen when the button is not clicked. I can't figure out how to hide the menu.
I have the code here: Codepen
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
$(document).ready(function() {
$('#nav-icon3').on('click', function() {
$(this).toggleClass('open');
});
});
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-size: 1rem;
}
.header {
background-color: #FFF;
width: 100%;
margin: 0px auto;
display: block;
top: 0;
margin-top: 7%;
height: 80px;
}
h1 {
margin-left: 5%;
padding-left: 1%;
font-family: 'Lobster', cursive;
margin-top: 0;
float: left;
margin-bottom: 0;
color: #D18E8F;
}
#nav-icon {
width: 30px;
height: 30px;
position: relative;
margin-right: 7%;
margin-top: 8px;
/*padding-right: 1%;*/
float: right;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #8c8c8c;
border-radius: 6px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
top: 10px;
}
#nav-icon3 span:nth-child(4) {
top: 20px;
}
#nav-icon3.open span:nth-child(1) {
top: 10px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 10px;
width: 0%;
left: 50%;
}
.topnav.responsive {
/*display: none;*/
clear: both;
padding: 0;
height: 160px;
}
ul.topnav.responsive {
list-style: none;
font-family: 'Raleway', 'sans-serif';
float: left;
margin-left: 7%;
/*padding-left: 2%;*/
margin-top: 0;
width: 85%;
margin-bottom: 0;
}
ul.topnav.responsive li {
padding-top: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #c6c6c6;
}
ul.topnav.responsive li a {
text-decoration: none;
color: #8c8c8c;
}
ul.topnav.responsive li a:hover {
color: #7EBEA3;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>Gabriella Farfan</title>
<link href="https://fonts.googleapis.com/css?family=Lobster|Raleway" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="header">
<h1>Gabriella Farfan</h1>
<div id="nav-icon">
<div id="nav-icon3">
<a id="nav-icon3" onclick="myFunction();">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</div>
</div>
<ul class="topnav" id="myTopnav">
<li>
Work
</li>
<li>
About Me
</li>
<li style="border-bottom: none">
Contact
</li>
</ul>
</div>
</body>
</html>
Just add .topnav { display: none; } and .topnav.responsive { display: block; } and your code will work fine.
.topnav {
display: none;
}
.topnav.responsive {
display: block;
clear: both;
padding: 0;
height: 160px;
}
You can also add this for make full hamburger clickable (not only line).
#nav-icon3 {
width: 30px;
height: 30px;
display: block;
}
Working fork of your code: Сodepen
I have made this little fix. Hope it helps.
CSS:
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-size: 1rem;
}
.header {
background-color: #FFF;
width: 100%;
margin: 0px auto;
display: block;
top: 0;
margin-top: 7%;
height: 80px;
}
h1 {
margin-left: 5%;
padding-left: 1%;
font-family: 'Lobster', cursive;
margin-top: 0;
float: left;
margin-bottom: 0;
color: #D18E8F;
}
#nav-icon {
width: 30px;
height: 30px;
position: relative;
margin-right: 7%;
margin-top: 8px;
/*padding-right: 1%;*/
float: right;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon3 span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #8c8c8c;
border-radius: 6px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
top: 10px;
}
#nav-icon3 span:nth-child(4) {
top: 20px;
}
#nav-icon3.open span:nth-child(1) {
top: 10px;
width: 0%;
left: 50%;
}
#nav-icon3.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
top: 10px;
width: 0%;
left: 50%;
}
.responsive {
/*display: none;*/
clear: both;
padding: 0;
height: 160px;
}
ul.responsive {
list-style: none;
font-family: 'Raleway', 'sans-serif';
float: left;
margin-left: 7%;
/*padding-left: 2%;*/
margin-top: 0;
width: 85%;
margin-bottom: 0;
}
ul.responsive li {
padding-top: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #c6c6c6;
}
ul.responsive li a {
text-decoration: none;
color: #8c8c8c;
}
ul.responsive li a:hover {
color: #7EBEA3;
}
.topnav{
display:none;
}
JS:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className = " responsive";
} else {
x.className = "topnav";
}
}
Please let me know if this is what you wanted.
I was able to get MENU-1 to collapse into a hamburger menu for smaller devices, but cant seem to get MENU-2 to do the same. Can someone tell me where i'm going wrong because i've tried replicating MENU1 codes but to no avail
.cd-auto-hide-header {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #ffffff;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
}
.cd-auto-hide-header::after {
clear: both;
content: "";
display: block;
}
.cd-auto-hide-header.is-hidden {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
#media only screen and (min-width: 1024px) {
.cd-auto-hide-header {
height: 80px;
}
}
.cd-auto-hide-header .logo,
.cd-auto-hide-header .nav-trigger {
position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.cd-auto-hide-header .logo {
left: 5%;
}
.cd-auto-hide-header .logo a, .cd-auto-hide-header .logo img {
display: block;
}
.cd-auto-hide-header .nav-trigger
{
/* vertically align its content */
display: table;
height: 100%;
padding: 0 1em;
font-size: 1.2rem;
text-transform: uppercase;
color: #25283D;
font-weight: bold;
right: 0;
border-left: 1px solid #f2f2f2;
}
.cd-auto-hide-header .nav-trigger span
{
/* vertically align inside parent element */
display: table-cell;
vertical-align: middle;
}
.cd-auto-hide-header .nav-trigger em, .cd-auto-hide-header .nav-trigger em::after, .cd-auto-hide-header .nav-trigger em::before {
/* this is the menu icon */
display: block;
position: relative;
height: 2px;
width: 22px;
background-color: #25283D;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-auto-hide-header .nav-trigger em
{
/* this is the menu central line */
margin: 6px auto 14px;
-webkit-transition: background-color .2s;
transition: background-color .2s;
}
.cd-auto-hide-header .nav-trigger em::before, .cd-auto-hide-header .nav-trigger em::after {
position: absolute;
content: '';
left: 0;
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s;
}
.cd-auto-hide-header .nav-trigger em::before
{
/* this is the menu icon top line */
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
transform: translateY(-6px);
}
.cd-auto-hide-header .nav-trigger em::after
{
/* this is the menu icon bottom line */
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
}
#media only screen and (min-width: 1024px) {
.cd-auto-hide-header .nav-trigger
{
display: none;
}
}
.cd-auto-hide-header.nav-open .nav-trigger em
{
/* transform menu icon into a 'X' icon */
background-color: rgba(255, 255, 255, 0);
}
.cd-auto-hide-header.nav-open .nav-trigger em::before
{
/* rotate top line */
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.cd-auto-hide-header.nav-open .nav-trigger em::after
{
/* rotate bottom line */
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-primary-nav {
display: inline-block;
float: right;
height: 100%;
padding-right: 5%;
}
.cd-primary-nav > ul {
position: absolute;
z-index: 2;
top: 60px;
left: 0;
width: 100%;
background-color: #ffffff;
display: none;
box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
}
.cd-primary-nav > ul a {
/* target primary-nav links */
display: block;
height: 50px;
line-height: 50px;
padding-left: 5%;
color: #25283D;
font-size: 1.8rem;
border-top: 1px solid #f2f2f2;
}
.cd-primary-nav > ul a:hover, .cd-primary-nav > ul a.active {
color: #8F3985;
}
#media only screen and (min-width: 1024px) {
.cd-primary-nav {
/* vertically align its content */
display: table;
}
.cd-primary-nav > ul {
/* vertically align inside parent element */
display: table-cell;
vertical-align: middle;
/* reset mobile style */
position: relative;
width: auto;
top: 0;
padding: 0;
background-color: transparent;
box-shadow: none;
}
.cd-primary-nav > ul::after {
clear: both;
content: "";
display: block;
}
.cd-primary-nav > ul li {
display: inline-block;
float: left;
margin-right: 1.5em;
}
.cd-primary-nav > ul li:last-of-type {
margin-right: 0;
}
.cd-primary-nav > ul a {
/* reset mobile style */
height: auto;
line-height: normal;
padding: 0;
border: none;
}
}
.nav-open .cd-primary-nav ul,
.cd-primary-nav ul:target {
/*
show primary nav - mobile only
:target is used to show navigation on no-js devices
*/
display: block;
}
#media only screen and (min-width: 1024px) {
.nav-open .cd-primary-nav ul,
.cd-primary-nav ul:target {
display: table-cell;
}
}
/* --------------------------------
2. Auto-Hiding Navigation - with Sub Nav
-------------------------------- */
.cd-secondary-nav {
position: relative;
z-index: 1;
clear: both;
width: 100%;
height: 50px;
background-color: #25283D;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
}
.cd-secondary-nav::after {
/* gradient on the right - to indicate it's possible to scroll */
content: '';
position: absolute;
z-index: 1;
top: 0;
right: 0;
height: 100%;
width: 35px;
background: transparent;
background: -webkit-linear-gradient(right, #25283D, rgba(37, 40, 61, 0));
background: linear-gradient(to left, #25283D, rgba(37, 40, 61, 0));
pointer-events: none;
-webkit-transition: opacity .2s;
transition: opacity .2s;
}
.cd-secondary-nav.nav-end::after {
opacity: 0;
}
.cd-secondary-nav ul, .cd-secondary-nav li, .cd-secondary-nav a {
height: 100%;
}
.cd-secondary-nav ul {
}
.cd-secondary-nav ul::after {
clear: both;
content: "";
display: block;
}
.cd-secondary-nav li {
display: inline-block;
float: left;
/* do not shrink - elements float on the right of the element */
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.cd-secondary-nav li:last-of-type {
padding-right: 20px;
}
.cd-secondary-nav a {
display: block;
opacity: .6;
line-height: 50px;
padding: 0 1em;
}
.cd-secondary-nav a:hover, .cd-secondary-nav a.active {
opacity: 1;
}
#media only screen and (min-width: 1024px) {
.cd-secondary-nav {
height: 70px;
overflow: visible;
}
.cd-secondary-nav ul {
/* reset mobile style */
display: block;
text-align: center;
}
.cd-secondary-nav li {
/* reset mobile style */
float: none;
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.cd-secondary-nav a {
line-height: 70px;
}
.cd-secondary-nav a.active {
box-shadow: inset 0 -3px #8F3985;
}
}
.cd-secondary-nav.fixed {
position: fixed;
top: 60px;
}
.cd-secondary-nav.slide-up {
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
}
#media only screen and (min-width: 1024px) {
.cd-secondary-nav.fixed {
top: 80px;
box-shadow: 0 -6px 0 #25283D;
}
.cd-secondary-nav.slide-up {
-webkit-transform: translateY(-80px);
-ms-transform: translateY(-80px);
transform: translateY(-80px);
}
}
<header class="cd-auto-hide-header">
<div class="logo"><img src="img/cd-logo.svg" alt="Logo"></div>
<nav class="cd-primary-nav">
<a href="#cd-navigation" class="nav-trigger">
<span>
<em aria-hidden="true"></em>
MENU-1
</span>
</a> <!-- .nav-trigger -->
<ul id="cd-navigation">
<li>The team</li>
<li>Our Products</li>
<li>Our Services</li>
<li>Shopping tools</li>
<li>Contact Us</li>
</ul>
</nav> <!-- .cd-primary-nav -->
</header> <!-- .cd-auto-hide-header -->
<section class="cd-hero">
<div class="cd-hero-content">
<!-- your content here -->
</div>
</section> <!-- .cd-hero -->
<nav class="cd-secondary-nav">
<span>
<em aria-hidden="true"></em>
MENU-2
</span>
<ul>
<li><a class="active" href="#0">Intro</a></li>
<li>Features</li>
<li>Photos</li>
<li>Videos</li>
<li>Specs</li>
<li>Support</li>
<li>Compare</li>
<li>Buy</li>
</ul>
</nav> <!-- .cd-secondary-nav -->
I am attempting to transform an off canvas nav once the screen size hits a width of 600px. I have the nav bar toggled with a button that appears at 600px or less. I am trying to get the nav to close if you resize the screen to a width over 600px and then reopen iff the nav was already opened before resizing the screen. The ".show-nav #site-canvas" clauses in the two #media break points don't seem to do anything and i'm not sure why.
Here is the css
#media screen and (min-width: 601px)
{
.toggle-nav
{
display: none;
}
#nav
{
display: block;
}
.show-nav #site-canvas
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#media screen and (max-width: 600px)
{
.toggle-nav
{
display: block;
}
#nav
{
display: none;
}
.show-nav #site-canvas
{
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
}
#site-wrapper
{
position: relative;
overflow: hidden;
width: 100%;
}
#site-canvas
{
width: 100%;
height: 100%;
position: relative;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: 300ms ease all;
transition: 300ms ease all;
}
#site-menu
{
width: 300px;
height: 100%;
position: absolute;
top: 0;
left: -320px;
background: black;
}
#site-menu > .nav-pills > li
{
padding-left: 15px;
width: 100%;
list-style-type: none;
border-radius: 5px;
border: 1px solid whitesmoke;
}
#site-menu > .nav-pills > a
{
display: block;
}
.show-nav #site-canvas
{
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
Change your css order Try this CSS
#site-wrapper
{
position: relative;
overflow: hidden;
width: 100%;
}
#site-canvas
{
width: 100%;
height: 100%;
position: relative;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: 300ms ease all;
transition: 300ms ease all;
}
#site-menu
{
width: 300px;
height: 100%;
position: absolute;
top: 0;
left: -320px;
background: black;
}
#site-menu > .nav-pills > li
{
padding-left: 15px;
width: 100%;
list-style-type: none;
border-radius: 5px;
border: 1px solid whitesmoke;
}
#site-menu > .nav-pills > a
{
display: block;
}
.show-nav #site-canvas
{
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
#media screen and (min-width: 601px)
{
.toggle-nav
{
display: none;
}
#nav
{
display: block;
}
.show-nav #site-canvas
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#media screen and (max-width: 600px)
{
.toggle-nav
{
display: block;
}
#nav
{
display: none;
}
.show-nav #site-canvas
{
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
}