AM trying to have to actions on a nav menu (open and close)
this is my code :
Here, i can open the item and hide it when i click outside BUT I need also to close the item when i click on the link .menu-item-has-children > a
var click_item = function() {
$('.menu-item-has-children > a').on('click', function() {
var EltToToggle = $(this).next('.sub-menu');
if ($(this).attr('href') === "#") {
event.preventDefault();
}
if ($(this).attr('aria-expanded') === "true") {
console.log("ppppp");
$(this).attr('aria-expanded', false);
$(this).removeClass('is-opened');
EltToToggle.removeClass('show');
console.log("click true")
} else if ($(this).attr('aria-expanded') === "false") {
$(this).attr('aria-expanded', true);
$(this).addClass('is-opened');
EltToToggle.addClass('show');
console.log("click false")
}
});
}
click_item();
$(document).mouseup(function(e) {
var sub_menu = $(".sub-menu");
// If the target of the click isn't the sub_menu
if (!sub_menu.is(e.target) && sub_menu.has(e.target).length === 0) {
sub_menu.removeClass('show');
$(".menu-item-has-children > a").attr('aria-expanded', false);
$(".menu-item-has-children > a").removeClass('is-opened');
console.log("ok")
}
click_item();
});
.menu {
display: flex;
}
li {
margin: 10px;
}
.sub-menu {
display: none;
position: absolute;
top: auto;
left: 50%;
-webkit-transform: translate(-50%, 2rem);
transform: translate(-50%, 2rem);
padding: 1rem 0;
background-color: #fff;
border-radius: .6rem;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
}
.show {
display: block!important;
}
.menu-item-has-children>a {
position: relative
}
.menu-item-has-children>a:after {
top: 2rem;
right: 1.5rem;
}
.menu-item-has-children>a:after {
content: "\f077";
font-family: FontAwesome!important;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: inherit;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-alt: "";
speak: none;
right: 1.6rem;
top: 2.3rem;
font-size: 1rem;
transition: -webkit-transform .25s ease;
transition: transform .25s ease;
transition: transform .25s ease,-webkit-transform .25s ease;
}
.menu-item-has-children>a:after {
top: 2rem;
right: 1.5rem;
}
.menu-item-has-children>a[aria-expanded=true]:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false" class="">
Item 1
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl2. Children 1
</a>
</li>
<li class="menu-item">
<a href="#">
Lvl2. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false">
Link 2
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">
Lvl3. Children 1
</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl3. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl3. Children 3
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl2. Children 4
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false" class="">
Link 2
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl2. Children 1
</a>
</li>
<li class="menu-item">
<a href="#">
Lvl2. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false">
Lvl2. Children 3 with children
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">
Lvl3. Children 1
</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl3. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl3. Children 3
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl2. Children 4
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
</ul>
Try to hide/show your navigation bar using css class, that will be easy and effective way to manage it.
Also replace $(document).mouseup with $(document).click, you just need clicking event, so I recommend to avoid using mouseup in such scenarios.
You can do something like this:
$(document).ready(function() {
$(document).click(function(event) {
var clickover = $(event.target);
// if the user click outside navbar
if (!clickover.hasClass("navbar")) {
$(".navbar").removeClass("in");
}
});
});
.navbar.in {
background: red;
width: 100px;
height: 100%;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Demo Test</title>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>
<body>
<div class="navbar in"></div>
</body>
</html>
Click outside the navbar and it'll be closed. This is just a DEMO that can help you understand how to hide/show elements by clicking events.
Here is a solution
If there are no submenus, close all parent uls with class show
I also converted the if to a toggle
$('.menu-item-has-children a').on('click', function() {
var EltToToggle = $(this).next('.sub-menu');
if ($(this).attr('href') === "#") {
event.preventDefault();
}
const expanded = $(this).attr('aria-expanded') === "true"
$(this).attr('aria-expanded', !expanded);
$(this).toggleClass('is-opened', !expanded);
EltToToggle.toggleClass('show', !expanded);
if (EltToToggle.length === 0) {
$(this).parents("ul,show").toggleClass("show",false)
}
});
$(document).mouseup(function(e) {
var sub_menu = $(".sub-menu");
// If the target of the click isn't the sub_menu
if (!sub_menu.is(e.target) && sub_menu.has(e.target).length === 0) {
sub_menu.removeClass('show');
$(".menu-item-has-children > a").attr('aria-expanded', false);
$(".menu-item-has-children > a").removeClass('is-opened');
console.log("ok")
}
});
.menu {
display: flex;
}
li {
margin: 10px;
}
.sub-menu {
display: none;
position: absolute;
top: auto;
left: 50%;
-webkit-transform: translate(-50%, 2rem);
transform: translate(-50%, 2rem);
padding: 1rem 0;
background-color: #fff;
border-radius: .6rem;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1);
}
.show {
display: block!important;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false" class="">
Item 1
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl2. Children 1
</a>
</li>
<li class="menu-item">
<a href="#">
Lvl2. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false">
Link 2
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">
Lvl3. Children 1
</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl3. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl3. Children 3
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl2. Children 4
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false" class="">
Link 2
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl2. Children 1
</a>
</li>
<li class="menu-item">
<a href="#">
Lvl2. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" aria-expanded="false">
Lvl2. Children 3 with children
</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">
Lvl3. Children 1
</a>
</li>
<li class="menu-item">
<a href="#" aria-current="page">
[Current] Lvl3. Children 2 with long text lorem ipsum
</a>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl3. Children 3
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#" target="_blank" class="external-link">
[_blank] Lvl2. Children 4
<span class="icon-link-external" aria-hidden="true"></span></a>
</li>
</ul>
</li>
</ul>
try this
$(document).ready(function(){
$("*").click(function(){
$(".menu-item-has-children > a").removeClass('is-opened');
});
});
Related
I have a vertical menu with submenu. I want to close the the previous clocked menu when clicking the new one. I just could open it. but byt this code all of them stay open. how can I do that?
this is the HTML code
<div class="sidebar ">
<div class="menu-layout">
<ul>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa icon-users"></i><span data-i18n="" class="menu-title">User Manangement</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Users List</li>
<li class="second-level"> * Register New User *</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-leaf"></i><span data-i18n="" class="menu-title">Categories</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Category List</li>
<li class="second-level">* New category</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Products</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Products List</li>
<li class="second-level"> * New Product </li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Orders</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Orders List</li>
</ul>
</li>
</ul>
</div>
</div>
This is js:
<script>
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
</script>
and this is CSS:
.menu-layout .first-level {
margin-bottom: 9px;
border-radius: 5%;
padding: 2px 10px 2px 10px;
line-height: 15px;
}
.second-level {
margin-bottom: 9px;
padding: 2px 50px 2px 10px;
line-height: 15px;
}
.menu-layout li a {
color: white !important;
font-size: 13px;
}
.menu-layout li a i {
color: white;
padding-left: 10px
}
.sidebar {
position: fixed;
top: 1px;
width: 250px;
height: calc(100% - 1px);
border-bottom-left-radius: 20px;
transition: all 0.3s ease;
background-color:black;
font-family: IRANSans;
font-weight: 400;
}
Here you go...
Just change this...
$(document).ready(function () {
$(".sub-menu ul").hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
});
...to this.
$(document).ready(function () {
$(".sub-menu ul").hide();
$(".sub-menu a").click(function () {
$(".sub-menu ul").not(this).hide(); // Hide everything, but not "this".
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
});
$(document).ready(function() {
$(".sub-menu ul").hide();
$(".sub-menu a").click(function() {
$(".sub-menu ul").not(this).hide(); // Hide everything, but not "this".
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
});
.menu-layout .first-level {
margin-bottom: 9px;
border-radius: 5%;
padding: 2px 10px 2px 10px;
line-height: 15px;
}
.second-level {
margin-bottom: 9px;
padding: 2px 50px 2px 10px;
line-height: 15px;
}
.menu-layout li a {
color: white !important;
font-size: 13px;
}
.menu-layout li a i {
color: white;
padding-left: 10px
}
.sidebar {
position: fixed;
top: 1px;
width: 250px;
height: calc(100% - 1px);
border-bottom-left-radius: 20px;
transition: all 0.3s ease;
background-color: black;
font-family: IRANSans;
font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="sidebar ">
<div class="menu-layout">
<ul>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa icon-users"></i><span data-i18n="" class="menu-title">User Manangement</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Users List</li>
<li class="second-level"> * Register New User *</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-leaf"></i><span data-i18n="" class="menu-title">Categories</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Category List</li>
<li class="second-level">* New category</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Products</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Products List</li>
<li class="second-level"> * New Product </li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Orders</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Orders List</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Im trying to change the source of an individual image on a div click. The problem is that I have many divs that have the same image, and images with the same id. Therefore, when I click the first, it changes, but when I click on the second, the first one changes.
I'm not yet very good at jquery, but I can imagine a "This" would help? Or do I need to give a different id to each img?
To see the problem heres a jsfiddle > https://jsfiddle.net/gfmyukaL/
I want each img to change individually based on its host div.
<script language="javascript">
function changeImage() {
if (document.getElementById("folder").src == "http://somethingsomething.online/folder.png")
{
document.getElementById("folder").src = "http://somethingsomething.online/folderopen.png";
}
else
{
document.getElementById("folder").src = "http://somethingsomething.online/folder.png";
}
}
</script>
<img style="position:absolute; bottom:2vh; width:100vw;" src="images/constuction_bar.gif" alt="under construction">
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" onclick="changeImage()" tabindex="-1" href="#"><div class="menu"><img id="folder" src="folder.png"> Parent Directory</div></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" onclick="changeImage()" tabindex="-1" href="#"><div class="menu"><img id="folder" src="folder.png"> Parent Directory</div></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" onclick="changeImage()" tabindex="-1" href="#"><div class="menu"><img id="folder" src="folder.png"> Parent Directory</div></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" onclick="changeImage()" tabindex="-1" href="#"><div class="menu"><img id="folder" src="folder.png"> Parent Directory</div></a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
<style>
.dropdown-submenu {
position: relative;
}
.menu:hover{
background-color:yellow;
}
*{
font-family:monospace;
}
.test{
border: red;
border-color: aquamarine;
border-width: 6px;
/* background-color: blue; */
border-style: dotted;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
li{
margin-left:5vw;
}
.dropdown-menu {
display:contents;
margin-left: 2vw;
}
.container{
margin:0px;
width:40vw;
padding:0px;
}
#folder{
filter: drop-shadow(1px 1px 1px red) drop-shadow(-1px -1px 1px green);
}
</style>
I have changed your code a bit, now check this. I have basically have all your folder close by CSS, you can open these if you want by CSS, tell me if you need it, modify CSS as per your need, The idea is to change the URL of image only, nothing else.
var closedFolder = "http://somethingsomething.online/folder.png"
var openFolder = "http://somethingsomething.online/folderopen.png"
$('.test').click(function(){
var nextMenu = $(this).next('.dropdown-menu');
nextMenu.toggle();
if($(nextMenu).is(':visible')){
$(this).find('img').attr('src', openFolder);
}else {
$(this).find('img').attr('src', closedFolder);
}
});
$(document).ready(function() {
var closedFolder = "http://somethingsomething.online/folder.png"
var openFolder = "http://somethingsomething.online/folderopen.png"
$('.test').click(function(){
var nextMenu = $(this).next('.dropdown-menu');
nextMenu.toggle();
if($(nextMenu).is(':visible')){
$(this).find('img').attr('src', openFolder);
}else {
$(this).find('img').attr('src', closedFolder);
}
});
});
.dropdown-submenu {
position: relative;
}
.menu:hover {
background-color: yellow;
}
* {
font-family: monospace;
}
.test {
border: red;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
li {
margin-left: 5vw;
}
.dropdown-menu {
display: contents;
margin-left: 2vw;
}
.container {
margin: 0px;
width: 40vw;
padding: 0px;
}
#folder {
filter: drop-shadow(1px 1px 1px red) drop-shadow(-1px -1px 1px green);
}
.dropdown-menu {
display: none;
}
#mainMenu > .dropdown-submenu, #mainMenu {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="dropdown">
<ul class="dropdown-menu" id="mainMenu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">
<div class="menu"><img src="http://somethingsomething.online/folder.png"> Parent Directory</div>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">
<div class="menu"><img src="http://somethingsomething.online/folder.png"> Parent Directory</div>
</a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">
<div class="menu"><img src="http://somethingsomething.online/folder.png"> Parent Directory</div>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">
<div class="menu"><img src="http://somethingsomething.online/folder.png"> Parent Directory</div>
</a>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
. I hope this would help you.
I am creating a website with a mobile menu.
The menu button should be animated the menu should initially be hidden and open when pressing the button.
It should also close and animate to the original state when either clicking the button again, or a link in it.
Right now I have several problems with my code:
1. Menu is open when I load the page
2. Menu doesn't close when clicking a link
The code is from a real website so all the links direct you to a subpage which doesn't exist in jsfiddle. I prepared the link "Club" so that it doesn't redirect you
https://jsfiddle.net/TheBB23/nmobt0c7/2/
var coll = document.getElementsByClassName("hamburger");
var hideLinks = document.querySelectorAll('.mobilemenuitems a');
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var mobilemenuitems = this.nextElementSibling;
if (mobilemenuitems.style.display === "block") {
mobilemenuitems.style.display = "none";
} else {
mobilemenuitems.style.display = "block";
}
});
}
var hamburger = document.querySelector(".hamburger");
var header = document.querySelector(".header");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
header.classList.toggle("header--is-active");
// Do something else, like open/close menu
});
/* Responsive (Smartphone) Menu */
#media (max-width: 1000px) {
.nav {
height: 50px;
width: 100%;
background: #24603c;
position: fixed;
z-index: 2;
}
#BurgerSpace>div>button {
position: fixed;
right: 0px;
top: 0px;
z-index: 3;
}
#BurgerSpace>div>div {
display: block;
margin-top: 50px;
}
#BurgerSpace {
width: 100%;
height: 50px;
display: block;
position: absolute;
float: right;
margin-right: 2%;
padding-right: 0px;
padding-top: -2px;
}
}
.mobilemenuspace {
display: none;
width: 100%;
position: relative;
right: 0;
z-index: 1;
margin-top: 50px;
background: pink;
}
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover .hamburger-inner::after {
background: lightgrey;
}
.hamburger:hover .hamburger-inner::before {
background: lightgrey;
}
.hamburger:hover .hamburger-inner {
background: lightgrey;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: white;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse .hamburger-inner::after {
top: -20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.header--is-active {
display: flex;
}
<div class="nav">
</div>
<div id="BurgerSpace">
<div class="header">
<button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="mobilemenuspace">
<div class="mobilemenuitems">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2> Login</h2>
<li>
CLUB
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?module=*kontakt">Kontakt</a>
</li>
<li class="menulevel1">
<a class=" " href="?module=*vorstand">Vorstand</a>
</li>
<li class="menulevel1">
<a class=" " href="?module=*mitgliedsantrag">Mitgliedschaft</a>
</li>
<li class="menulevel1">
<a class=" " href="?module=*ueber_uns">Über uns</a>
</li>
</ul>
</li>
<li>
HOCKEY
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=*1.Herren">1. Herren</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*1.Damen">1. Damen</a>
</li>
<li class="menulevel1">
<a class=" " href="#">Jugend <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?action=*Hockey-Jugend">Jugend</a>
<li class="menulevel2">
<a class=" " href="?action=*MJA">Männliche Jugend A</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MJB">Männliche Jugend B</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnA">A Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnB">B Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnC">C Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnD">D Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*KnE">E Knaben</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*WJA">Weibliche Jugend A</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*WJB">Weibliche Jugend B</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaA">A Mädchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaB">B Mädchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaC">C Mädchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaD">D Mädchen</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=*MaE">E Mädchen</a>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Erwachsene">Erwachsene</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Trainingsplan">Trainingsplan</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Schiedsrichter">Schiedsrichter</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Hockey-Links">offizielle Links</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=events_gruppe&id=975">Kalender</a>
</li>
</ul>
</li>
<li>
TENNIS
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Herren">HERREN</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Damen">DAMEN</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Jugend">JUGEND</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Trainer">TRAINER</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Schule">TENNISSCHULE</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*_action_events_gruppe_id_976">KALENDER</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=platzbuchung_woche&id=117">PLATZBUCHUNG</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=*Tennis-Links">OFFIZIELLE LINKS</a>
</li>
</ul>
</li>
<li>
UHLEN.TV
</li>
<li>
MEIN.HTCU
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="?action=profile_edit">PROFIL</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=start_news&cmd=list">ARTIKEL</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_meinerechnungen">Meine Rechnungen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_mitgliedsbescheinigung">Meine Mitgliedsbescheinigung</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_teilnahmebescheinigung">Meine Teilnahmebescheinigungen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=profile_interessen">Meine Interessen</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=events_meinetermine">Meine Termine</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_wunschmeine">Meine Support-Anfragen</a>
</li>
</ul>
</li>
<li>
ADMIN
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="#">KASSE <span class="fa arrow"></span></a>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?module=kasse">KASSE</a>
<li class="menulevel2">
<a class=" " href="?action=kasse_tasks">Startseite</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=kasse_beleg">SPESEN</a>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Belege <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_buchung&cmd=addmulti">Belegschnellerfassung</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_angebote">Angebote</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_rechnungneu">Neue Rechnung</a>
</li>
</ul>
</li>
<li class="menulevel2">
<a class=" " href="?action=members_beitragaktuell">BEITRÄGE</a>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Rechnungen <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=0">Rechnungen unverschickt</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=1">Rechnungen offen</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=2">Rechnungen in Bezahlung</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=3">Rechnungen bezahlt</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_buchungen&status=6">Rechnungen alle</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_faellig">Übersichten</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_einzug">SEPA-ÜW/Einzug</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Buchführung <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_journal">Journal</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_guv">Gewinn und Verlust</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_bilanzoffenk">Übersichten</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_kontenrahmen">Kontenrahmen</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Barkasse <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_barkasse&konto=1000">Hauptkasse</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu menulevel2">
Bankkonten <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel3">
<a class=" " href="?action=kasse_kontouebersicht">(Übersicht)</a>
</li>
<li class="menulevel3">
<a class=" " href="?action=kasse_bank&bankkonto=250">Vereinskonto Sparkasse</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_overview">ÜBERBLICK</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_basis">BASISKONFIG</a>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_optionen">OPTIONEN</a>
</li>
<li class="dropdown dropdown-submenu menulevel1">
VORLAGEN <span class="fa arrow"></span>
<ul class="menulist">
<li class="menulevel2">
<a class=" " href="?action=admin_mailtemplates">MAIL</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_pdftemplates">PDF</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_static">HTML</a>
</li>
<li class="menulevel2">
<a class=" " href="?action=admin_antraege">Anträge</a>
</li>
</ul>
</li>
<li class="menulevel1">
<a class=" " href="?action=admin_wunsch">Support-Anfragen</a>
</li>
</ul>
</li>
</div>
</div>
</div>
</div>
1.) If the menu is open when the page is called, you may want to hide it until called using style="display: none;" on the mobilespacemenu-class.
Edit: If you really want to use JS to hide the menu on page load, you could use: document.onload = document.getElementsByClassName("mobilemenuspace")[0].style.display = "none";, although referencing using an Id might be a better option here.
2.) Add an EventListener to the div, reacting on clicks and hiding the menu.
I am not quite sure whether this covers all points (and if I determined the menu correctly).
I want to change the background of nav item on dropdown when they are clicked. and also in screen resolution less than 992px the nav menu appears after clicking toggle button but thats not the problem, the problem is that the submenus in dropdown are in such a way that it is difficult to understand whoose submenu is displaying. I want to fix this.
this following is my html code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<!-- bootstrap link -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="css/custom.css">
<!-- JQuery3.2.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<!-- Trekking In Nepal -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Trekking in Nepal
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Annapurna Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Annapurna Circuit</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Annapurna Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Upper Mustang</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Everest Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Everest Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Jiri to Everest Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Everest Three Pass</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Langtang Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Langtang Helambu</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Langtang Gosaikunda Lake</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#">Langtang Valley</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Custom js -->
<script src="js/custom.js"></script>
</body>
</html>
This following is what i write in custom.css
.navbar-collapse .navbar-nav .dropdown .dropdown-menu{
margin-left: 0px !important;
margin-top: 0px !important;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
transition: all 0.3s ease-in-out 0s;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
.dropdown:hover>.dropdown-menu{
display: block;
}
.dropdown-submenu:hover>.dropdown-menu{
display: block;
}
#media only screen and (max-width: 991px) {
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
transition: all 0.3s ease-in-out 0s;
}
}
.submenuNav{
opacity: 0.8;
margin-right: 3px;
}
.submenuNav:hover{
opacity: 1;
transform: translateX(3px);
transition: 0.4s all ease;
margin-right: 0px;
}
.dropdown-item{
background-color: none !important;
color: #007bff;
opacity: 0.8;
}
.dropdown-item:hover{
background-color: none !important;
color: #007bff;
opacity: 1;
transition: 0.2s all ease;
}
.customNav{
background-color: none !important;
color:#007bff !important;
}
.navbar .navbar-toggler .navbar-toggler-icon{
background-color: #007bff;
}
This following is js file I write in custom.js
$(document).ready(function(){
$(".dropdown-item").click(function(){
$(this).addClass("customNav");
});
});
You are saying:
I want to change the background of nav item on dropdown when they are clicked
In this case, you need to change/set the active css selector for the a tags like so:
.dropdown-submenu a:active {
background-color: yellow;
}
More info:
https://www.w3schools.com/cssref/sel_active.asp
I am trying to add a hover animation to my navigation items using Greensock animation platform. The animation works as I expect it to but it is applied to all the navigation items instead of just the item that is being hovered over. Below is a link to the code and Codepen. Any help would be much appreciated.
let $portfolioBtn = $('.portfolio-btn');
let $portfolioBtnUnderline = $('.portfolio-btn-underline');
$portfolioBtn.mouseover(function() {
TweenMax.to($portfolioBtnUnderline, 0.5, {
scaleX: 1,
ease: Power4.easeInOut,
})
});
$portfolioBtn.mouseleave(function() {
TweenMax.to($portfolioBtnUnderline, 0.5, {
scaleX: 0,
ease: Power4.easeInOut,
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<nav class="menu">
<ul class="active">
<li>
<a class="portfolio-btn" href="#">About</a>
<div class="portfolio-btn-underline"></div>
</li>
<li>
<a class="portfolio-btn" href="#">Item 1</a>
<div class="portfolio-btn-underline"></div>
</li>
<li>
<a class="portfolio-btn" href="#">Item 2</a>
<div class="portfolio-btn-underline"></div>
</li>
<li>
<a class="portfolio-btn" href="">Item 3</a>
<div class="portfolio-btn-underline"></div>
</li>
<li>
<a class="portfolio-btn" href="#">Contact</a>
<div class="portfolio-btn-underline"></div>
</li>
</ul>
</nav>
https://codepen.io/rp20/pen/WdrwWP
HTML
<nav class="menu">
<ul class="active">
<li>
<a class="portfolio-btn" href="#">About</a>
</li>
<li>
<a class="portfolio-btn" href="#">Item 1</a>
</li>
<li>
<a class="portfolio-btn" href="#">Item 2</a>
</li>
<li>
<a class="portfolio-btn" href="">Item 3</a>
</li>
<li>
<a class="portfolio-btn" href="#">Contact</a>
</li>
</ul>
</nav>
CSS
.portfolio-btn {
position: relative;
color: #000;
text-decoration: none;
}
.portfolio-btn:hover {
color: #000;
}
.portfolio-btn:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.portfolio-btn:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
I hope this helps
That is because you have the same classname to all the buttons. Give each item a unique id and write mouseOver for individual ids. Give unique id for item 1, item 2, item 3... and add item-1.mouseleave, item2.mouseleave
You are currently selecting all elements with the underline class, but you can select the element to animate based on the element that is hovered.
let $portfolioBtn = $('.portfolio-btn');
$portfolioBtn.mouseover(function(){
let $portfolioBtnUnderline = $( this ).next( '.portfolio-btn-underline' );
TweenMax.to($portfolioBtnUnderline, 0.5, {
scaleX:1,
ease: Power4.easeInOut,
})
});
$portfolioBtn.mouseleave(function(){
let $portfolioBtnUnderline = $( this ).next( '.portfolio-btn-underline' );
TweenMax.to($portfolioBtnUnderline, 0.5, {
scaleX:0,
ease: Power4.easeInOut,
})
});