I'm currently trying to make my menu stay when you click on the menu, i mean so that the dropdown menu stays after clicking on it.
That is code i've already tried(Javascript down below), but for some reason it wont work for me in reality. So I'm looking for help now.
Fiddle with style > http://jsfiddle.net/hRxRG/
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="sv">
<head>
<title>Nösnäs</title>
<link rel="stylesheet" type="text/css" href="screen.css" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src="script.js"></script>
</head>
<body>
<button class="nav-button">Toggle Navigation</button>
<ul class="nav">
<li class="program">Program
<div class="second nav">
<ul>
<li>Teknik</li>
<li>Naturvetenskap</li>
<li>El</li>
</ul></li>
</div>
<li>Nösnäs</li>
<li>Schema</li>
<li>Matsal</li>
</ul>
</body>
</html>
console.log("hej");
$(".program").on('click',function () {
console.log("hejssss");
$('li div ul').toggle('.close');
console.log("hejs");
$('li div ul').show();
});
Try this markup:
<ul class="nav">
<li class="program">Program</li>
<div class="secondNav">
<ul>
<li>Teknik</li>
<li>Naturvetenskap</li>
<li>El</li>
</ul>
</div>
<li>Nösnäs</li>
<li>Schema</li>
<li>Matsal</li>
</ul>
And this Javascript:
$('li.program').on('click', function() {
$('.secondNav').toggle();
});
Here is the DEMO!
Your HTML code is not valid change it as follows :
<ul class="nav">
<li class="program">Program
<div class="second nav">
<ul>
<li>Teknik</li>
<li>Naturvetenskap</li>
<li>El</li>
</ul></div></li>
<li>Nösnäs</li>
<li>Schema</li>
<li>Matsal</li>
</ul>
and the JS you need to modify for sub menu click event like this :
$(".program").on('click',function () {
$('li div ul').toggle('');
});
$('.nav > li div ul li a').click(function(e) {
e.stopPropagation();
});
with css check this : http://jsfiddle.net/hRxRG/1/
Related
Please check the code below to see why the nav bar won't show up on the index file even after linking it through a class. Thank you in advance for your help!
Here is my templates.js
class MyMenu extends HTMLElement {
connectedCallback() {
this.innerHTML * `
<header>
<nav>
<ul>
<li class="logo">Damian Roiz</li>
<li class="items">Home</li>
<li class="items">About</li>
<li class="items">Services</li>
<li class="items">Blog</li>
<li class="items">Contact</li>
<li class="btn"><i class="fas fa-bars"></i></li>
</ul>
</nav>
<script>
$(document).ready(function(){
$('.btn').click(function(){
$('.items').toggleClass('show');
$('ul li').toggleClass('hide');
});
});
</script>
</header>
`
}
}
customElements.define('my-menu', MyMenu)
Here is my index.html
<head>
<script type='text/javascript' src=js/templates.js></script>
</head>
<body>
<my-menu></my-menu>
</body>
I'm trying to build a mega menu in Shopify, this is what I have in my HTML:
$('.has-child').on('click', function(event) {
event.preventDefault();
$(this).find('.child').toggleClass('menu-visible');
$('.child').click(function(e) {
e.stopPropagation();
});
});
.menu-visible{
color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
<li class="parent-main has-child">Shop
<ul class="child">
<li class="">All Collections</li>
</ul>
</li>
<li class="parent-main has-child">About
<ul class="child">
<li class="">Child link</li>
<li class="">Child link</li>
</ul>
</li>
</ul>
It's working as long as I'm clicking to open and close the same parent menu but the issue I'm having is once I click on one parent menu item and then click on another parent menu item it will open the second menu on the first (so if I click on "Shop" and then click "About" it will open the "About" menu on top of the "Shop" menu). I know I need to get it to remove the "menu-visible" class once I click another parent link but I just don't know how... I tried something with .siblings() but it didn't work, maybe I used it wrong...
Any ideas?
-Thanks.
Basically what you need is to add the display none to all the other children and toggle the one that you are clicking, by using the not() function you can achieve this without an if statement
<!DOCTYPE html>
<html>
<head>
<title>List</title>
<meta charset="utf-8">
<style type="text/css">
.d-none{
display: none;
}
</style>
</head>
<body>
<ul class="parent">
<li class="parent-main has-child">Shop
<ul class="child d-none">
<li class="">All Collections</li>
</ul>
</li>
<li class="parent-main has-child">About
<ul class="child d-none">
<li class="">Child link</li>
<li class="">Child link</li>
</ul>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.parent-main a').click(function(e){
e.preventDefault();
$('.child').not($(this).parent().find('.child')).addClass('d-none');
$(this).parent().find('.child').toggleClass('d-none');
})
});
</script>
</body>
</html>
$('.has-child').on('click', function(event) {
event.preventDefault();
$(event.currentTarget)
.find('.child')
.toggleClass('menu-visible')
.parent()
.siblings()
.find('.child')
.removeClass('menu-visible')
$('.child').click(function(e) {
e.stopPropagation();
});
});
Simply first remove class from all elements then re-apply on just wanted one.
use if ($(this).find('.child').hasClass("menu-visible")) { in order to toggle and remove from others in same time
$('.has-child').on('click', function(event) {
event.preventDefault();
if ($(this).find('.child').hasClass("menu-visible")) {
$('.child').removeClass("menu-visible")
$(this).find('.child').removeClass('menu-visible');
} else {
$('.child').removeClass("menu-visible")
$(this).find('.child').addClass('menu-visible');
}
$('.child').click(function(e) {
e.stopPropagation();
});
});
.menu-visible {
display: block !important;
}
.child {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
<li class="parent-main has-child">Shop
<ul class="child">
<li class="">All Collections</li>
</ul>
</li>
<li class="parent-main has-child">About
<ul class="child">
<li class="">Child link</li>
<li class="">Child link</li>
</ul>
</li>
</ul>
This one should solve your problem.
$('.has-child').on('click tap', function(event) {
event.preventDefault();
if ($(this).find('.child').hasClass('menu-visible')) {
$(this).find('.child').removeClass('menu-visible'); // toggle current
} else {
$('.menu-visible').removeClass('menu-visible'); // close all
$(this).find('.child').addClass('menu-visible'); // open current
}
});
In my HTML I have ol and li this is my HTML
and I have script for those links, like when I click on it i kept a alert to check it its not working
$('#namesId ol li').click(function() {
alert('clicked');
//ToDo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="col-sm-4" id="namesId" style="padding:0px">
<ol style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)</li>
</ol>
</div>
click function id not working what is the problem with it.
Try this:
$('#namesId ol').on('click', 'li', function(e){
e.preventDefault();
alert('clicked');
});
As you said li are generated dynamically, You have to use jQuery event-delegation
So do like below:-
$('#namesId ol').on('click',"li",function(e) {
e.preventDefault();
console.log('clicked');
//ToDo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4" id="namesId" style="padding:0px">
<ol style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)</li>
<li class="v">Wildlife</li>
</ol>
</div>
it should be:
$('#namesId ol li:nth-child(1)').click(function() {
alert('clicked');
//ToDo
}); //for first li click
$('#namesId ol li:nth-child(2)').click(function() {
alert('clicked');
//ToDo
}); //for second li click
Below Code working fine.
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ol id="namesId" style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)
</li>
<li class="v">Wildlife</li>
</ol>
<script>
$('#namesId li').click(function() {
alert('clicked');
//ToDo
});
</script>
</body>
</html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<ol id="namesId" style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)
</li>
<li class="v">Wildlife</li>
</ol>
<script>
$('#namesId li').click(function() {
alert('clicked');
//ToDo
});
</script>
</body>
</html>
You have indicated a name for the selector #namesId, but it's not defined anywhere.
Put it this way and it will work:
<div id="namesId">
<ol style="padding-left: 10px;">
<li class="v">Funny 10 second video! - YouTube (360p)
</li>
<li class="v">Wildlife</li>
</ol>
</div>
I would like to Highlight the Menus Dynamically by using Php & javascript. Below code working for only Menu's. But I want when I click Submenu for that menu it should be Highlighted.Please check the Code once
<html>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active{
background: #4FA9E4; color:#FFF;
}
<ul id="id">
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul><li class="has-parent">a</li>
<li>b</li>
</ul>
</li>
<li class="has-sub">Patners
<ul><li>c</li>
<li>d</li></ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
Please Help me. Thanks in advance.
$('.has-parent').click(function() {
$(this).closest('.has-sub').addClass('active');
});
If I understood right, that's what you are looking.
BTW, you have some syntax problems.
You didn't close the <style>.
The <ul id="id"> is outside the <body>, isn't closed and apparently does nothing.
You are missing the <head>.
Final code:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
$('.has-parent').click(function() {
$(this).closest('.has-sub').addClass('active');
});
});
</script>
<style>
.active {
background: #4FA9E4;
color:#FFF;
}
</style>
</head>
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">
Company
<ul>
<li class="has-parent">a</li>
<li class="has-parent">b</li>
</ul>
</li>
<li class="has-sub">
Patners
<ul>
<li class="has-parent">c</li>
<li class="has-parent">d</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
This most be the second most simple rollover effect, still I don't find any simple solution.
Wanted: I have a list of items and a corresponding list of slides (DIVs). After loading, the first list item should be selected (bold) and the first slide should be visible. When the user hovers over another list item, that list item should be selected instead and the corresponding slide be shown.
The following code works, but is awful. How can I get this behaviour in an elegant way? jquery has dozens of animated and complicated rollover effects, but I didn't come up with a clean way for this effect.
<script type="text/javascript">
function switchTo(id) {
document.getElementById('slide1').style.display=(id==1)?'block':'none';
document.getElementById('slide2').style.display=(id==2)?'block':'none';
document.getElementById('slide3').style.display=(id==3)?'block':'none';
document.getElementById('slide4').style.display=(id==4)?'block':'none';
document.getElementById('switch1').style.fontWeight=(id==1)?'bold':'normal';
document.getElementById('switch2').style.fontWeight=(id==2)?'bold':'normal';
document.getElementById('switch3').style.fontWeight=(id==3)?'bold':'normal';
document.getElementById('switch4').style.fontWeight=(id==4)?'bold':'normal';
}
</script>
<ul id="switches">
<li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;">First slide</li>
<li id="switch2" onmouseover="switchTo(2);">Second slide</li>
<li id="switch3" onmouseover="switchTo(3);">Third slide</li>
<li id="switch4" onmouseover="switchTo(4);">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I'm gone!</div>
</div>
Rather than displaying all slides when JS is off (which would likely break the page layout) I would place inside the switch LIs real A links to server-side code which returns the page with the "active" class pre-set on the proper switch/slide.
$(document).ready(function() {
switches = $('#switches > li');
slides = $('#slides > div');
switches.each(function(idx) {
$(this).data('slide', slides.eq(idx));
}).hover(
function() {
switches.removeClass('active');
slides.removeClass('active');
$(this).addClass('active');
$(this).data('slide').addClass('active');
});
});
#switches .active {
font-weight: bold;
}
#slides div {
display: none;
}
#slides div.active {
display: block;
}
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="switch.js"></script>
</head>
<body>
<ul id="switches">
<li class="active">First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul>
<div id="slides">
<div class="active">Well well.</div>
<div>Oh no!</div>
<div>You again?</div>
<div>I'm gone!</div>
</div>
</body>
</html>
Here's my light-markup jQuery version:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function switchTo(i) {
$('#switches li').css('font-weight','normal').eq(i).css('font-weight','bold');
$('#slides div').css('display','none').eq(i).css('display','block');
}
$(document).ready(function(){
$('#switches li').mouseover(function(event){
switchTo($('#switches li').index(event.target));
});
switchTo(0);
});
</script>
<ul id="switches">
<li>First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul>
<div id="slides">
<div>Well well.</div>
<div>Oh no!</div>
<div>You again?</div>
<div>I'm gone!</div>
</div>
This has the advantage of showing all the slides if the user has javascript turned off, uses very little HTML markup and the javascript is pretty readable. The switchTo function takes an index number of which <li> / <div> pair to activate, resets all the relevant elements to their default styles (non-bold for list items, display:none for the DIVs) and the sets the desired list-item and div to bold and display. As long as the client has javascript enabled, the functionality will be exactly the same as your original example.
Here's the jQuery version:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function () {
$("#switches li").mouseover(function () {
var $this = $(this);
$("#slides div").hide();
$("#slide" + $this.attr("id").replace(/switch/, "")).show();
$("#switches li").css("font-weight", "normal");
$this.css("font-weight", "bold");
});
});
</script>
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide</li>
<li id="switch2">Second slide</li>
<li id="switch3">Third slide</li>
<li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I'm gone!</div>
</div>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$( '#switches li' ).mouseover(
function(){
$( "#slides div" ).hide();
$( '#switches li' ).css( 'font-weight', 'normal' );
$( this ).css( 'font-weight', 'bold' );
$( '#slide' + $( this ).attr( 'id' ).replace( 'switch', '' ) ).show();
}
);
}
);
</script>
</head>
<body>
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide</li>
<li id="switch2">Second slide</li>
<li id="switch3">Third slide</li>
<li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I'm gone!</div>
</div>
</body>
</html>
The only thing that's wrong with this code (at least to me) is that you're not using a loop to process all elements. Other than that, why not to it like that?
And with loop, I mean grabbing the container element via a JQuery and iterating over all child elements – basically a one-liner.