How to hide menu with javascript - javascript

I found this code on the web and i need help figuring out how to make is so when i click on one of the li elements the menu hides. Thanks.
http://jsfiddle.net/E4Zgj/203/
var originalNavClasses;
function toggleNav() {
var elem = document.getElementById('navigation_list');
var classes = elem.className;
if (originalNavClasses === undefined) {
originalNavClasses = classes;
}
elem.className = /expanded/.test(classes)
? originalNavClasses
: originalNavClasses + ' expanded';
}
<nav id="navigation">
<a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">
☰ MENU
</a>
<ul id="navigation_list" role="navigation">
<li><a href=#>HOME</a>
</li>
<li><a href=#>SERVICES</a>
</li>
<li><a href=#>WORK</a>
</li>
<li><a href=#>CONTACT</a>
</li>
</ul>
</nav>

Try this:
var nav = document.getElementById('navigation_list');
function toggleNav(e) {
nav.classList.toggle('expanded');
e.preventDefault();
}
document
.getElementById('navigation')
.getElementsByClassName('menu_button')[0]
.onclick = toggleNav;
nav.onclick = toggleNav;
Note I have removed the inline event listener in your html, and attached it using JS instead.
Demo

Your fiddle is using MooTools, not sure if that is the library you're using or not but this is what you need to do in jQuery. I don't know MooTools:
$(function() {
$('#navigation_list a').on('click', function(e) {
e.preventDefault();
toggleNav();
});
});

Related

Disable all links on a list when any one is clicked

I've a list of links and I've created a function that does a link disabling. I've tried 'return false' and preventDefault() but it is preventing this from running Flask operations in the back end as well so I did replaceChild(). Can someone help me modify this function in a way that whenever anyone is clicked, the full menu is disabled?
<body>
<ul id="list">
<li><image src="{{url_for('static',filename = 'logo.png')}}"; width="96px"; height="96px"></li>
<li>View Pages</li>
<li>View Images</li>
<li>View Lists</li>
<li>View Maps</li>
<li><a id="r1" href="/reload" onclick="switcherR()">Reload</a></li>
<li><a id="r2" style="display: none;">Reload</a></li>
</ul>
</body>
and the function switcherR is this:
<script>
function switcherR(){
var re1 = document.getElementById("r1");
var re2 = document.getElementById("r2");
var lis = document.getElementById("list");
r2.style.background = "#b3b3b3";
r2.style.display = "block";
r1.style.display = "none";
lis.replaceChild(re2, re1);
}
</script>
One of the way is to create CSS rule such as this:
.disabled {
pointer-events: none;
cursor: default;
}
Then add to <li> tags a class (for example menuItem). And then in .js code use addEventListener() on your list where you will add a class 'disabled' to menuItem such as
document.getElementById("list").addEventListener("click", (evt) => {
evt.target.menuItem.add(`disabled`);
});

event.target of a jQuery click event returning the child of the clicked element

