Looking to implement the following.
I have a navigation menu, where when I hover over the "Services" link a submenu is shown. The submenu stays shown if the cursor moves off "Services" in the main menu and hovers over the submenu and also if the cursor moves around the page. The submenu will disappear when one of the other main menu items is hovered over.
Example of the menu on this website (apologies for the link and I know the page may change soon, but showing as easiest way to describe what's required) https://kota.co.uk/
I am using WordPress
Example of the menu structure
HTML
<div class="slide-in-menu-container">
<div class="menu__main">
<a class="menu__block" href="/home">Home</a>
<a class="menu__services" href="/services">Services</a>
<a class="menu__block" href="/work">Work</a>
<a class="menu__block" href="/about">About</a>
<a class="menu__block" href="/contact">Contact</a>
</div>
<div class="menu__services--hover">
link
link
link
link
</div>
</div>
I have not shown any jQuery, as I have tried a few different solutions and didn't know which was best to show if any, but none of them keep the submenu shown until I hover over another menu item.
Initially hide() your services div and we can achieve this by using jQuery mouseover() and mouseleave()
Run snippet below to see in action.
$(".menu__services").mouseover(function() {
$('.menu__services--hover').removeClass('d-none')
$(".menu__block").mouseover(function() {
$('.menu__services--hover').addClass('d-none')
});
});
.d-none {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-in-menu-container">
<div class="menu__main">
<a class="menu__block" href="/home">Home</a>
<a class="menu__services" href="/services">Services</a>
<a class="menu__block" href="/work">Work</a>
<a class="menu__block" href="/about">About</a>
<a class="menu__block" href="/contact">Contact</a>
</div>
<div class="menu__services--hover d-none">
link
link
link
link
</div>
</div>
Simple just hide all menus when a mouse hovers on the other menu then show the menu you want to show and dont add function on mouseleve
Good answer by #AlwaysHelping, There is a problem when mouse leave from main menu option, the sub menus panel not hiding, so i just corrected and putted a hack for that issue.
it will check main and submenus has already mousehover then it will not add class class for d-none.
$(document).ready(function(){
$(".menu__services").mouseenter(function() {
$('.menu__services--hover').removeClass('d-none')
});
$(".menu__services, .menu__services--hover").mouseleave(function() {
setTimeout(function(){
if(!$('.menu__services:hover').length && !$(".menu__services--hover:hover").length){
$(".menu__services--hover").addClass('d-none')
}
}, 100);
});
});
.d-none {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide-in-menu-container">
<div class="menu__main">
<a class="menu__block" href="/home">Home</a>
<a class="menu__services" href="/services">Services</a>
<a class="menu__block" href="/work">Work</a>
<a class="menu__block" href="/about">About</a>
<a class="menu__block" href="/contact">Contact</a>
</div>
<div class="menu__services--hover d-none">
link
link
link
link
</div>
</div>
Hope this help.
Related
i've stumbled into a problem where I am not unable to close my mobile navigation menu.
I am using jQuery Full Page for my front-end. My mobile menu opens when clicked on:
<nav class="menu col-xs-4 pull-right">
<a href="#">
<span>Menu</span>
<button>
<span>toggle menu</span>
</button>
</a>
</nav>
With jQuery code of:
$('nav, .mobile-menu--close').click(function(e){
$('body').toggleClass('menu-open');
});
But it does nothing on closing with .mobile-menu--close
<a href="#" class="mobile-menu--close">
<span>Close</span>
<span class="mobile-menu--close-x"></span>
</a>
It is inside an aside element which is outside of main
...
<div class="background-image landing-mantas col-xs-8 pull-right">
</div>
</div>
</div>
</main>
<aside class="mobile-menu">
<ul>
<li>
Homepage
</li>
<li>...
With mobile-open class it translates X 100% and brings aside.mobile-menu from X100% to 0%. So basically it swaps these with positions.
I've read answers with disabling touch-actions: none and so on. Nothing does seem to help.
Full preview of web could be found here
Keep in mind that this is wop so please view it in responsive view to get the point. But it should do the trick.
Remove this style and try
.mobile-menu {
z-index: -1;
}
As I can see from the link you provided. When menu-open is applied then your navigation is not clickable, so you need to set z-index of menu-open to higher that the z-index of your content (I am assuming the the page is inside the content class) -
.menu-open{
z-index: 1111;
}
.content{
z-index: 1000;
}
I have a main menu. This main menu opens hidden divs that also contain inner menus that show and hide content.
You can see this in action here: http://shirleycollinsmovie.com/collins-html5/index.html#about
The user can select from the main menu and open up one of the hidden divs, and then explore the contents of the inner menu.
However when the user closes the hidden div and then opens a new one, then returns to the previous one again, instead of it displaying the contents from the beginning again it shows them exactly where they were when they left the hidden div previously. I want it to display the contents from the beginning again.
This is the code I have which shows the hidden divs from the main menu (I am using the same code for the inner menus as well):
$('#menu nav a').click(function() {
$('.draggable').hide();
$(this.getAttribute('href')).show()
});
<div id="menu">
<h1>main header</h1>
<nav>
<a id="about-link" href="#about">About</a>
<a id="news-link" href="#news">News</a>
<a id="foundation-link" href="#foundation">Foundation</a>
<a id="contact-link" href="#contact-info">Contact</a>
</nav></div>
<div id="foundation" class="hidden draggable-scroll">
<div id="foundation-nav" class="box-text">
<nav>
The Story so Far
What will the Foundation do?
The Manifesto
Who is the Foundation?
</nav>
</div>
<div id="foundation-opening" class="box-text foundation-info">
<h2>header </h2>
<p>
</p></div>
<div id="the-story" class="box-text foundation-info hidden">
<h2>The Story so far: </h2>
<p>
And she’s not done yet,</p>
</div>
<div id="what" class="box-text foundation-info hidden">
<p>
The Ballad of </p>
</div>
<div id="manifesto" class="box-text foundation-info hidden">
<h2>The proposed Manifesto: </h2>
<p>
The reason for the foundation to exist: </p>
</div>
<div id="who" class="box-text foundation-info hidden">
<h2>Who is the Foundation?</h2>
<p> </p>
</div>
<div class="close-box">
x</div>
</div>
Perhaps there is a way to target the starting content from the href of the main menu?
Or is there a way within the jQuery to re-hide the hidden content when the users selects from the main menu again?
A simple workaround,
The following code finds first/beginning Menu Item - a:first selector and trigger click on it.
$('#menu nav a').click(function() {
$('.draggable').hide();
$(this.getAttribute('href')).show().find('nav a:first').click();
});
This would always open first <a> of <nav>.
It works with your site link. Tried out in console.
I'll start with my JSFiddle example:
http://jsfiddle.net/CR5FB/5/
Basically I'm trying to get the same effect as shown on this post (JSFiddle here), however I'm having some trouble implementing it - being as I want to check for multiple div's toggle status rather than simply switching in between two divs. I have tried using the following:
$("#showcreate").click(function() {
if ($(".searchmenu").is(":visible")) {
$(".createmenu").toggle("fast");
$(".searchmenu").toggle("fast");
} else {
$(".createmenu").toggle("fast");
});
(So if the search menu is open, close it and open the create menu but if it's not open, just open the create menu).
I'm not sure if the :visible function applies if I've used $("div").hide() rather than display:none in the css?
Any help on this will be massively appreciated - even a suggestion for another suitable method such as possible jquery accordion etc.?
Thanks alot
Try this please:
HTML:
<div class="actionsmenu" id="actionsmenu">
<div id="navmenu">
<ul id="navmenu">
<li><a href='#' class="tog" data-id="createmenu" id='showcreate'>Create</a></li>
<li><a href='#' class="tog" data-id="searchmenu" id='showsearch'>Search</a></li>
<li><a href='#' class="tog" data-id="settingsmenu" id='showsettings'>Settings</a></li>
<li><a href='#' class="tog" data-id="helpmenu" id='showhelp'>Help</a></li>
<ul>
</div>
</div>
<div class="menu createmenu" id="createmenu">Menu 1</div>
<div class="menu searchmenu" id="searchmenu">Menu 2</div>
<div class="menu settingsmenu" id="settingsmenu">Menu 3</div>
<div class="menu helpmenu" id="helpmenu">
JS:
$(document).ready(function () {
$(".menu").hide();
$(".tog").click(function () {
$(".menu").hide();
$("." + $(this).data('id')).toggle("fast");
});
});
FIDDLE:
http://jsfiddle.net/CR5FB/14/
EDIT:
You have to use some common class for your links and divs if you want to assign them to the same event.
There is you can find better solution as for me: http://jsfiddle.net/CR5FB/19/
Here is a JS fiddle: http://jsfiddle.net/7nGYE/
What you need to do is keep track of the active menu with a CSS class, so when another menu is clicked, you toggle the active menu, remove it as active, then set the new menu as the active div.
In particular, on any menu item click:
$('ul#navmenu a').click(function() {
$('div.active').removeClass('active').toggle('fast');
});
Hide the active menu. Then, on a particular menu item click:
$("#showcreate").click(function () {
$(".createmenu").toggle("fast").addClass('active');
});
add the 'active' CSS class to keep track of it.
I am using blueimp gallery http://blueimp.github.io/Gallery/ as a lightbox in my website. Is there an easy way to keep the indicator on by default? Right now, after you open a gallery in a lightbox you need to click on an image for it to show navigation buttons and indicator options.
Add blueimp-gallery-controls class to gallery container:
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
Edit the blueimp-gallery.css. Set the elements you want shown to display:block instead of display:none.
New to jQuery/javascript here and looking for a little help. I am writing a site with a simple navigation menu. It works like this. A user clicks a link in the menu, the link is set to an 'active' colour and the appropriate section is set from hidden to visible ( all of the sections are set to hidden when the document loads ). When the user clicks another link that link is set to the active color, the others are set to the default colour, any visible sections are set to hidden and the relevant section is set to visible. This works just fine, but I used individual element and its very ugly with a lot of repetition. I am in the process of rewriting the code to use .classes and be a little bit more flexible with less repeated code.
The Question I have is this: How do I tell it what section to show?
User clicks on a.linkfornavigation, colour is set, section.blah are set to hidden, section#thisiswhatyouwant is set to visible. But how do I tell a.linkfornavigation where it should point? each section has a unique #id ( I guess so could the link they click ) but how do I get the #id of the relevant linked section from the clicked link?
Any help at all would be very much appreciated.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/linkthinger-hybrid.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/linkthinger-hybrid.js" type="text/javascript"></script>
</head>
<body>
<section id="links">
<a class="thinger" href="#">Thing One</a>
<a class="thinger" href="#">Thing Two</a>
<a class="thinger" href="#">Thing Three</a>
<a class="thinger" href="#">Thing Four</a>
<a class="thinger" href="#">Thing Five</a>
</section>
<section id="things">
<section id="thingone" class="thing">I am thing one.</section>
<section id="thingtwo" class="thing">I am thing two.</section>
<section id="thingthree" class="thing">I am thing three.</section>
<section id="thingfour" class="thing">I am thing four.</section>
<section id="thingfive" class="thing">I am thing five.</section>
</section>
</body>
javascript:
$(document).ready(function(){
// Hides .thing class as soon as the DOM is ready.
// $('section.thing').hide(0);
// Highlight selected link & set all others to default.
$('#links a').click(function(){
$(this).addClass('selected');
$(this).siblings().removeClass('selected');
});
// Shows one section and hides all others on clicking the noted link.
$('a.thinger').click(function() {
$('section.thing').hide(0);
$('#thingone').fadeIn('slow');
return false;
});
})
CSS:
a {
color: darkgreen;
}
.selected {
color: red;
}
section.thing {
background-color: blue;
}
Give the links proper href values. In this case it would be the IDs of the elements:
<a class="thinger" href="#thingone">Thing One</a>
<a class="thinger" href="#thingtwo">Thing Two</a>
....
The advantage is that clicking on the links will make the browser jump to the corresponding element, even if JavaScript is disabled.
Then you access this attribute and use it as ID selector for jQuery:
$('a.thinger').click(function() {
$('section.thing').hide(0);
$($(this).attr('href')).fadeIn('slow');
return false;
});
To get the id of a clicked element do: this.id
To tell it what section to open you can add some data- attribute to determine it:
<section id="links">
<a class="thinger" href="#" data-open="thingone">Thing One</a>
<a class="thinger" href="#" data-open="thingtwo">Thing Two</a>
<a class="thinger" href="#" data-open="thingthree">Thing Three</a>
<a class="thinger" href="#" data-open="thingfour">Thing Four</a>
<a class="thinger" href="#" data-open="thingfive">Thing Five</a>
</section>
JS:
$('#links a').click(function(){
$(this).addClass('selected');
$(this).siblings().removeClass('selected');
$('.thing').hide();
$("#"+$(this).data('open')).show();
});
Fiddle Demo: http://jsfiddle.net/maniator/sxrap/
Change this line:
$('#thingone').fadeIn('slow');
To this:
$('#things .thing').eq($(this).index('a.thinger')).fadeIn('slow');
It works because $(this).index('a.thinger') returns an integer index of the anchor clicked, and .eq(i) returns a jQuery object containing the ith element from the JQuery object it's called on.
jQuery Docs:
.index()
.eq()
alert($(this).attr('id'); if you are staying true to jQuery