I'm using a js code for additional menu options on click, but how can I keep the "click menu" permanently open, say after one of its option has been clicked, so the user won't have to start over again once taken to the new page.
HTML:
<div class="c3" id="topLeftNav">
<ul class="secnav" id="secnav">
<h6>Generelt</h6>
<li class="current">Ordklasser
<ul class="ternav">
<li>Substantiver</li>
<li>Verber</li>
<li>Adjektiver</li>
<li>Numeralier</li>
<li>Interjektioner</li>
</ul>
And my JS:
///ternav/secnav -- catch inner clicks (ternav) first and preventDefault.
$('.ternav li a').click(function () {
window.location = $(this).attr('href');
});
//secnav
$('li').click(function (event) {
if ($(this).has('ul').length) {
event.preventDefault();
if ($(this).find('ul').css("display") == "none") {
$(this).find('a').eq(0).addClass('current');
$(this).find('ul').slideDown();
}
else {
$(this).find('ul').slideUp();
$(this).find('a').eq(0).removeClass('current');
}
}
});
Related
How can I edit my code so that the navbar closes when clicked outside of it but remain open if something inside of it is clicked?
$(document).ready(function() {
$('.nav-btn').on('click', function() {
$('.nav-btn').removeClass('active');
$(this).parent().find('.sub-menu').slideToggle();
$(this).toggleClass('active');
});
});
$(document).ready(function () {
$('.nav-btn').on('click', function (e) {
// Stop Document to be clicked when clicked in nav.
e.stopPropagation()
$('.nav-btn').removeClass('active');
var subMenu = $(this).parent().find('.sub-menu')
if (!$(".sub-menu").is(":visible")) {
$(this).parent().find('.sub-menu').slideToggle();
}
$(this).toggleClass('active');
});
// Toggle Sub Menu and remove active when Any vacant place is clicked
$(this).on('click', function (event) {
$('.nav-btn').removeClass('active');
$('.nav-btn').parent().find('.sub-menu').slideToggle();
});
// Prevent View close when Sub Items is clicked
$('.sub-menu').on('click', function (e) {
e.stopPropagation()
})
});
Hi, You just need to prevent the document click when clicked on the nav item and handle some additional things as done in the above code.
You can see Plunker example here also.
$(document).on('click', function (event) {
if ($(event.target).closest('.main-nav').length === 0) {
// Close button code
}
});
Another possible way is by wrapping all the content inside another div (except the header & navbar) and using the onclick tag:
<div onclick="hideNavbar()">
all your content goes here
</div>
function hideNavbar() {
$('.navbar-collapse').collapse('hide');
// getting the navbar div with jQuery
// and calling the function 'hide' of the Bootstrap class 'collapse'
}
When I click on menu-link specifically on the span the class active doesn't get added or toggled, if I click not on the span then everything works as normal.
$(document).on("click touchstart", ".menu-link", function(event) {
$("body").toggleClass('nav-open');
utilities.toggleContent(event);
});
utilities = function() {
var toggleContent = function(event) {
//If clicked element is an anchor and has a hash target, use it to select the toggle DIV
if (event.target.hash) {
//If it's one of the menu links
if ($(event.target).hasClass('menu-link')) {
//Close any open menus which aren't the target menu
$(".menu-content.active").not($(event.target.hash)).removeClass('active');
}
//Toggle the target menu
$(event.target.hash).toggleClass('active');
event.preventDefault();
} else {
$(this).next().toggleClass('active');
$(this).toggleClass('active');
return false;
}
},
// ...
<a href="#mainMenu" class="menu-link">
<span class="iconbar"></span>
<span class="iconbar"></span>
<span class="iconbar"></span>
</a>
community!
The idea is to create a list with normal list with text and sometimes clickable links.
Problem:
How to make this list to close only when the button is pressed and not when the user click on any item inside the list or anywhere on screen.
Fiddle: jsfiddle.net/H2Chj/494/
HTML:
<button data-text-swap="Show" id="trigger">Hide</button>
<div id="drop">
Menu item 1
Menu item 2
Menu item 3
Menu item 4
</div>
Javascript
$(document).ready( function(){
$('#trigger').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
$("button").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));}
else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));}
});
});
The one thing you had missing was stopping the propagation when you click on a link in the dropdown. this stops it from bubbling up to the $(document).click event handler.
$('#drop a').click(function(e){ e.stopPropagation(); });
I assume you had the $(document).click handler there so you could close the dropdown by clicking outside the dropdown menu.
see this fiddle: http://jsfiddle.net/o0m8p4bf/2/
Please use this javascript code:
$(document).ready( function(){
$("button").on("click", function() {
$('#drop').toggle();
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));}
else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));}
});
});
In a jQuery setting what is the best way to stop default propagation on the first click and show the submenu if the user is on the first click then restore the a link on the second click, or hide the currently displayed submenu if the users clicks on any other part of the page i have tried this with a few variations but none seem to work:
$('.nav-bar li:has(ul)').on('click', function () {
var CheckForClasssub = $('.nav-bar li ul').hasClass('subshow');
if (CheckForClasssub) {
$('.subshow').hide('slow').removeClass('subshow');
} else {
$('.nav-bar li').on('click', function () {
var thisflyout = $(this).find('.flyout');
$(thisflyout).toggle('slow').addClass('subshow');
});
}
});
this is my current menu structure:
<ul class="nav-bar">
<li>
google
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</li>
<li>google</li>
<li>google</li>
<li>google</li>
<li>google</li>
</ul>
currently clicking on class="flyout" toggles the sub menu, but i would love to use the whole link
/*UPDATE**/
Ok this works fine to display on first click then follow link on second but it doesn't hide if the page is clicked anywhere else...
$('.nav-bar li:has(ul)').on('click', function (e) {
var CheckForClasssub = $('.nav-bar li ul').hasClass('subshow');
if (CheckForClasssub) {
$('.subshow').hide('slow').removeClass('subshow');
} else {
var thisflyout = $(this).find('.flyout');
e.preventDefault();
$(thisflyout).show('slow').addClass('subshow');
}
});
/*UPDATE**/
To clarify requirments:
user clicks on menu item with both an A link as the parent and a submenu using
ul > li + a > ul > li
If this is the first click show submenu.
If second click direct through to the relvant a link.
If user has clicked once on menu item 1 showing the submenu but decided to click on another parent menu item with a submenu hide submenu 1 show submenu 2.
If user has clicked on menu item 1 and decides to click anywhere else on page that isn't a menu item with a submenu hide the open submenu....
var submenucheck = $('.nav-bar li ul');
var submenucheckli = $('.nav-bar li a');
showHide = false;
function checkforsubsopen() {
// body...
$.each(submenucheck, function(el) {
/* iterate through array or object */
if($(this).hasClass('subshow')){
showHide = true;
}
});
return showHide;
}
$('.nav-bar li:has(ul)').on('click', function(e) {
var CheckForClasssub = $('.nav-bar li ul').hasClass('subshow');
if(CheckForClasssub){
}
else{
var thisflyout = $(this).find('.flyout');
e.preventDefault();
$(thisflyout).show('slow').addClass('subshow');
}
});
$(document).on('click', function(){
checkforsubsopen();
if(showHide){
$('.subshow').hide('slow').removeClass('subshow');
}
console.log(showHide);
});
I have a couple nested & hidden sub-nav lists
<ul class="nav">
<li>Home</li>
<li><a class="profile" href="#">Profile</a>
<ul id="profile">
<li>Company</li>
<li>Structure</li>
<li>Team</li>
</ul>
</li>
<li><a class="projects" href="#">Projects</a>
<ul id="projects">
<li>Chapter</li>
<li>Pblc Trde</li>
<li>Globe</li>
<li>Komforte</li>
</ul>
</li>
I am currently using some jQuery i found online to show/hide the sub-nav upon click. What I am trying to accomplish is:
Hopefully clean up the show/hide click function of the sub-nab menus.
When clicking on the sub-nav menu items, the corresponding page that opens, needs to have the sub-nav expanded and give the corresponding menu item active class, so as to let the user know which page they are on.
I am hoping to do this purely in JS/jQuery. The installation of the site will be in WordPress.
$(document).ready(function () {
$(".profile").click(function () {
var X = $(this).attr('id');
if (X == 1) {
$("#profile").hide();
$(this).attr('id', '0');
} else {
$("#profile").show();
$(this).attr('id', '1');
}
});
//Mouse click on nav
$("#profile").mouseup(function () {});
//Document Click
$(document).mouseup(function () {
$("#profile").hide();
$(".profile").attr('id', '');
});
$(".projects").click(function () {
var X = $(this).attr('id');
if (X == 1) {
$("#projects").hide();
$(this).attr('id', '0');
} else {
$("#projects").show();
$(this).attr('id', '1');
}
});
//Mouse click on nav
$("#projects").mouseup(function () {});
//Document Click
$(document).mouseup(function () {
$("#projects").hide();
$(".projects").attr('id', '');
});
});
window.onload = function () {
$("ul#profile li:first").addClass("active");
};
$(document).ready(function () {
$("ul#profile").show()
});
$(document).ready(function()
{
// Get the name of the page. Split the URL at the '/':s and get the last part
// with pop():
var pageName = (location.pathname).split('/').pop();
// If we couldn't get a page name, default to index.html:
if( pageName == '' )
{
pageName = 'index.html';
}
// Hide ul:s that are children of the navigation:
$('.nav ul').hide();
// Event handler for clicks on navigation links:
$('.nav a').on('click', function()
{
// Change visibility for the first ul-child of the current li.
// $(this) refers to the clicked element.
$(this).parent('li').find('ul').first().toggle();
// Hide other sub-menus:
$(this).parents('li').siblings('li').children('ul').hide();
});
// Search through all link elements in the nav menu:
$('.nav').find('a').each(function(index, value)
{
// Append a '$' to the pagename to make the match()-function search
// from the end of the href value:
pageName += '$';
if( value.href.match(pageName))
{
// If the pagename matches the href-attribute, then add the 'active'
// class to the parent li, and show parent ul:s:
$(this).parent('li').addClass('active').parents('ul').show();
}
});
});
You could use a Cookie to hold the value of the currently open menu. This will allow for the value to be saved/retrieved between page loads and browser sessions.
As you've already got jQuery setup you can use the jQuery Cookie plugin to simplify things.
The code for it is quite simple (more examples on plugin page).
$.cookie('open_menu', 'projects'); //Save 'projects' under 'open_menu'
$.cookie('open_menu') //Returns 'projects'
Just check the value on page load and save it when one of the menu's is clicked.
If you'd prefer not to add any extra plugins here's some documentation on JavaScript's inbuilt cookie API.
Edit: I've created a JSFiddle with an example for you. The Cookie code doesn't seem to work in there sandbox, but the code should work for you, let me know if you have any troubles.
$(window).load(function() {
if ($.cookie('show_menu') !== undefined) {
$('#' + $.cookie('show_menu')).click();
}
$('.nav > li > ul').each(function () {
//Hide the sub lists
$(this).hide();
//Get link with same ID as Class
var id = $(this).attr('id');
//When link is clicked
$('.' + id).click(function () {
//Get the sub list
var list = $('#' + $(this).attr('class'));
//Check if it's currently visible
if (list.is(':visible')) {
list.hide(); //Hide list
$.cookie('show_menu', ''); //Unset open menu
} else {
$('.nav > li > ul').hide(); //Hide all other lists
list.show(); //Show list
$.cookie('show_menu', list.attr('class')); //Set open menu
}
});
});
});