I'm trying to build a mobile responsive "hamburger" menu. The html which I'm using for this is below...
.menu_closed {
color: red;
}
.menu_open {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('span.menu_closed').click(function() {
$('ul.menu').toggle('1000');
$(this).toggleClass("menu_open menu_closed");
});
</script>
<span class="menu_closed">☰</span>
<ul class="menu" id="menu">
<ul class='section' id='section_1'>
<li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span>
<ul>
<li id='exhibit_1' class='exhibit_title'> → Introduction
</li>
<li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> → Deriving functions</a>
</li>
<li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> → Exploiting odds</a>
</li>
<li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> → Betting history</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_5'>
<li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span>
<ul>
<li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a>
</li>
<li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a>
</li>
<li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_4'>
</ul>
<div class='bot'>
<p>twitter
<br />
facebook
</p>
</div>
</ul>
For some reason, it's not closing and opening as it should. I've no idea what's wrong.
I would be grateful if anybody could help.
Jack
$('span.menu_closed').click(function() { should reference a standard menu class, like .hamburger, not .menu_closed because if you change .menu_closed to .menu_open then .menu_closed no longer exists and you'll lose the click handler.
$(this).toggleClass("menu_open menu_closed"); should just toggle a class like open or closed. Technically what you were doing would work OK where the classname was .menu_open and you update this $.toggleClass() line to toggle the class .menu_closed, but then you end up with an element called span.menu_open.menu_closed. Better to name the menu something agnostic, then toggle whether it's open or not.
Also added cursor: pointer; to the menu to give an indication to the user that you can click the element.
Wrapped your jQuery code in $(function() {}); which will cause the page to wait to run the JS until the DOM is ready. This is needed since your JS comes before the rest of the HTML on the page.
And changed your click handler from using $.live() (deprecated) to $.on(). $.live() was deprecated in 1.7 and removed in 1.9, and jQuery advises using $.on() now to attach event handlers.
.hamburger {
color: red;
cursor: pointer;
}
.open {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.hamburger').on('click',function() {
$('ul.menu').toggle(1000);
$(this).toggleClass("open");
});
});
</script>
<span class="hamburger">☰</span>
<ul class="menu" id="menu">
<ul class='section' id='section_1'>
<li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span>
<ul>
<li id='exhibit_1' class='exhibit_title'> → Introduction
</li>
<li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> → Deriving functions</a>
</li>
<li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> → Exploiting odds</a>
</li>
<li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> → Betting history</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_5'>
<li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span>
<ul>
<li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a>
</li>
<li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a>
</li>
<li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_4'>
</ul>
<div class='bot'>
<p>twitter
<br />
facebook
</p>
</div>
</ul>
hey man i tried your code it's working fine here is
https://jsfiddle.net/L0vnd4ay/
Related
I'm trying to collapse a nested menu with jQuery. I read this answer and, to me, it appears to be similar to my solution. The problem is that mine doesn't work.
What I think I'm saying with my JavaScript code is: "hey, when a user clicks on a li that is the parent of a ul.submenu, get its ul.submenu children and attach the slideToggle only to it". But, as you can see from the snippet, it closes also the parent ul.submenu and I can't understand why.
$(document).ready(function () {
$('.submenu').hide();
$('.submenu').parent('li').click(function () {
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>
You want to stop the click event from bubbling up the DOM and triggering the click handler on the parent. Use .stopPropagation() for that:
$(document).ready(function() {
$('.submenu').hide();
$('.submenu').parent('li').click(function(e) {
e.stopPropagation()
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>
I'm working on a navigation with 3 levels and want use toggle to expand and close those levels. I got it to work with the second level but am struggling with the third level.
I want the third level(purpose1,purpose2) to open when the second level(Purpose) is clicked.
<ul>
<li class="dropdown">About Us
<ul>
<li>Services</li>
<li>History</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="products">
<li>Series</li>
<li>Purpose</li>
</ul>
<ul>
<li>purpose1</li>
<li>purpose2/li>
</ul>
</li>
</ul>
Javascript:
$('li.dropdown').click(function(){
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
$('ul.products').click(function() {
$('ul.products').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
I've created a fiddle to illustrate the issue. The actual navigation is much more complex but this should do the job. Any suggestiones are really appreciated!
Your html is wrong. If the third lvl is to be displayed by clicking "purpose" it shoudl look like this:
<li class="dropdown">Products
<ul class="products">
<li>Series</li>
<li >Purpose
<ul >
<li>Series123</li>
<li>Series456</li>
</ul>
</li>
</ul>
</li>
Then just add a class to this thrid lvl list parent and add the jquery fucntion.
clicking in the product li is propagating up to the top level, which is causing the close.
$('ul.products').click(function(e) {
$('ul.products').not(this).find('ul').hide();
$(this).find('ul').toggle();
e.stopPropagation();
});
.
<ul>
<li class="dropdown">About Us
<ul>
<li>Services</li>
<li>History</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="products">
<li>Series
<ul>
<li>Series123</li>
<li>Series456</li>
</ul>
</li>
<li>Purpose
<ul>
<li>purpose1</li>
<li>purpose2</li>
</ul>
</li>
</ul>
</li>
</ul>
here is the simplified working version, first move you 3rd level ul inside the li
<ul>
<li class="dropdown">About Us
<ul>
<li>Services</li>
<li>History</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="products">
<li>Series
<ul>
<li>Series123</li>
<li>Series456</li>
</ul>
</li>
<li>Purpose</li>
</ul>
</li>
</ul>
and here goes the jQuery snippet -
$('li.dropdown a').click(function(){
$('li.dropdown').not(this).find('ul').hide();
$(this).parent('li').find('ul').toggle();
});
$('li.dropdown ul li').click(function() {
$(this).find('ul').toggle();
});
Check the working fiddle
Trying to make my own responsive mobile drop-down menu with its corresponding sub-menus.
So far I have the basic layout.The user should be able to toggle between showing those sub-menus.When "WORK" is clicked no other sub-menu should be open.I've gone ahead and added the "display: none;" property to hide the sub-menus.Trying to use jQuery to show() and hide() them when they are clicked.I've looked around and test various methods. So far none worked.
The code is as follows
HTML
<nav id="nav">
<ul class="topLinksUL">
<li class="topLinksLI"><a class="topLinksA" title="Home" id="home" href="">HOME</a>
<ul class="abtDropUL">
<li class="abtDropLI"><a class="dropLinksA" href=""></a></li>
</ul>
</li>
<li class="topLinksLI"><a class="topLinksA" title="Work" id="wrk" href="">WORK</a>
<ul class="workDropUL">
<li class="workDropLI"><a class="dropLinksA" href="">Projects</a></li>
<li class="workDropLI"><a class="dropLinksA" href="">Education</a></li>
</ul>
</li>
<li class="topLinksLI"><a class="topLinksA" title="About Me" id="abt" href="">ABOUT ME</a>
<ul class="abtDropUL">
<li class="abtDropLI"><a class="dropLinksA" href="">Bio</a></li>
<li class="abtDropLI"><a class="dropLinksA" href="">Interests</a></li>
</ul>
</li>
<li class="topLinksLI"><a class="topLinksA" title="Contact Me" id="contact" href="">CONTACT ME</a>
<ul class="contactDropUL">
<li class="contactDropLI"><a class="dropLinksA" href="">Email</a></li>
</ul>
</li>
</ul>
</nav><!-- ends nav -->
CSS
nav{
width: 100%;
text-align: center;
margin: 0 auto;
}
/* Centering the LIST ITEMS within the UL List ITems*/
nav ul li ul.workDropUL, nav ul li ul.abtDropUL, nav ul li ul.contactDropUL{
padding-left: 0;
display: none;
}
ul{
margin: 0.2em 0;
}
body{
font-family: 'PT Sans Narrow', sans-serif;
}
jQuery
$('#wrk').click(function() {
$(".workDropUL").show();
});
http://codepen.io/anon/pen/vEOJQQ - provided the link so you can test it out.
Methods tried
How do I hide the ul's that are not clicked and show submenu in Jquery?
How to fix this JQuery dropdown menu?
MAIN POINT
Some of these fixes do WORK but they only show the sub-menu for a second.
Is there something wrong with my code?
I believe you're looking for "preventDefault". Try something like this for your JS:
$('#wrk').click(function(evt) {
evt.preventDefault();
$(".workDropUL").show();
});
Edit: Here's the article about preventDefault() on the jQuery API site: http://api.jquery.com/event.preventdefault/
By default when you hit a anchor tag it looking for navigation if the herf="" it take reload the page.so you can handel the herf="#"(demo) or use span tag (demo)
<nav id="nav">
<ul class="topLinksUL">
<li class="topLinksLI"><a class="topLinksA" title="Home" id="home" href="">HOME</a>
<ul class="abtDropUL">
<li class="abtDropLI"><a class="dropLinksA" href=""></a></li>
</ul>
</li>
<li class="topLinksLI"><span class="topLinksA" title="Work" id="wrk" href="">WORK</span>
<ul class="workDropUL">
<li class="workDropLI"><a class="dropLinksA" href="">Projects</a></li>
<li class="workDropLI"><a class="dropLinksA" href="">Education</a></li>
</ul>
</li>
<li class="topLinksLI"><a class="topLinksA" title="About Me" id="abt" href="">ABOUT ME</a>
<ul class="abtDropUL">
<li class="abtDropLI"><a class="dropLinksA" href="">Bio</a></li>
<li class="abtDropLI"><a class="dropLinksA" href="">Interests</a></li>
</ul>
</li>
<li class="topLinksLI"><a class="topLinksA" title="Contact Me" id="contact" href="">CONTACT ME</a>
<ul class="contactDropUL">
<li class="contactDropLI"><a class="dropLinksA" href="">Email</a></li>
<li class="contactDropLI"><a class="dropLinksA" href="">Facebook</a></li>
<li class="contactDropLI"><a class="dropLinksA" href="">Instagram</a></li>
<li class="contactDropLI"><a class="dropLinksA" href="">Linked In</a></li>
<li class="contactDropLI"><a class="dropLinksA" href="">StackOverflow</a></li>
</ul>
</li>
</ul>
</nav><!-- ends nav -->
$('#wrk').click(function() {
$(".workDropUL").toggle();
});
I have a nested ul to make a sub menu. I want a click event to show the child ul and keep the others collapsed.
HTML
<div class="sideMenu">
<ul>
<li class="titledUl"><b>Dashboard</b>
</li>
<ul class="subUl">
<li>Dash Tool 1
</li>
<li class="subUl">Dash Tool 2
</li>
</ul>
</ul>
<ul>
<li class="titledUl"><b>User Managment</b>
</li>
<ul class="subUl">
<li>UM Tool 1
</li>
<li>UM Tool 2
</li>
</ul>
</ul>
</div>
jQuery
$( document ).ready(function() {
console.log( "ready!" );
$('.titledUl').click(function() {
console.log('clicked')
$(this).closest('.subUl').show();
console.log("should show")
});
});
It shows all my console logs when I click on the parent ul. (also the sub uls are hidden using css display none)
Thanks!
Hello your job done here: http://jsfiddle.net/webcarvers/RYvGv/
HTML:
<div class="sideMenu">
<ul>
<li class="titledUl"><b>Dashboard</b>
<ul class="subUl">
<li>Dash Tool 1</li>
<li>Dash Tool 2</li>
</ul>
</li>
</ul>
<ul>
<li class="titledUl"><b>User Managment</b>
<ul class="subUl">
<li>UM Tool 1</li>
<li>UM Tool 2</li>
</ul>
</li>
</ul>
</div>
CSS:
.subUl{
display:none;
}
.titledUl{
cursor:pointer;
}
JS:
$(document).ready(function(){
$('.titledUl').on('click', function() {
$(this).closest('ul').find(".subUl").slideToggle(500);
});
});
I got it working with the help of you all. Thank you!
New HTML
<div class="sideMenu">
<ul>
<li class="titledUl"><b>Dashboard</b>
<ul class="subUl">
<li>Dash Tool 1
</li>
<li class="subUl">Dash Tool 2
</li>
</ul>
</li>
</ul>
<ul>
<li class="titledUl"><b>User Managment</b>
<ul class="subUl">
<li>UM Tool 1
</li>
<li>UM Tool 2
</li>
</ul>
</li>
</ul>
</div>
New jQuery
$( document ).ready(function() {
console.log( "ready!" );
$('.titledUl').click(function() {
console.log('clicked');
$(this).children().show();
console.log("should show");
});
});
okay so i have a Nav bar, and now i want to make it when it loads the page, it builds the nav bar
<div id="nav">
<div id="nav_holder">
<ul>
<li class="first"> Home </li>
<li>Rules </li>
<ul class="drop">
<li>Help
<ul class="drop">
<li>Beginnen</li>
<li>Geld Verdienen</li>
<li>Protection Blocks</li>
<li>Trade Signs</li>
<li>Sign beveiliging</li>
<li>Item ID List</li>
</ul>
</li>
</ul></li>
<li>Donate </li>
<ul class="drop">
<li>Staff
<ul class="drop">
<li>Faircraft team</li>
<li>Solliciteren</li>
</ul>
</li>
</ul></li>
<li>Videos </li>
<li></li>
<li>Forum </li>
</ul>
<ul class="right">
<li class="first">Sign Up! </li>
</ul>
</div>
</div>
so i think i need this code
function holder()
{ // check if adding 1 exceeds number of pics in array
var build='<img border="0" src="'+picArray[picCount]+'" width="649">\n';
document.getElementById("nav_holder").innerHTML=build;
}
}
but then i need it to make the nav bar,
btw i need help with the body onload feature too:p, please help
Instead of window.onload, try using jQuery http://jquery.com/:
$(document).ready(function(){
// build menu
)};
this will execute when the DOM finishes loading.