- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Animate WordPress Jquery Subnav Dropdown
Hi,
Ive wrote a sub nav for my bespoke WordPress theme but I want to animate the dropdown of the nav (and slideup). It currently works via display:hidden; – The Jquery changed the ul to a display: block when hover or click.
Heres an example of what I have done so far:
jQuery(function($) {
$("#menu-main-menu").find('li').hover(function(){$(this).click();}).click(
function(){
var visibleMenu = $("ul.sub-menu:visible");
if (visibleMenu) {
$(visibleMenu).hide(); }
$('ul.sub-menu', this).show();
$("#menu-main-menu").mouseleave(function(){
$("ul.sub-menu").hide();
});
}
);
})
Id really like it to be a slick and smooth dropdown – does anyone know where I can add the slideup / slidedown to this?
I have it in codepen too if this helps: http://codepen.io/anon/pen/jPbJMJ
Thank you
Jquery has Slide functions built in
Im aware of that, i just don’t have a clue WHERE the slidein functions go.
Ive tried about 30 different ways & not a single one has worked including css transitions.
Where would the SlideUp go?
Whoa…there’s a shipload of extraneous CSS and HTML in that Codepen.
Any chance of just simplifying it down to just the relevant stuff?
Just substituting slide
s for hide
and show
gets you part of the way but I thiny you may have to re-think the way the interaction goes.
Perhaps adding delay
s or timeOut
s.
sorry for the extraneous CSS and HTML Paulie_D. I literally copied the lot in there. Yeh i tried adding replacing the slideup / slidedown for the hide and show but its not working on the live site. Not sure why. I can see the issues from what you done on CodePen too.
The fact that when you mouse off its trying to slide up.