I have a jQuery click event on a hyperlink containing an image. Both the hyperlink and the image has seperate ids. I'd expect that when I click the hyperlink, the code event.target.id inside the event handler would return the hyperlink id as the event is tied to the hyperlink, but it returns the image id. Why is that? Is there any way to always make the element tied to the event become the event.target?
HTML:
<div id="menuContainer">
<ul id="menu">
<li><a id="home"><img id="logo" src="img/logo.png" alt="logo"></a></li>
<li><a id="about">Om oss</a></li>
<li><a id="concept">Konsept</a></li>
<li><a id="history">Data</a></li>
<li><a id="store">Butikk</a></li>
</ul>
</div>
<div id="frontpage"></div>
<div id="content"></div>
JS:
function Page(pageId, linkId, file, backgroundImg, showPage){
this.id = pageId;
this.link = linkId;
this.content = file;
this.img = backgroundImg;
this.show = showPage;
this.loadPage = function() {
if (this.show && $cont.is(":hidden")) $cont.show();
else if (!this.show && $cont.is(":visible")) $cont.hide();
if (this.content != "") $cont.load(this.content);
else $cont.html("");
$("#frontpage").css("backgroundImage", "url(img/" + this.img + ")");
}
}
var pages = [];
var linkToPageId = {};
function addPage(linkId, file, backgroundImg, showPage = true) {
var pageId = pages.length;
var newPage = new Page(pageId, linkId, file, backgroundImg, showPage);
pages.push(newPage);
linkToPageId[linkId] = pageId;
}
addPage("home", "", "frontpage.jpg", false);
$("#menu a").click(function(event){
console.log(event.target.id);
pages[linkToPageId[event.target.id]].loadPage();
});
PS. I know this can be quickfixed by giving changing the linkId of this specific Page object to "logo" instead of "home", but it kinda spaghettifies the code. I would like to see if there's any other option first.
PSS. I also know JS has actual Classes instead of the function-based "class" I've used. It's irrelevant to my question.
The event.target will always be the element that dispatched the event. If you click on an element inside a container, then no matter what element the listener is attached to, the event.target will be the element inside the container.
If you want a reference to the element the listener is attached to, use this or event.currentTarget:
$("#menu a").click(function() {
console.log(this.id);
// pages[linkToPageId[this.id]].loadPage();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuContainer">
<ul id="menu">
<li>
<a id="home"><img id="logo" src="img/logo.png" alt="logo"></a>
</li>
<li><a id="about">Om oss</a></li>
<li><a id="concept">Konsept</a></li>
<li><a id="history">Data</a></li>
<li><a id="store">Butikk</a></li>
</ul>
</div>
<div id="frontpage"></div>
<div id="content"></div>
$("#menu a").click(function() {
console.log(event.currentTarget.id);
// pages[linkToPageId[event.currentTarget]].loadPage();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuContainer">
<ul id="menu">
<li>
<a id="home"><img id="logo" src="img/logo.png" alt="logo"></a>
</li>
<li><a id="about">Om oss</a></li>
<li><a id="concept">Konsept</a></li>
<li><a id="history">Data</a></li>
<li><a id="store">Butikk</a></li>
</ul>
</div>
<div id="frontpage"></div>
<div id="content"></div>
you use event.currentTarget which points to the element that you attached the listener. It does not change as the event bubbles.
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
Hope this was helpful.
There is a CSS tricks that will ignore hover and click events for the element on which is set the rule:
#menu a img {
pointer-events: none;
}
This rule will cancel your :hover rules on that element (and children because of the cascading beauty of CSS).
document
.querySelectorAll("#menu a")
.forEach(
(element) => element.addEventListener(
"click",
(event) => document.querySelector("#click-target").textContent = event.target.outerHTML
)
);
#menu a span.icon {
pointer-events: none;
}
#menu a span:hover {
color: #F0F;
font-weight: 700;
}
<p>Try me by clicking on links or on the "checkbox" icons.</p>
<ul id="menu">
<li><span class="icon">☑ </span> pointer-events: none
<li><span>☐ </span> No pointer-events rule
</ul>
<div id="click-target"></div>

slide children ul of parent from left to right jquery

I have a div that contains a menu, that menu slide from left to rigth when the user click on a button, everything is ok until here, but i can't replied the same effect when I tried to show the next target.
The skeleton of the menu is below:
<button id="icons-header" class="hamburguer">
Push me!
</button>
<div id="sideBar" class="container-fluid sidebar visible">
<div class="row">
<div class="menu-left">
<ul id="mm-1" class="mm-list visible"> /This is the principal menu
<li><a class="mm-next" href="#" data-target="#women">Women</a></li>
<li><a class="mm-next" href="#" data-target="#men">Men</a></li>
<li><a class="mm-next" href="#" data-target="#kids">Kids</a></li>
</ul>
<!-- from here to the final are the sub elements -->
<ul id="men" class="mm-list">
<li><a class="mm-next icon" href="#" data-target="#mm-1">
<i class="glyphicon glyphicon-triangle-left"></i> Home</a></li>
<li class="menu-title"><span> Men</span></li>
<li><a class="mm-next" href="#" data-target="#men-clothing">clothes</a></li>
<li><a class="mm-next" href="#" data-target="#mm-bags">stuff</a></li>
</ul>
<ul id="men-clothing" class="mm-list">
<li><a class="men-bags" href="#" data-target="#men">
<i class="glyphicon glyphicon-triangle-left"></i> Men</a></li>
<li class="menu-title"><span> clothes</span></li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
</ul>
The first effect to show the menu is this:
var hidden = $('#sideBar');
var element = $('#mm-1');
if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow").addClass('visible');
}
That code I replied to show the new segment but not works, my complete code is jsfiddle
#victor, In this case you can do something like this(I just made changes in JS). Please take a look at once.
<script>
$(function(){
$(".hamburguer").click(function(){
var button = $(this).attr('class');
console.log(typeof button);
if(button == "hamburguer")
{
$(this).removeClass('hamburguer');
$(this).addClass('blueCross');
$('#mm-1').show();
/*$('#sideBar').show(300);*/
}else
{
$(this).removeClass('blueCross');
$(this).addClass('hamburguer');
$(".mm-list").hide();
}
var hidden = $('#sideBar');
var element = $('#mm-1');
if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow").addClass('visible');
$('#mm-1').show();
}
});
$(document).on('click', '.mm-next', function (e) {
e.preventDefault();
var hidden = $('#sideBar');
var target = $(this).data("target");
var others = $("div.menu-left").find(".mm-list").not(target);
others.hide();
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
hidden.animate({"left":"0px"}, "slow").removeClass('visible');
$(target).show();
return false;
});
});
</script>
Let me know if it helped.
There is error in your code, You class name is different in you javascript. I have made some changes in your javascript please take a look into it and let me know if it doesn't work
$(function(){
$(".hamburguer").click(function(){
var button = $(this).attr('class');
console.log(typeof button);
if(button == "hamburguer")
{
$(this).removeClass('hamburguer');
$(this).addClass('blueCross');
$('#mm-1').show();
/*$('#sideBar').show(300);*/
}else
{
$(this).removeClass('blueCross');
$(this).addClass('hamburguer');
$(".mm-list").hide();
}
var hidden = $('#sideBar');
var element = $('#mm-1');
if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow").addClass('visible');
}
});
$(document).on('click', '.mm-next', function (e) {
e.preventDefault();
var target = $(this).data("target");
var others = $("div.menu-left").find(".mm-list").not(target);
others.hide();
$(target).show();
return false;
});
});
Class name 'hamburguer' create issue as they seems non-identical in supplied javascript. Please check it once. Let me know if it helped.

