The code below is my first crack at a jQuery script for animating a three-level ‘Suckerfish’ menu which has run in CSS only form for some time. It can be seen working at http://www.holidaymullandiona.com
This is the entire script:
$(document).ready(function(){
// alert ('Welcome to Holiday Mull');
$('#nav li ul').css({
display: 'none',
left: 'auto'
});
// Selector for first level <li>
$('ul.level1 li').hover(function() {
$(this)
.children('ul') // Should select ONLY next (second) level UL
.stop(true, true)
.delay(500)
.slideDown('slow');
}, function() {
$(this)
.children('ul') // Should select ONLY next (second) level UL, but appears to select third level as well
.stop(true, true)
.delay(500)
.fadeOut('fast'); // This action gets applied to all levels when <li> is un-hovered, but this is NOT what I want
});
// Selector for second level <li>
$('#nav li li').hover(function() {
$(this)
.children('ul') // Should select ONLY next (third) level UL
.css({'opacity': '0', zIndex: '-1'})
.animate({
left: '104px',
opacity: '1',
zIndex: '1'
}, 500);
}, function() { // This should be the 'un-hover' action, but the 'fadeOut' above happens first
$(this)
.children('ul')
// .delay(500)
.animate({
left: '200px',
opacity: '0.25',
// zIndex: '-1'
}, 500);
});
});
Hovering over the first level <li> gets the drop-down menu as required, then hovering on a second-level <li> gets the third level (where present). The third level <ul> appears from behind the second, in accordance with the animation:
$('#nav li li').hover(function() {
$(this)
.children('ul')
.css({'opacity': '0', zIndex: '-1'}) // sets a start condition ensuring the third level underlies second
.animate({
left: '104px',
opacity: '1',
zIndex: '1'
}, 500);
...
Up to this point it works as I intend. The problem is that when I move the mouse, either to another <li> or off the menu altogether the third level <ul> does the “fadeOut(‘fast’)” of the second level instead of the intended animation. For illustration purposes only, the intended animation shown would move the <ul> further out to the right and fade it. It is clear that this action does occur (but only after the “fadeOut(‘fast’)”), because when the <li> is next hovered, the <ul> does indeed appear from the right.
// Intended action on UN-hovering (moves <ul> to the right and fades it out)
...
}, function() {
$(this)
.children('ul')
// .delay(500)
.animate({
left: '200px',
opacity: '0.25',
// zIndex: '-1'
}, 500);
});
// For illustration only: ultimately this will be changed to move <ul> back to the left
This can be most easily seen on the linked web page by first hovering on ‘Places to Stay’ and then alternately hovering ‘B&B/Guest Hoses’ and ‘Self-catering’. http://www.holidaymullandiona.com
What I’d like is for the third level <ul> to follow the intended animation when it’s parent <li> is no longer hovered, and NOT fade out as it does now. I think this means making the first level selector more specific so that it doesn’t also select the second level. I thought I’d done that with the “.children(‘ul’)”, but it seems not. I have tried adding a class to the <ul>, as in “.children(‘ul.level2’)” or “.find(‘ul.level2’)” but so far without success. It doesn’t produce a syntax error, just no level 3 action, so presumably it’s now TOO specific !
Can anyone point me in the right direction, please ?