Auto close navbar after click on link responsive mode

Auto close navbar after click on link responsive mode - javascript

I add also my CSS code of navbar, all is working well, only I need is auto close when click on link
/* navbar */
nav{
height: 4rem;
width: 100vw;
background-color: #efefef;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
display: flex;
position: fixed;
z-index: 10;
}
/*Styling logo*/
/* .logo{
padding:1vh 1vw;
text-align: center;
}
.logo img {
height: 5rem;
width: 5rem;
} */
/*Styling Links*/
.nav-list{
display: flex;
list-style: none;
width: 80vw;
padding: 0 0.7vw;
justify-content:center;
align-items: center;
margin: 0 auto;
text-transform: uppercase;
}
.nav-list li a{
text-decoration: none;
margin: 0 1em;
color: #000;
font-weight: 600;
}
.nav-list li a:hover {
color: #1abc9c;
}
.nav-list li {
position: relative;
color: #000;
}
.nav-list li a::before {
content: "";
display: block;
height: 3px;
width: 0%;
background-color: #1abc9c;
position: absolute;
transition: all ease-in-out 250ms;
margin: 0 0 0 10%;
}
.nav-list li a:hover::before{
width: 80%;
}
/*Styling Hamburger Icon*/
.hamburger div{
width: 30px;
height:3px;
background: #000;
margin: 5px;
transition: all 0.3s ease;
}
.hamburger{
display: none;
}
/*Stying for small screens*/
#media screen and (max-width: 800px){
nav{
position: fixed;
z-index: 3;
}
.hamburger{
display:block;
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
transition: all 0.7s ease;
}
.nav-list {
position: fixed;
background: #efefef;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(50px at 90% -20%);
-webkit-clip-path: circle(50px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-list.open{
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.nav-list li{
opacity: 0;
margin-top: 3em;
}
.nav-list li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-list li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-list li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
.nav-list li:nth-child(4){
transition: all 0.5s ease 0.7s;
}
.nav-list li:nth-child(5){
transition: all 0.5s ease 0.8s;
}
.nav-list li:nth-child(6){
transition: all 0.5s ease 0.9s;
margin: 0;
}
.nav-list li:nth-child(7){
transition: all 0.5s ease 1s;
margin: 0;
}
li.fejd{
opacity: 1;
}
}
/*Animating Hamburger Icon on Click*/
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
transition: all 0.7s ease;
width:0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
/* /navbar end */
I would like to close navbar when a user clicks on link in responsive mode. I have tried a few examples but it doesn't work for me. Thank you very much!
<nav class="navBar" id="navbar">
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>`
<ul class="nav-list" id="menu">
<li>Accueil</li>
<li>Parents</li>
<li>A propos</li>
<li>Temoignagez</li>
</ul>
</nav>
This is my js code. All is working well! I only need to close nav when an user clicks on links
// navbar
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-list");
const links = document.querySelectorAll(".nav-list li");
hamburger.addEventListener('click', ()=>{
//Animate Links
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fejd");
});
//Hamburger Animation
hamburger.classList.toggle("toggle");
});
const navToggle = document.getElementById('nav-toggle');
const navLink = document.querySelectorAll('.navLink').parentElement;
navToggle.addEventListener('click', () => {
document.body.classList.toggle('nav-open');
});
</script>

you can use foreach to apply addeventlistener to all elements
document.querySelectorAll('.nav-item').forEach(link=>{
link.addEventListener('click', () => {
alert();
})
})

Related

How Do I Close A Hamburger Menu When Clicking On The Forward Or Back Arrow On A Browser?

Below is the code I've got set up for my responsive menu. On the hamburger menu, I have some Javascript set so that the menu will close after clicking on one of the links inside of it.
Javascript:
var elements = document.getElementsByTagName('li');
var closeHamp = function() {
document.getElementsByClassName('cp_menuicon')[0].click();
};
　for (var i = 0; i < elements.length; i++) {
　　elements[i].addEventListener('click', closeHamp, false);
}
What I'd like to do is also have the hamburger menu close when navigating between pages using the forward or backward arrow on a web browser. I've played around with a few bits of Javascript but haven't been able to achieve the result I'm looking for. If anyone knows how I could close the hamburger menu when navigating between pages I'd appreciate you sharing your knowledge with me. Thank you.
Menu:
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
CSS:
.body {background-color: white;
font-family: sans-serif;
}
.searchbar {float: right;
}
.image {text-align: center;
}
.setsumei {margin-left: 20px;
margin-right: 20px;
}
.footer {width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {content: "";
display: block;
}
.site-footer,
.page-wrap:after {height: 20px;
}
.site-footer {text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {list-style: none;
}
a {text-decoration: none;
color: black;
}
.cp_cont {height: auto;
}
/* menu */
.cp_offcm03 {position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {height: 100%;
}
.cp_offcm03 li {display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {display: none;
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {display: none;
}
/* content */
.cp_container {position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {display: block;
margin-right: 0;
}
.cp_offcm03 a {padding: 20px;
}
/* menu toggle */
.cp_mobilebar {display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {display: block;
opacity: .6;
}
#h-menu_black {display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {overflow: hidden;
position: fixed;
}
}

How Can I Close My Hamburger Menu After Clicking On A Link?

I have a hamburger menu that's made with pure CSS. It works well, but I'd like to be able to have it closed after clicking on one of the links inside it.
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
I've tried to add a closeNav(); function, but haven't been able to get it working. I’d like it so that if I were to go back to a page where the hamburger menu had been opened and used to navigate to another page then it would be closed. If anyone knows how I could close the menu when clicking on a link inside of it I'd appreciate you sharing your knowledge with me. Thank you.
This is my CSS.
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}

How do I add/toggle a class to element in order to switch Hamburger menu to X in order to close and back again

I'm trying to use vanilla JavaScript to switch the hamburger menu to an X and then back again. I want to only use vanilla js, not JQuery.
I have included the code to show I have tried. I am trying to get the '.open' class to be added/toggle when I "open" the menu. But to no avail.
Here is my code:
const navToggle = document.getElementById('nav-toggle');
navToggle.addEventListener('click', () => {
if (navToggle.classList)
navToggle.classList.add('open');
else
navToggle.className += ' ' + open;
// navToggle.style.display('open');
});
*,
html {
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #333;
-webkit-font-smoothing: antialiased;
}
img.logo-header {
width: 10rem;
height: 10rem;
}
.header-wrapper {
border: 1px solid black;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
}
.logo-header {
grid-column: 1;
}
/* Navbar */
.nav-header {
grid-column: 2;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
/* Navbar Hamburger Menu */
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin: 0 0 1em 1em;
}
nav a {
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
color: white;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
/* Change Color */
color: #000;
}
.nav-toggle:checked~nav {
transform: scale(1, 1);
}
.nav-toggle:checked~nav a {
opacity: 1;
-webkit-transition: opacity 250ms ease-in-out 250ms;
-o-transition: opacity 250ms ease-in-out 250ms;
transition: opacity 250ms ease-in-out 250ms;
}
.nav-toggle {
display: none;
}
.nav-toggle-label {
position: absolute;
top: 4em;
right: 0;
margin-right: 1em;
height: auto;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: .125em;
width: 2.15em;
border-radius: .125em;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: .5em;
}
.nav-toggle-label span::after {
top: .5em;
}
.open .nav-toggle {
transform: rotate(45deg);
}
.open .nav-toggle::before {
opacity: 0;
}
.open .nav-toggle::after {
transform: translateY(-3px) rotate(-90deg);
}
<div class="header-wrapper">
<img class="logo-header" src="./assets/img/logo.png" alt="">
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav class="nav-header">
<ul>
<li class="nav-item">Ministries</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
<li class="nav-item">Book</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label"><span></span></label>
</div>
I want the hamburger menu to disappear and turn into an X, then switch back to hamburger if clicked again. Right now, all that is happening is the menu is appearing and disappearing when clicked but nothing else. Would like there to be a transition from a hamburger to X. Nothing super fancy.

const navToggle = document.getElementById('nav-toggle');
navToggle.addEventListener('click', () => {
//This is a better way to toggle classes
navToggle.classList.toggle('open')
});
*, html {
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #333;
-webkit-font-smoothing: antialiased;
}
img.logo-header {
width: 10rem;
height: 10rem;
}
.header-wrapper {
border: 1px solid black;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
}
.logo-header {
grid-column: 1;
}
/* Navbar */
.nav-header {
grid-column: 2;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
/* Navbar Hamburger Menu */
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin: 0 0 1em 1em;
}
nav a {
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
color: white;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
/* Change Color */
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1, 1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
-webkit-transition: opacity 250ms ease-in-out 250ms;
-o-transition: opacity 250ms ease-in-out 250ms;
transition: opacity 250ms ease-in-out 250ms;
}
/* Make middle bar invisible */
.nav-toggle:checked ~ .nav-toggle-label > span {
background-color: transparent;
}
/* Rotate and translate the top and bottom bar */
.nav-toggle:checked ~ .nav-toggle-label > span::before {
transform: translateY(0.5em) rotate(45deg)
}
.nav-toggle:checked ~ .nav-toggle-label > span::after {
transform: translateY(-0.5em) rotate(-45deg)
}
.nav-toggle {
display: none;
}
/* Fixed height of the box so that it covers the whole switch/button */
.nav-toggle-label {
position: absolute;
top: 2.925em;
right: 0;
margin-right: 1em;
height: 2.15em;
display: flex;
align-items: center;
}
/* Added transition */
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: .125em;
width: 2.15em;
border-radius: .125em;
position: relative;
transition: transform 0.2s, background-color 0.2s;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: .5em;
}
.nav-toggle-label span::after {
top: .5em;
}
.open .nav-toggle {
transform: rotate(45deg);
}
.open .nav-toggle::before {
opacity: 0;
}
.open .nav-toggle::after {
transform: translateY(-3px) rotate(-90deg);
}
<div class="header-wrapper">
<img class="logo-header" src="./assets/img/logo.png" alt="">
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav class="nav-header">
<ul>
<li class="nav-item">Ministries</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
<li class="nav-item">Book</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label"><span></span></label>
</div>
Here you go:
https://codepen.io/anon/pen/YMoEwX
By using transform: rotate() translateY() I make the top and bottom bar into an X and I also make the middle bar invisible.
I also went ahead and fixed the height of the switch/button and your JavaScript.

JS/jquery: have <li>'s rotate/scale in with delay? Weird CSS

Ok, never done anything like this in JS and CSS here but I am trying to achieve this effect with some buttons in a circular expanding div, and a static "x" button in far left that rotates. https://dribbble.com/shots/3445331-Expanding-Button
For whatever reason I can't get the transition to happen with an increasing delay on each li. What I do is add a "pill" class to both the ul containing the lis (to make them display:none to block) and then to the individual lis.
$('.top-left').hover(function(){
$(this).toggleClass("pill");
$('.top-left ul').toggleClass("pill");
$('.top-left img').toggleClass("pill");
$('.top-left ul li').each(function(i, elem) {
$(elem).delay(i * 800).toggleClass("pill");
});
});
.top-left ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 35px;
margin-left: 0;
display: none;
transform: translate(20px, -46px);
}
.top-left img {
margin: auto;
width: 40px;
display: table;
margin: 0 auto 10px;
margin-top: 6px;
transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
transition-duration: 205ms;
}
.top-left img.pill {
display: block;
margin-left: 15px;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
transition-duration: 250ms;
}
.top-left ul li {
cursor: pointer;
padding-right: 10px;
float: left;
transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
transition-duration: 250ms;
transform: scale(0.01,0.01) rotate(-30deg) translate(43px, 0px);
}
.top-left ul li.pill:hover {
color: #fff;
}
.top-left {
width: 55px;
height: 55px;
border-radius: 55px;
transition: width ease 0.3s;
margin-top: 15px;
background: #4d4d4d;
border: 4px solid #333;
}
.top-left.pill {
width: 207px;
}
.top-left ul.pill {
display: block;
}
.top-left ul li.pill {
float: left;
transform: scale(1,1) rotate(0deg) translate(43px, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-left">
<img src="http://placehold.it/100x100" alt="">
<ul>
<li value='1'><i class="icon-twitter-sign"></i></li>
<li value='2'><i class="icon-twitter-sign"></i></li>
<li value='3'><i class="icon-instagram"></i></li>
</ul>
</div>
The lis show up and in the right place, but no animation occurs, at least that is visible. What is wrong here?

You just need to add class 'pill' to .top-left :
$('.top-left').hover(function () {
$(this).toggleClass("pill");
}
And then you can use this animation with different animation delay for all lis.
#keyframes myAnim {
0% {transform: rotate(90deg) scale(0);}
100% {transform: rotate(0deg) scale(1);}
}
.top-left.pill ul li:first-child {
animation: myAnim .25s;
}
.top-left.pill ul li:nth-child(2) {
animation: myAnim .25s .8s;
}
.top-left.pill ul li:last-child {
animation: myAnim .25s 1.6s;
}
And the rest of the css:
.top-left ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 35px;
/* padding-top: 10px;
padding-bottom: 10px; */
margin-left: 0px;
display: none;
transform: translate(20px, -46px);
}
.top-left img {
margin: auto;
width: 40px;
display: table;
margin: 0 auto 10px;
margin-top: 6px;
/* What transition ? */
transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
transition-duration: 250ms;
}
.top-left.pill img {
display: block;
margin-left: 15px;
transform: rotate(90deg);
}
.top-left ul li {
cursor: pointer;
padding-right: 10px;
float: left;
}
.top-left.pill li:hover {
color: white;
}
.top-left {
width: 55px;
height: 55px;
border-radius: 55px;
transition: width ease 0.3s;
margin-top: 15px;
background: #4d4d4d;
border: 4px solid #333333;
}
.top-left.pill {
width: 207px;
}
.top-left.pill ul {
display: block;
}

Add a feature to my image gallery that allows images to open in new window

I've built an image gallery that lets you click on a thumbnail in a grid which activates it to pop up with a larger version of the image and an image description - however what I want to do now is add the ability to click on the larger image and have it open the image in a new tab (ideally with a simple target _blank link) but I can't figure out how to add it to my current code...
If anyone could give me some advice it would be hugely appreciated! I'll attach a fiddle so you can see the code and the link to the actual page on the site I'm having trouble with!
HTML:
<div class="container">
<div class="content">
<div class="grid">
<div class="grid__item" data-size="1680x2520">
<a href="img/original/big1.jpg" class="img-wrap">
<img src="img/thumbs/big1.jpg" alt="Big 1" />
<div class="description description--grid">
<h3>Chemical Field I</h3>
<p>Chemical on Paper <em>70 x 100cm</em></p>
</div>
</a>
</div>
<div class="grid__item" data-size="1680x2520">
<a href="img/original/big2.jpg" class="img-wrap">
<img src="img/thumbs/big2.jpg" alt="Big 2" />
<div class="description description--grid">
<h3>Chemical Field II</h3>
<p>Chemical on Paper <em>70 x 100cm</em></p>
</div>
</a>
</div>
<div class="grid__item" data-size="1680x2520">
<a href="img/original/big3.jpg" class="img-wrap">
<img src="img/thumbs/big3.jpg" alt="Big 3" />
<div class="description description--grid">
<h3>Chemical Field III</h3>
<p>Chemical on Paper <em>70 x 100cm</em></p>
</div>
</a>
</div>
</div>
</div>
</div>
CSS:
.content {
margin-left: 220px;
width: calc(100%-220px);
}
.grid {
position: relative;
margin: 0;
padding-top: 7px;
}
.js .grid::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background: #fff url(../img/loading.svg) no-repeat 50% 75px;
background-size: 60px auto;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.js .grid--loaded::after {
opacity: 0;
}
.grid__item {
width: 259.5px;
padding: 14px;
}
.grid__item--current {
opacity: 0 !important;
}
.img-wrap {
display: block;
}
.img-wrap:focus,
.img-wrap:hover {
outline: none;
}
.img-wrap img {
display: block;
max-width: 100%;
}
.preview {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
display: -ms-flex;
display: -webkit-flex;
display: flex;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
width: 50%;
height: 100%;
pointer-events: none;
}
.preview::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: #fff;
-webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.preview--open {
pointer-events: auto;
}
.preview--open::before {
opacity: 1;
}
.clone {
position: fixed;
z-index: 110;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-backface-visibility: hidden;
}
.original {
position: relative;
z-index: 120;
display: block;
object-fit: contain;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
-webkit-backface-visibility: hidden;
}
.preview--open .animate {
/* open */
-webkit-transition: -webkit-transform 0.6s, opacity 0.2s;
transition: transform 0.6s, opacity 0.2s;
}
.animate {
/* close */
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
.description {
color: #000;
}
.js .description--grid {
display: none;
}
.description--preview {
font-size: 1.5em;
font-family: Open Sans, sans-serif;
position: absolute;
z-index: 140;
width: 100%;
left: 100%;
top: 0;
height: 100%;
padding: 0 1em;
display: -ms-flex;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
opacity: 0;
-webkit-transition: opacity 1s, -webkit-transform 1s;
transition: opacity 1s, transform 1s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
}
.preview--open .description--preview {
opacity: 1;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.description--preview h3 {
font-weight: normal;
margin: 0;
}
.description--preview p {
font-size: 0.65em;
max-width: 100%;
}
.description--preview p em {
color: #5D5D5D;
display: block;
padding: 0.4em 0 0 0;
}
/* Details */
.details {
max-width: 100%;
/* IE 10-11 bug flexbox */
}
.details ul {
line-height: 1;
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.details ul li {
font-size: 0.5em;
position: relative;
display: inline-block;
margin: 0 1em 0 0;
padding: 0.15em 0;
white-space: nowrap;
opacity: 0;
color: #9d9d9d;
-webkit-transition: -webkit-transform 1s, opacity 1s;
transition: transform 1s, opacity 1s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
.preview--open .details ul li {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.preview--open .details ul li:nth-child(1) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.preview--open .details ul li:nth-child(2) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.preview--open .details ul li:nth-child(3) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.preview--open .details ul li:nth-child(4) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.preview--open .details ul li:nth-child(5) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.details ul li:first-child {
font-weight: bold;
color: #909090;
}
.icon {
font-family: 'camera-icons';
font-weight: normal;
font-style: normal;
font-variant: normal;
line-height: 1;
display: inline-block;
vertical-align: middle;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
speak: none;
}
.icon + span {
margin-left: 5px;
vertical-align: middle;
}
.icon-focal_length:before {
content: '\e600';
}
.icon-exposure_time:before {
content: '\e601';
}
.icon-iso:before {
content: '\e602';
}
.icon-camera:before {
content: '\e603';
}
.icon-aperture:before {
content: '\e604';
}
.details .icon {
margin-right: 5px;
color: #000;
}
/* Close button */
.action {
font-size: 1.5em;
margin: 0;
padding: 0;
cursor: pointer;
vertical-align: top;
color: #000;
border: none;
background: none;
}
.action:hover,
.action:focus {
color: #CCC;
outline: none;
}
.action--close {
position: fixed;
z-index: 150;
top: 0;
right: 0;
padding: 1em;
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: scale3d(0.6, 0.6, 1);
transform: scale3d(0.6, 0.6, 1);
}
.preview--image-loaded .action--close {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.text-hidden {
position: absolute;
display: block;
overflow: hidden;
width: 0;
height: 0;
color: transparent;
}
http://benedictbuckle.co.za/chemical-works.html
https://jsfiddle.net/1r6br1th/
Any help would be hugely appreciated!

Just added target="_blank" to the first a tag and it worked.
<a href="http://benedictbuckle.co.za/img/original/big1.jpg" class="img-wrap" target="_blank">
<img src="http://benedictbuckle.co.za/img/thumbs/big1.jpg" alt="Big 1" />
<div class="description description--grid">
<h3>Chemical Field I</h3>
<p>Chemical on Paper <em>70 x 100cm</em></p>
</div>
</a>
Click the first image: https://jsfiddle.net/1r6br1th/1/

Develop Reference

JavaScript is the programming language of the Web.

Auto close navbar after click on link responsive mode - javascript

you can use foreach to apply addeventlistener to all elements document.querySelectorAll('.nav-item').forEach(link=>{ link.addEventListener('click', () => { alert(); }) })

Related

How Do I Close A Hamburger Menu When Clicking On The Forward Or Back Arrow On A Browser?

How Can I Close My Hamburger Menu After Clicking On A Link?

How do I add/toggle a class to element in order to switch Hamburger menu to X in order to close and back again

JS/jquery: have <li>'s rotate/scale in with delay? Weird CSS

Add a feature to my image gallery that allows images to open in new window

Categories

Resources