hey all i want to create overlay full screen search on click so i tried this:
this is the navbar code:
<nav class="navbar navbar-default navbar-color">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa fa-search"></i></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
and this is overlay code:
<div id="search">
<button type="button" class="close">×</button>
<form>
<input type="search" value="" placeholder="SEARCH KEYWORD(s)"/>
<button type="submit" class="btn btn-primary">Search</button>
</form>
and this is the css:
#search {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate(0px, -100%) scale(0, 0);
-moz-transform: translate(0px, -100%) scale(0, 0);
-o-transform: translate(0px, -100%) scale(0, 0);
-ms-transform: translate(0px, -100%) scale(0, 0);
transform: translate(0px, -100%) scale(0, 0);
opacity: 0;
}
#search input[type="search"] {
position: absolute;
top: 50%;
width: 100%;
color: white;
background: rgba(0, 0, 0, 0);
font-size: 60px;
font-weight: 300;
text-align: center;
border: 0px;
margin: 0px auto;
margin-top: -51px;
padding-left: 30px;
padding-right: 30px;
outline: none;
}
#search .btn {
position: absolute;
top: 50%;
left: 50%;
margin-top: 61px;
margin-left: -45px;
background-color: limegreen;
border: black;
}
#search .close {
position: fixed;
top: 15px;
right: 15px;
color: #fff;
background-color: limegreen;
border-color: green;
opacity: 1;
padding: 10px 17px;
font-size: 27px;
}
#search.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
opacity: 1;
}
and for jquery i used this:
$(function() {
$('a[href="#search"]').on("click", function(event) {
event.preventDefault();
$("#search").addClass("open");
$('#search > form > input[type="search"]').focus();
});
$("#search, #search button.close").on("click keyup", function(event) {
if (
event.target == this ||
event.target.className == "close" ||
event.keyCode == 27
) {
$(this).removeClass("open");
}
});
$("form").submit(function(event) {
event.preventDefault();
return false;
});
});
i know it is a lot of code but i really need help, on click is not working and on inspect element, nothing is showing on console as error....
any help would be appreciated
thank you for your time guys
Related
i try to change css but not work text short text is ok but i have to put long line when click it not smooth while transition working i use template from codeply(https://www.codeply.com/p/RXiaRJEqWj#), i want text show up smooth like button or short text please advise me how I should use it to remember for next time i can help in community if i saw someone ask like me thank you.
<div id="mySidenav" class="sidenav">
<h3>Painéis</h3>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
</div>
<nav class="navbar navbar-light bg-light" style="box-shadow: 0px 0px 8px #000000;">
<!-- Collapse button -->
<button class="navbar-toggler hamburger-button" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" onclick= "Nav();" style="z-index: 2">
<div class="animated-icon"><span></span><span></span><span></span></div>
</button>
<!-- Navbar brand -->
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">POWER BI CBMAM</a>
</div>
</nav>
<script>
function Nav() {
var width = document.getElementById("mySidenav").style.width;
if (width === "0px" || width == "") {
document.getElementById("mySidenav").style.width = "250px";
$('.animated-icon').toggleClass('open');
}
else {
document.getElementById("mySidenav").style.width = "0px";
$('.animated-icon').toggleClass('open');
}
}
</script>
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff!important;
backdrop-filter: blur(15px);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
box-shadow: 0px 0px 8px #000000;
}
.sidenav h3{
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 25px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a {
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 16px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #ffffff;
background-color:#000000;
padding:12px;
}
.sidenav .item i{
margin-right: 15px;
}
.sidenav::-webkit-scrollbar {
display: none;
}
.animated-icon {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-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;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
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;
}
.animated-icon span {
background: #f3e5f5;
}
.animated-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.animated-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
.animated-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}
button {border:none !important;}
button:focus{outline: none;}
.center {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
vertical-align: middle;
}
i tried to change the css and and the javascript but it did changed at all, just gave me more problems, i did change position and display in the css, but dont seem this is the problem, someone help me pls
You dont need JQuery with this simple code.
Try this:
function Nav() {
var width = document.getElementById("mySidenav").style.width;
var icon = document.querySelector(".animated-icon");
if (width === "0px" || width == "") {
document.getElementById("mySidenav").style.width = "250px";
icon.classList.toggle('open');
} else {
document.getElementById("mySidenav").style.width = "0px";
icon.classList.toggle('open');
}
}
body{
margin:0;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff!important;
backdrop-filter: blur(15px);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
box-shadow: 0px 0px 8px #000000;
}
.sidenav h3{
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 25px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a {
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 16px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #ffffff;
background-color:#000000;
padding:12px;
}
.sidenav .item i{
margin-right: 15px;
}
.sidenav::-webkit-scrollbar {
display: none;
}
.animated-icon {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-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;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
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;
}
.animated-icon span {
background: #f3e5f5;
}
.animated-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.animated-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
.animated-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}
button {border:none !important;}
button:focus{outline: none;}
.hamburger-button{
margin:25px;
background-color: rgba(0,0,0,0);
}
.center {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
vertical-align: middle;
}
.navbar-toggler{
position:relative;
z-index:2;
}
<div id="mySidenav" class="sidenav">
<h3>Painéis</h3>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
<div class="item"><i class="fas fa-desktop"></i>Dashboard</div>
</div>
<nav class="navbar navbar-light bg-light" style="box-shadow: 0px 0px 8px #000000;">
<!-- Collapse button -->
<button class="navbar-toggler hamburger-button" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" onclick= "Nav();" style="z-index: 2">
<div class="animated-icon"><span></span><span></span><span></span></div>
</button>
<!-- Navbar brand -->
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">POWER BI CBMAM</a>
</div>
</nav>
I have a hamburger menu for the mobile version of a website, when you click the links it takes you to the right place, but the menu doesn't close. Let me clarify I only learnt HTML and CSS, but not Javascript, so I have no idea what I'm doing and I won't until I get around to that, but I need this website before that.
This is the HTML (I included the desktop version navbar just for reference):
<div class="navbar" id="navbar">
<div class="container-fluid">
<div class="col-md-1 offset-1">
<div class="logo" id="logo"><img src="img/"></div>
</div>
<div class="col-md-6 offset-1">
<ul class="navbar-middle">
<li>SERVICIOS</li>
<li>TESTIMONIOS</li>
<li>CONTACTO</li>
</ul>
</div>
<div class="col-md-2">
<ul class="navbar-right">
<li><i class="fab fa-facebook fa-2x"></i></li>
<li><i class="fab fa-instagram fa-2x"></i></li>
</ul>
</div>
<button class="navbar-toggler second-button" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarToggleExternalContent10"
aria-controls="navbarToggleExternalContent10" aria-expanded="false"
aria-label="Toggle navigation">
<div class="animated-icon2"><span></span><span></span><span></span><span></span></div>
</button>
</div>
</div>
<div class="collapse" id="navbarToggleExternalContent10">
<div class="bg-light shadow-3 p-4">
<button class="btn btn-link btn-block border-bottom m-0">Servicios</button>
<button class="btn btn-link btn-block border-bottom m-0">Testimonios</button>
<button class="btn btn-link btn-block m-0">Contacto</button>
</div>
</div>
The JS as it is:
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<script defer src="/your_path_to_version_6_files/js/all.js"></script>
<script language="JavaScript" type="text/javascript">
document.querySelector('.second-button').addEventListener('click', function () {
document.querySelector('.animated-icon2').classList.toggle('open');
});
</script>
And the CSS (all the 'animated icon' stuff is straight from the Bootstrap website, so feel free to skip over that):
.navbar {
position: fixed;
width:100%;
z-index: 10;
overflow: hidden;
}
.navbar-toggler {
display:none;
}
.collapse {
display: none;
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.2s linear;
text-align: center;
}
.collapse.show {
display: block;
position: fixed;
z-index: 3;
width: 100%;
}
.m-0 {
position: relative;
width: 100%;
}
.animated-icon2 {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-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;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon2 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
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;
}
.animated-icon2 span {
background: white;
}
.animated-icon2 span:hover {
background: #EC673C;
}
.animated-icon2 span:active {
background: #B22818;
}
.animated-icon2 span:nth-child(1) {
top: 0px;
}
.animated-icon2 span:nth-child(2),
.animated-icon2 span:nth-child(3) {
top: 10px;
}
.animated-icon2 span:nth-child(4) {
top: 20px;
}
.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}
.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}
Here is the code I am trying to get to cooperate with one another. I just need my Javascript to help in opening my hamburger icon menu. Currently, my hamburger icon works. It will create an "x" when clicked on, but it's just that my menu does not display when I click on the hamburger icon as it should.
* JAVASCRIPT *
export const navAnimation = function () {
const hamburgerDiv = document.querySelector(".nav--hamburger");
const hamburgerIcon = document.querySelector(".hamburger");
const nav = document.querySelector(".nav--ul");
const blur = document.querySelector(".blur");
hamburgerDiv.addEventListener("click", () => {
// nav.classList.toggle("hidden");
hamburgerIcon.classList.toggle("hidden");
cross.classList.toggle("hidden");
nav.classList.toggle("move-in");
nav.classList.toggle("move-out");
// blur.classList.toggle("hidden");
blur.classList.toggle("move-in");
blur.classList.toggle("move-out");
});
};
navAnimation();
// Hamburger Icon //
$(document).ready(function(){
$('#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
* HTML *
<header class="header">
<div class="blur move-out"></div>
<div class="header--logo">
<img src="images/Logo-2.png" alt="Site logo" class="logo"/>
</div>
<nav class="nav">
<div class="nav--hamburger">
<div id="nav-icon1" class = "hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul class="nav--ul move-out">
<li class="nav--li--item">
<a class="nav--li--anchor" href="#home">
<span class="order"></span>HOME
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#about">
<span class="order"></span>ABOUT
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#services"
><span class="order"></span>SERVICES
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="booking">
<span class="order"></span>BOOKING
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#footer">
<span class="order"></span>CONTACT US
</a>
</li>
</ul>
</nav>
</header>
* CSS *
<style>
#nav-icon1 {
width: 55px;
position: relative;
margin: 0px auto;
-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;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #551a00;
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-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 10px;
}
#nav-icon1 span:nth-child(3) {
top: 20px;
}
#nav-icon1.open span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1.open span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nav {
font-family: "Bellefair", serif;
color: #fff;
font-size: var(--step-0);
font-weight: 700;
position: absolute;
top: 0;
right: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: end;
width: 80%;
overflow: hidden;
}
.nav--ul {
list-style-type: none;
letter-spacing: 2px;
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: center;
min-height: 100vh;
align-items: start;
width: 100%;
position: relative;
z-index: 2;
padding-left: 2rem;
}
.nav--li--anchor {
color: #fff;
text-decoration: none;
}
.nav--li--anchor:hover {
cursor: pointer;
}
.cross {
position: absolute;
top: 3%;
right: 10%;
transform: translate(-3%, -10%);
}
.blur {
width: 80%;
left: 20%;
position: absolute;
min-height: 118.3vh;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
z-index: 2;
}
.hidden {
visibility: hidden;
}
.move-in {
animation: scale-in-hor-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
</style>
So I have just made a simple hamburger style sidebar however i can't seem to get it to work when i click on the hamburger icon it turns to an X like it should but the menu only appears briefly when i click the close button is there a reason for this and is there a way i can get JUST the close button to actually be in the sidebar with the z-index or something?
Codeply link:
https://www.codeply.com/p/R4UGFDIGuw
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav::-webkit-scrollbar {
display: none;
}
.animated-icon {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-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;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
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;
}
.animated-icon span {
background: #f3e5f5;
}
.animated-icon span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.animated-icon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}
.animated-icon.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
.animated-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}</style>
<title>Index</title>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-light bg-light">
<!-- Collapse button -->
<button class="navbar-toggler hamburger-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent22" aria-controls="navbarSupportedContent22" aria-expanded="false" aria-label="Toggle navigation" onclick="Nav()"><div class="animated-icon"><span></span><span></span><span></span></div></button>
<!-- Navbar brand -->
<a class="navbar-brand" style="padding-right: 50%" href="#">Navbar</a>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent22">
<!-- Links -->
<ul class="navbar-nav mr-auto sidenav" id="mySidenav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
</nav>
<!--/.Navbar-->
<!--JavaScript at end of body for optimized loading-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>function Nav() {
if (document.getElementById("mySidenav").style.width === "0px") {
document.getElementById("mySidenav").style.width = "250px";
$('.animated-icon').toggleClass('open');
}
else {
document.getElementById("mySidenav").style.width = "0px";
$('.animated-icon').toggleClass('open');
}
}</script>
</body>
</html>```
function Nav() {
var width = document.getElementById("mySidenav").style.width;
if (width === "0px" || width == "") {
document.getElementById("mySidenav").style.width = "250px";
$('.animated-icon').toggleClass('open');
}
else {
document.getElementById("mySidenav").style.width = "0px";
$('.animated-icon').toggleClass('open');
}
}
Why
At first, document.getElementById("mySidenav").style.width returns ''
I have a button on my page which opens a right panel by using jquery and modernizr frameworks. Button is placed on the rightmost place of screen. When it is clicked it slides to the left with the panel which it opens. The problem is, it won't slide back to where it was when it is clicked again.
HTML:
<!-- right panel -->
<div class="cd-panel from-right">
<header class="cd-panel-header">
<h1>Views</h1>
Close
</header>
<div class="cd-panel-container">
Views
<div class="cd-panel-content" ng-controller="ViewtreeCtrl">
<div>
Panel elements
</div>
</div>
<!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->
Javascript:
jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//clode the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
JsFiddle demo (You can see the CSS on JSFiddle)
jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
//use toggleClass
$('.cd-panel').toggleClass('is-visible');
});
});
JSFIDDLE
http://jsfiddle.net/Lecgrfvu/3/
Try this i used toggleClass (View in full screen mode to see the result)
jQuery(document).ready(function ($) {
//open the lateral panel
$('.cd-btn').on('click', function (event) {
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
});
//clode the lateral panel
});
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #424f5c;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: #424f5c;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 90%;
height: 100%;
top: 0;
background: #dbe2e9;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-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);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 20%;
}
}
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
.cd-btn {
visibility: visible !important;
position: absolute;
top: 400px;
left: -50px;
font-size: 16px;
padding: 10px;
margin: 0 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="cd-panel from-right">
<header class="cd-panel-header">
<h1>Views</h1>
Close
</header>
<div class="cd-panel-container"> Views
<div class="cd-panel-content" ng-controller="ViewtreeCtrl">
<div>
<ul class="collapsible-list">
<li class="nav-header">Views</li>
<li class="collapsible-list-subnav" ng-repeat="treeObject in treeObjects"><a class="collapsible-list-parent">{{treeObject.name}}</a>
<ul class="collapsible-list secondary">
<li class="collapsible-list-subnav"><a class="collapsible-list-parent">Public Views</a>
<ul class="collapsible-list tertiary">
<li ng-repeat="publicView in treeObject.publicViews" ng-click="viewClick($event, publicView)"><a>{{publicView.title}}</a>
</li>
</ul>
</li>
<li class="collapsible-list-subnav"><a class="collapsible-list-parent">Private Views</a>
<ul class="collapsible-list tertiary">
<li ng-repeat="privateView in treeObject.privateViews" ng-click="viewClick($event, privateView)"><a>{{privateView.title}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->
</div>