I use This code on my dropdown list Item on click.. it's working Good . but Problem is .. when I click in link not working..
[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
el.addEventListener('click', onClick, false);
});
function onClick(e){
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}
function showSubMenu(el){
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e){
e.preventDefault();
if(el.contains(e.target)){
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
function hideSubMenu(el){
el.classList.remove('show-submenu');
}
An example from here ==> https://codepen.io/0fercpkzi/full/jOMqXgV
Remove e.preventDefault inside showSubMenu, or, perform a check to see if it's an a tag being clicked:
[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el) {
el.addEventListener('click', onClick, false);
});
function onClick(e) {
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}
function showSubMenu(el) {
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e) {
// Return if target is an anchor tag
if (e.target.localName === 'a') return;
e.preventDefault();
if (el.contains(e.target)) {
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
function hideSubMenu(el) {
el.classList.remove('show-submenu');
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #f00;
}
.nav {
width: 550px;
margin: 100px auto 0 auto;
text-align: center;
}
/* Navigation */
.nav {
font-family: Georgia, Arial, sans-serif;
font-size: 14px;
}
.nav-items {
padding: 0;
list-style: none;
}
.nav-item {
display: inline-block;
margin-right: 25px;
}
.nav-item:last-child {
margin-right: 0;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active {
color: #fff;
font-weight: bold;
}
.nav-link::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-link:hover::before,
.nav-link:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.dropdown {
position: relative;
}
.dropdown .nav-link {
padding-right: 15px;
height: 17px;
line-height: 17px;
}
.dropdown .nav-link::after {
content: "";
position: absolute;
top: 6px;
right: 0;
border: 5px solid transparent;
border-top-color: #fff;
}
.submenu {
position: absolute;
top: 100%;
left: 50%;
z-index: 100;
width: 200px;
margin-left: -100px;
background: #fff;
border-radius: 3px;
line-height: 1.46667;
margin-top: -5px;
box-shadow: 0 0 8px rgba(0, 0, 0, .3);
opacity: 0;
-webkit-transform: translate(0, 0) scale(.85);
transform: translate(0, 0)scale(.85);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.submenu::after,
.submenu::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
height: 0;
}
.submenu::after {
border-bottom-color: #fff;
}
.submenu::before {
margin-left: -13px;
border: 13px solid transparent;
border-bottom-color: rgba(0, 0, 0, .1);
-webkit-filter: blur(1px);
filter: blur(1px);
}
.submenu-items {
list-style: none;
padding: 10px 0;
}
.submenu-item {
display: block;
text-align: left;
}
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
color: #3498db;
padding: 10px 20px;
}
.submenu-link:hover {
text-decoration: underline;
}
.submenu-seperator {
height: 0;
margin: 12px 10px;
border-top: 1px solid #eee;
}
.show-submenu .submenu {
opacity: 1;
-webkit-transform: translate(0, 25px) scale(1);
transform: translate(0, 25px) scale(1);
pointer-events: auto;
}
<nav role="navigation" class="nav">
<ul class="nav-items">
<li class="nav-item dropdown">
<span>Drop Down</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">Google</li>
<li class="submenu-item">Yuotube</li>
<li class="submenu-item">Facebook</li>
</ul>
</nav>
</li>
</ul>
</nav>
Related
The navbar is not closing when a user clicks on links to navigate through website?
I had tried to add a click event listener to every link to close navbar but it didn't work!
Also the hamberberger menu icon in active position i.e. X is not aligned well. But the major preblem is to collapse the navbar when clicked.
$(document).ready(function() {
$('.container').click(function() {
$('.navbar .menu').toggleClass("active");
});
});
function myFunction(x) {
x.classList.toggle("change");
}
#media (max-width: 1104px) {
.about .about-content .left img {
height: 350px;
width: 350px;
}
}
#media (max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media (max-width: 947px) {
.menu-btn {
display: block;
z-index: 999;
}
/* .menu-btn i.active:before {
content: "\f00d";
} */
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: #111;
text-align: center;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
}
.navbar {
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
transition: all 0.3s ease;
}
.navbar.sticky {
padding: 15px 0;
background: crimson;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
position: relative;
color: #fff;
font-size: 35px;
font-weight: bold;
text-transform: uppercase;
font-family: 'Orbitron', sans-serif;
border: 3px solid #fff;
padding: 0px 10px;
text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%);
letter-spacing: 2px;
}
.navbar .logo a::after {
content: 'PANDEY';
position: absolute;
font-size: 15px;
font-weight: bold;
bottom: -12px;
/* color: crimson; */
right: 15px;
background: crimson;
border-radius: 5px;
/* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */
padding: 0px 4px;
letter-spacing: 2px;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.navbar.sticky .logo a::after {
border-radius: 4px;
background: #fff;
color: crimson;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
}
.container {
display: inline-block;
cursor: pointer;
box-sizing: border-box;
}
.bar1 {
width: 35px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar2 {
width: 25px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar3 {
width: 15px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -6px) rotate(40deg);
width: 35px;
}
.navbar.sticky .logo a span {
color: #fff;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
position: relative;
color: #fff;
}
.navbar.sticky .menu li a:hover {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<nav class="navbar">
<div class="max-width">
<div class="logo">Chhailbihari</div>
<ul class="menu">
<li class="menu-btn">Home</li>
<li class="menu-btn">About</li>
<li class="menu-btn">Services</li>
<li class="menu-btn">Skills</li>
<li class="menu-btn">Contact</li>
</ul>
<div class="menu-btn">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</nav>
i think you have make menu which is responsive - i.e. works on mobile also.
for this use #media screen css
show hamburger icon when width of window is like tab or mobile else hide this icon.
in menu div (mobile or tab) add close icon to close menu.
hope this solution helps
you may refer below code for navbar for mobile view with hamburger icon.
body
{
margin: 0;
padding: 0;
background: blue;
color: #cdcdcd;
}
#togglmenu
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#togglmenu a
{
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#togglmenu a:hover
{
color: tomato;
}
#togglmenu input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
#togglmenu span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#togglmenu span:first-child
{
transform-origin: 0% 0%;
}
#togglmenu span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#togglmenu input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#togglmenu input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#togglmenu input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
#togglmenu input:checked ~ ul
{
transform: none;
}
<nav role="navigation">
<div id="togglmenu">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Info</li>
<li>Contact</li>
</ul>
</div>
</nav>
I am using a checkbox to toggle/untoggled to display the dropdown Navigation. What I am trying to do is that if the user clicks anywhere other than the Navigation, the Navigation will become unchecked -> if (document.getElementById("navToggle").checked) {console.log("uncheck the nav")}
With my code it seems to execute even if the user clicks on the Navigation, ignoring this -> if (!event.target.matches('.top-nav').
/*window.onclick = function (event) {
if (!event.target.matches('.top-nav')) {
if (document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
}
}*/
function myFunction(x) {
x.classList.toggle("change");
}
function dropdown() {
document.getElementById("myDropdown").style.display = "block"
}
window.onclick = function(event) {
if (!event.target.matches('.top-nav')) {
if (document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
}
}
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
:root {
--background: rgba(0, 214, 170, .85);
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
cursor: pointer;
background: none;
border: 0;
color: inherit;
/* cursor: default; */
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
height: 5rem;
z-index: 999;
width: 100%;
}
/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: white;
margin: 6px 0;
transition: 400ms;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-top: 1em;
margin-left: 1em;
margin-bottom: 1em;
}
nav a,
nav button {
color: white;
text-decoration: none;
font-size: 1.25rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover,
nav .dropdown:hover>button {
color: #000;
}
.nav-toggle:checked~nav {
transform: scale(1, 1);
}
.nav-toggle:checked~nav a,
.nav-toggle:checked~nav .dropdown>button {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
.arrow {
border: solid #222;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-bottom: 4px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.dropdown:hover .arrow {
border: solid black;
border-width: 0 3px 3px 0;
}
.dropdown-content {
display: none;
}
.dropdown-content a {
display: block;
text-align: left;
padding: 0;
margin-top: .5em;
margin-left: .5em;
margin-bottom: .5em;
}
.show {
display: block;
}
<header id="top-nav">
<label for="navToggle" class="nav-toggle-label">
<span
><div class="nav-toggle-container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div></div
></span>
</label>
<input type="checkbox" id="navToggle" class="nav-toggle" />
<nav class="nav">
<ul>
<li>
Home
</li>
<li>About</li>
<li>
<div class="dropdown">
<button class="dropdown-button" onclick="dropdown()">
Classes <i class="arrow down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<div class="colums">
<h1>Semester 1</h1>
Physics 11
Chemistry 11
English 11
French 11
<h1>Semester 2</h1>
Gym 11
Psychology 11
Law 11
Pre-calculus 11
</div>
</div>
</div>
</li>
<li>Contact</li>
</ul>
</nav>
</header>
Try to use eventListener everywhere
window.addEventListener("click", event => {
const tgt = event.target.closest('.top-nav');
if (!tgt && document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
})
I try to build a context menu on right click, and it works well, except for one thing. In my li item, I have some links (href).
But if I click on these links, the context menu doesn't follow the href, but simply closes the context menu.
I'm doing something wrong but I can't see the error:
My actual code:
const menu = document.querySelector('.menu');
function showMenu(x, y) {
menu.style.left = x + 'px';
menu.style.top = y + 'px';
menu.classList.add('menu-show');
}
function hideMenu() {
menu.classList.remove('menu-show');
}
function onContextMenu(e) {
e.preventDefault();
showMenu(e.pageX, e.pageY);
document.addEventListener('mousedown', onMouseDown, false);
}
function onMouseDown(e) {
hideMenu();
document.removeEventListener('mousedown', onMouseDown);
}
document.addEventListener('contextmenu', onContextMenu, false);
});
HTML:
<ul class="menu">
<li class="menu-item">
<a href="https://flarum.it" class="menu-btn">
<i class="fa fa-folder-open"></i>
<span class="menu-text">Open</span>
</a>
</li>
</ul>
Clicking a link event occurs along with the onmouseup event. You are already making this process impossible with onmousedown.
All you have to do is listen for the mouseup event instead of the mousedown event and perhaps change the name of your "onMouseDown" function to "onMouseUp".
document.addEventListener('mouseup', onMouseUp, false);
Example code snippet
var menu = document.querySelector('.menu');
function showMenu(x, y){
menu.style.left = x + 'px';
menu.style.top = y + 'px';
menu.classList.add('menu-show');
}
function hideMenu(){
menu.classList.remove('menu-show');
}
function onContextMenu(e){
e.preventDefault();
showMenu(e.pageX, e.pageY);
document.addEventListener('mouseup', onMouseUp, false);
}
function onMouseUp(e){
hideMenu();
document.removeEventListener('mouseup', onMouseUp);
}
document.addEventListener('contextmenu', onContextMenu, false);
/* Page */
html {
width: 100%;
height: 100%;
background: radial-gradient(circle, #fff 0%, #a6b9c1 100%) no-repeat;
}
.container {
position: absolute;
top: 20%;
left: 0;
width: 100%;
margin: auto;
text-align: center;
}
h1,
h2 {
color: #555;
}
/* Menu */
.menu {
position: absolute;
width: 200px;
padding: 2px;
margin: 0;
border: 1px solid #bbb;
background: #eee;
background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
z-index: 100;
border-radius: 3px;
box-shadow: 1px 1px 4px rgba(0,0,0,.2);
opacity: 0;
transform: translate(0, 15px) scale(.95);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.menu-item {
display: block;
position: relative;
margin: 0;
padding: 0;
white-space: nowrap;
}
.menu-btn {
display: block;
color: #444;
font-family: 'Roboto', sans-serif;
font-size: 13px;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 8px;
border-radius: 3px;
}
button.menu-btn {
background: none;
line-height: normal;
overflow: visible;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
width: 100%;
text-align: left;
}
a.menu-btn {
outline: 0 none;
text-decoration: none;
}
.menu-text {
margin-left: 25px;
}
.menu-btn .fa {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
}
.menu-item:hover > .menu-btn {
color: #fff;
outline: none;
background-color: #2E3940;
background: linear-gradient(to bottom, #5D6D79, #2E3940);
border: 1px solid #2E3940;
}
.menu-item-disabled {
opacity: .5;
pointer-events: none;
}
.menu-item-disabled .menu-btn {
cursor: default;
}
.menu-separator {
display:block;
margin: 7px 5px;
height:1px;
border-bottom: 1px solid #fff;
background-color: #aaa;
}
.menu-item-submenu::after {
content: "";
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-left-color: #808080;
}
.menu-item-submenu:hover::after {
border-left-color: #fff;
}
.menu .menu {
top: 4px;
left: 99%;
}
.menu-show,
.menu-item:hover > .menu {
opacity: 1;
transform: translate(0, 0) scale(1);
pointer-events: auto;
}
.menu-item:hover > .menu {
transition-delay: 300ms;
}
<ul class="menu">
<li class="menu-item">
<a href="https://google.com" class="menu-btn">
<i class="fa fa-folder-open"></i>
<span class="menu-text">Open</span>
</a>
</li>
</ul>
I have a problem with my navbar. I want to select an #id (page) on my mobile device, reach that side of the page and then close the .nav-wrapper which holds all the ul li's, the one that was opened to view all the pages (id's).
I've tried something but it didn't work. Hope you understood my question and also I hope that you can help me.
$(document).ready(function(){
$(window).scroll(function(){
if($(document).scrollTop()>130){
$(".nav-btn").addClass("fundal")
}
else{
$(".nav-btn").removeClass("fundal")
}
});
});
window.addEventListener('load', ()=> {
const preload = document.querySelector('.preload');
preload.classList.add('preload-finish');
});
$("ul").click(function () {
$(".nav-wrapper").toggleClass(".nav-btn");
})
/* NAVBAR */
.navigatie{
background-color:transparent;
width:100%;
position: absolute;;
z-index: 99;
margin:0px;
padding:0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand{
color:white !important;
}
.navbar-brand img{
width: auto;
height: 100px;
margin:-32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top:5px;
margin-right:20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
letter-spacing: 1.1px;
font-weight: 700;
}
nav ul li a:hover{
color:#fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal{
background:#e04f45 !important;
box-shadow:1px 2px 4px 0px #00000075 !important;
}
.fundal .nav-btn {
background-color:#e04f45;
border-radius: 50%;
box-shadow:1px 2px 4px 0px #00000075;
}
.fundal .nav-btn i{
background: #fff;
border-radius: 2px;
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
background-color: #e04f45;
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display:block
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN NAVBAR PTR TLF */
#media only screen and (max-width: 991px){
.navigatie{
background-color:transparent;
width:100%;
position: absolute;
z-index: 99;
margin:0px;
padding:0px;
}
.navbar-brand img{
height:100px;
margin:-20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display:none;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: center;
padding-top:10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 47px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>Acasă</li>
<li>Despre</li>
<li>Studii</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
You could do that by changing a small thing in your JavaScript.
Now the menu is showing when the checkbox is checked, you need to make sure that the checkbox gets unchecked when clicking a link. I've updated the JS in your 'click' function
Tip: try to avoid doing one thing with Vannila JS and the other thing with jQuery
$(document).ready(function () {
$(window).scroll(function () {
console.log($(document).scrollTop());
if ($(document).scrollTop() > 130) {
$(".nav-btn").addClass("fundal");
console.log("add class", $(".nav-btn").hasClass("fundal"));
} else {
$(".nav-btn").removeClass("fundal");
console.log("remove class");
}
});
});
window.addEventListener("load", () => {
const preload = document.querySelector(".preload");
preload.classList.add("preload-finish");
});
// Updated the selector
$(".nav-wrapper li a").click(function () {
$(".nav-wrapper").toggleClass(".nav-btn");
// Uncheck your checkbox
$("#nav").prop("checked", false)
});
.page {
background: #f00;
height: 500px;
margin-bottom: 10px;
}
/* NAVBAR */
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
z-index: 99;
margin: 0px;
padding: 0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand {
color: white !important;
}
.navbar-brand img {
width: auto;
height: 100px;
margin: -32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top: 5px;
margin-right: 20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
letter-spacing: 1.1px;
font-weight: 700;
}
nav ul li a:hover {
color: #fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal {
background: #e04f45 !important;
box-shadow: 1px 2px 4px 0px #00000075 !important;
}
.fundal.nav-btn {
background-color: #e04f45;
border-radius: 50%;
box-shadow: 1px 2px 4px 0px #00000075;
}
.fundal.nav-btn i {
background: #fff;
border-radius: 2px;
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
background-color: #e04f45;
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display: block;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN NAVBAR PTR TLF */
#media only screen and (max-width: 991px) {
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
z-index: 99;
margin: 0px;
padding: 0px;
}
.navbar-brand img {
height: 100px;
margin: -20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display: none;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 47px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preload"></div>
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>Acasă</li>
<li>Despre</li>
<li>Studii</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="page" id="home"></div>
<div class="page" id="despre"></div>
<div class="page" id="studii"></div>
<div class="page" id="abilitati"></div>
<div class="page" id="contact"></div>
I am using Shopify & VUE to create a sidebar menu pulling in shopify linklists. The main links are showing, but the child links are hidden and the toggle/active state is no shoing the dropdown as expected.
Here is a codepen example https://codepen.io/benmoswm/pen/RwPydrm
I have been starting at this for hours but missing something obvious, but not to me. Any advice would be great. thanks
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="sidebar-panel">
<nav class="sidebar-main-nav-evergreen">
<Burger>Shop</Burger>
</nav>
<Sidebar>
<ul class="evergreen-main-nav">
{% for link in linklists.main-menu-sidebar.links %}
{% include 'desktop-navigation-link' %}
{% endfor %}
</ul>
</Sidebar>
</div>
<template id="sidebar">
<div class="sidebar">
<div class="sidebar-backdrop" v-on:click="closeSidebarPanel" v-if="isPanelOpen"></div>
<transition name="slide">
<div v-if="isPanelOpen"
class="sidebar-panel">
<slot></slot>
</div>
</transition>
</div>
</template>
<template id="burger">
<div id="burger"
:class="{ 'active' : isBurgerActive }"
#click.prevent="toggle">
<slot>
<button type="button" class="burger-button" title="Menu">
<span class="hidden">Toggle menu</span>
<span class="burger-bar burger-bar--1"></span>
<span class="burger-bar burger-bar--2"></span>
<span class="burger-bar burger-bar--3"></span>
</button>
</slot>
</div>
</template>
<style>
.sidebar-panel {
overflow-y: auto;
background-color: #eaeaea;
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 999;
padding: 3rem 20px 2rem 20px;
width: 320px;
}
.sidebar-main-nav-evergreen {
float: left;
width: auto;
margin: 0 36px 0 0;
display: block;
position: relative;
font-size: 14px;
padding: 26px 2px 19px;
height: 65px;
line-height: 1.6;
text-transform: uppercase;
}
.slide-enter-active, .slide-leave-active {
transition: transform 0.2s ease;
}
.slide-enter, .slide-leave-to {
transform: translateX(-100%);
transition: all 150ms ease-in 0s
}
.sidebar-backdrop {
background-color: rgba(250, 250, 250, .4);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
z-index: 10;
}
.evergreen-main-nav {
list-style: none;
margin: 0;
padding: 25px
}
.evergreen-main-nav .evergreen-main-nav-item {
padding: 15px 0;
display: block;
position: relative;
font-weight: 400;
font-size: 15px;
border-bottom: 0px solid #ddd
}
.evergreen-main-nav .evergreen-main-subnav .evergreen-main-nav-item {
font-weight: 300
}
.evergreen-main-nav .evergreen-main-nav-item:last-child {
border-bottom: 0
}
.evergreen-main-nav .evergreen-main-nav-item a {
color: inherit
}
.evergreen-main-subnav {
padding-left: 15px;
margin: 0;
display: none;
}
.evergreen-main-subnav .evergreen-main-nav-item:last-child {
padding-bottom: 0;
}
.evergreen-child-menu {
float: right;
cursor: pointer;
}
.evergreen-child-menu::after {
content: "\f078";
display: inline-block;
font-family: 'FontAwesome';
font-weight: 400;
font-size: 10px;
width: 30px;
text-align: center
}
.evergreen-main-nav-item-has-children .evergreen-main-nav-active .evergreen-child-menu::after {
content: "\f077"
}
.evergreen-main-nav-item-has-children .evergreen-main-nav-active .evergreen-main-subnav {
display: block;
}
/* burger */
.hidden {
visibility: hidden;
}
button {
cursor: pointer;
}
/* remove blue outline */
button:focus {
outline: 0;
}
.burger-button {
position: relative;
height: 30px;
width: 32px;
display: block;
z-index: 999;
border: 0;
border-radius: 0;
background-color: transparent;
pointer-events: all;
transition: transform .6s cubic-bezier(.165, .84, .44, 1);
}
.burger-bar {
background-color: #000;
position: absolute;
top: 50%;
right: 6px;
left: 6px;
height: 2px;
width: auto;
margin-top: -1px;
transition: transform .6s cubic-bezier(.165, .84, .44, 1), opacity .3s cubic-bezier(.165, .84, .44, 1), background-color .6s cubic-bezier(.165, .84, .44, 1);
}
.burger-bar--1 {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.burger-bar--2 {
transform-origin: 100% 50%;
transform: scaleX(.8);
}
.burger-button:hover .burger-bar--2 {
transform: scaleX(1);
}
.no-touchevents .burger-bar--2:hover {
transform: scaleX(1);
}
.burger-bar--3 {
transform: translateY(6px);
}
#burger.active .burger-button {
transform: rotate(-180deg);
}
#burger.active .burger-bar {
background-color: #fff;
}
#burger.active .burger-bar--1 {
transform: rotate(45deg)
}
#burger.active .burger-bar--2 {
opacity: 0;
}
#burger.active .burger-bar--3 {
transform: rotate(-45deg)
}
</style>
<script>
const store = Vue.observable({
isNavOpen: false
});
const mutations = {
setIsNavOpen(yesno) {
store.isNavOpen = yesno;
},
toggleNav() {
store.isNavOpen = !store.isNavOpen;
}
};
Vue.component('sidebar', {
template: '#sidebar',
methods: {
closeSidebarPanel: mutations.toggleNav
},
computed: {
isPanelOpen() {
return store.isNavOpen
}
}
});
Vue.component('burger', {
template: '#burger',
computed: {
isBurgerActive() {
return store.isNavOpen
}
},
methods: {
toggle() {
mutations.toggleNav()
}
}
});
new Vue({
el: '#sidebar-panel'
})
</script>
.You have to make position as absolute on the submenu items.
Update
.evergreen-main-subnav {
padding:0;
margin:0;
display: none;
position:absolute;
top:10%;
left:33%;
background-color:#ccc;
}
.mobile-nav__item{
list-style:none;
width:100%;
text-align:left;
padding:8px;
}
.mobile-nav__item a{
text-decoration:none;
}
.mobile-nav__item a:hover{
font-weight:900;
text-decoration:underline;
}
.evergreen-main-nav-item:hover .evergreen-main-subnav{
display:block;
}
const store = Vue.observable({
isNavOpen: false
});
const mutations = {
setIsNavOpen(yesno) {
store.isNavOpen = yesno;
},
toggleNav() {
store.isNavOpen = !store.isNavOpen;
}
};
Vue.component('sidebar', {
template: '#sidebar',
methods: {
closeSidebarPanel: mutations.toggleNav
},
computed: {
isPanelOpen() {
return store.isNavOpen
}
}
});
Vue.component('burger', {
template: '#burger',
computed: {
isBurgerActive() {
return store.isNavOpen
}
},
methods: {
toggle() {
mutations.toggleNav()
}
}
});
new Vue({
el: '#sidebar-panel'
})
/* common styles */
html {
height: 100%;
overflow: hidden;
}
body {
border: 0;
margin: 0;
padding: 0;
font-family: "Lato";
height: 100%;
background-color: #d4d4d4;
}
.sidebar-panel {
overflow-y: auto;
background-color: #eaeaea;
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 999;
padding: 3rem 20px 2rem 20px;
width: 320px;
}
.sidebar-main-nav-evergreen {
float: left;
width: auto;
margin: 0 36px 0 20px;
display: block;
position: relative;
font-size: 14px;
padding: 26px 2px 19px;
height: 65px;
line-height: 1.6;
text-transform: uppercase;
}
.slide-enter-active,
.slide-leave-active {
transition: transform 0.2s ease;
}
.slide-enter,
.slide-leave-to {
transform: translateX(-100%);
transition: all 150ms ease-in 0s;
}
.sidebar-backdrop {
background-color: rgba(250, 250, 250, 0.4);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
z-index: 10;
}
.evergreen-main-nav {
list-style: none;
margin: 0;
padding: 25px;
}
.evergreen-main-nav .evergreen-main-nav-item {
padding: 15px 0;
display: block;
position: relative;
font-weight: 400;
font-size: 15px;
border-bottom: 0px solid #ddd;
}
.evergreen-main-nav .evergreen-main-subnav .evergreen-main-nav-item {
font-weight: 300;
}
.evergreen-main-nav .evergreen-main-nav-item:last-child {
border-bottom: 0;
}
.evergreen-main-nav .evergreen-main-nav-item a {
color: inherit;
}
.evergreen-main-subnav {
padding:0;
margin:0;
display: none;
position:absolute;
top:10%;
left:33%;
background-color:#ccc;
}
.mobile-nav__item{
list-style:none;
width:100%;
text-align:left;
padding:8px;
}
.mobile-nav__item a{
text-decoration:none;
}
.mobile-nav__item a:hover{
font-weight:900;
text-decoration:underline;
}
.evergreen-main-nav-item:hover .evergreen-main-subnav{
display:block;
}
.evergreen-main-subnav .evergreen-main-nav-item:last-child {
padding-bottom: 0;
}
.evergreen-child-menu {
float: right;
cursor: pointer;
}
.evergreen-child-menu::after {
content: "\f078";
display: inline-block;
font-family: "FontAwesome";
font-weight: 400;
font-size: 10px;
width: 30px;
text-align: center;
}
.evergreen-main-nav-item-has-children
.evergreen-main-nav-active
.evergreen-child-menu::after {
content: "\f077";
}
.evergreen-main-nav-item-has-children
.evergreen-main-nav-active
.evergreen-main-subnav {
display: block;
}
/* burger */
.hidden {
visibility: hidden;
}
button {
cursor: pointer;
}
/* remove blue outline */
button:focus {
outline: 0;
}
.burger-button {
position: relative;
height: 30px;
width: 32px;
display: block;
z-index: 999;
border: 0;
border-radius: 0;
background-color: transparent;
pointer-events: all;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.burger-bar {
background-color: #000;
position: absolute;
top: 50%;
right: 6px;
left: 6px;
height: 2px;
width: auto;
margin-top: -1px;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
background-color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.burger-bar--1 {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.burger-bar--2 {
transform-origin: 100% 50%;
transform: scaleX(0.8);
}
.burger-button:hover .burger-bar--2 {
transform: scaleX(1);
}
.no-touchevents .burger-bar--2:hover {
transform: scaleX(1);
}
.burger-bar--3 {
transform: translateY(6px);
}
#burger.active .burger-button {
transform: rotate(-180deg);
}
#burger.active .burger-bar {
background-color: #fff;
}
#burger.active .burger-bar--1 {
transform: rotate(45deg);
}
#burger.active .burger-bar--2 {
opacity: 0;
}
#burger.active .burger-bar--3 {
transform: rotate(-45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<div id="sidebar-panel">
<nav class="sidebar-main-nav-evergreen">
<Burger>click me</Burger>
</nav>
<Sidebar>
<ul class="evergreen-main-nav">
<li class="evergreen-main-nav-item evergreen-main-nav-item-has-children">Ceramic Pots <span class="evergreen-child-menu"></span>
<ul class="evergreen-main-subnav">
<li class="mobile-nav__item">Bower</li>
<li class="mobile-nav__item">Wave</li>
</ul>
</li>
<li class="evergreen-main-nav-item">Large Pots</li>
<li class="evergreen-main-nav-item">Pot Stands</li>
<li class="evergreen-main-nav-item">Hanging Pots</li>
<li class="evergreen-main-nav-item">Watering Cans</li>
</ul>
</Sidebar>
</div>
<template id="sidebar">
<div class="sidebar">
<div class="sidebar-backdrop" v-on:click="closeSidebarPanel" v-if="isPanelOpen"></div>
<transition name="slide">
<div v-if="isPanelOpen" class="sidebar-panel">
<slot></slot>
</div>
</transition>
</div>
</template>
<template id="burger">
<div id="burger" :class="{ 'active' : isBurgerActive }" #click.prevent="toggle">
<slot>
<button type="button" class="burger-button" title="Menu">
<span class="hidden">Toggle menu</span>
<span class="burger-bar burger-bar--1"></span>
<span class="burger-bar burger-bar--2"></span>
<span class="burger-bar burger-bar--3"></span>
</button>
</slot>
</div>
</template>