Variable not being set correctly; how to fix?

I want my JQuery to select one of the navigation links—based on the page that I'm on—and then I want it to move it to the top of the list.
This is the HTML of my navigation bar:
<nav>
<ul id=nav>
<li>Home</li>
<li>Skillsets</li>
<li><icon>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
This is the JQuery I'm using to try and reorder the list:
var page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function(){
var ul = $('nav').children('ul'),
li = ul.children('li'),
href = $('a[href*='+page+']');
//move element to top
ul.prepend(href.parent());
});
It isn't working and I would assume that it's because the href variable isn't being set correctly. alert(href); and alert(href.parent()); output nothing.
Any ideas? Thanks!
As #user3064914 said, you missed '#', but you missed quotes either:
<ul id = "nav">
var href = $('a[href*="'+page+'"]');
EDIT
Also, you can write a bit shorter with child selectors:
var ul = $('nav > ul'),
href = ul.find('> li a[href*="' + page + '"]');
ul.prepend(href.parent());
Try this, it will work.
<script>
var page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function()
{
var href = $('a[href='+'"'+page+'"'+']').parent();
var parent = $("#nav");
var childToMoveLast = href.remove();
parent.prepend(childToMoveLast);
});
</script>
Here is the HTML
<nav>
<ul id='nav'>
<li>Home</li>
<li>Skillsets</li>
<li><icon>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>

Dropdown menu, anchor doesn't work

I have made a dropdown menu and it works fine, except the anchor (a href="#") does not work.
I think the script has something wrong, but I can't figure it out.
Can anyone can help me please?
<ul class="menu">
<li class="listMenu on">
<a class="depth1" href="#">aaa</a>
<div class="depth2Wrap">
<ul class="depth2">
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
</li>
<li class="listMenu"><a class="depth1" href="d.html">ddd</a></li>
</ul>
$(function($) {
var li = $('.menu>.listMenu');
li.addClass('off');
$('.menu .on').find('.depth2Wrap').show();
$('.menu>.listMenu>a').click(function() {
var myArticle = $(this).parents('.listMenu:first');
if(myArticle.hasClass('off')){
li.addClass('off').removeClass('on');
li.find('.depth2Wrap').slideUp(100);
myArticle.removeClass('off').addClass('on');
myArticle.find('.depth2Wrap').slideDown(100);
li.removeClass('fir_sele');
} else {
myArticle.removeClass('on').addClass('off');
myArticle.find('.depth2Wrap').slideUp(100);
li.removeClass('fir_sele');
}
return false;
});
});
Remove the following
return false;
return false tells the browser not to complete the default action, which is following the link.
See What's the effect of adding 'return false' to a click event listener?

Categories

Resources