Jump to content
Stef's Coding Community
PicnicTutorials

I need to slow down my slide-in menu on hover with some JS?

Recommended Posts

I need to slow down my Slid-In menu on hover with some JS? Is this possible?

 

Here is what I got! I have a pure css slide-in menu, and I simply am looking for some JavaScript that will enable it to slide into view a little slower. You know, with CSS, it's either there or it's not. So I'd like to animate it a little more. Thanks for your help! :)

Share this post


Link to post
Share on other sites

Do you mean you have a drop down menu? You would just need some jquery. There are many plugins and options out there. Superfish is what I'm using...

Share this post


Link to post
Share on other sites

Hi guys! :) No, I mean it slides in from out of screen. Well, now with just CSS, it more or less just pops in. So basically, I'd like to find something that slows it down a bit. Then, if JS is off, it still works, just faster! It shouldn't take much. Finding it is the hard part.

 

Edit - like this http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm The function is there in that script. I just need some help making it work in mine and stripping out all the garbage.

Edited by Eric

Share this post


Link to post
Share on other sites

There is a setInterval value in the javascript code near the bottom that might be the secret setting for slowing it down.

Pretty sure there would not be a CSS method to slow the presentation of the drop-down. Hover effect is either on or off.

Set up that script and check the speed by adjusting the setInterval value.

Share this post


Link to post
Share on other sites
There is a setInterval value in the javascript code near the bottom that might be the secret setting for slowing it down.

Pretty sure there would not be a CSS method to slow the presentation of the drop-down. Hover effect is either on or off.

Set up that script and check the speed by adjusting the setInterval value.

 

Hi, yeah I saw that. Long story short - I'm sort of just a copy and paste JS guy - no more.

Share this post


Link to post
Share on other sites

Hi, you been around here for awhile, what's your name?

 

I finally found my speed controller, Paul helped me edit it some. Just one more thing to work out, and then it's AMAZING!

Share this post


Link to post
Share on other sites

I got it working - it's aaammmaziiinnngggg! I'll post them all in a couple weeks. The easiest, and cleanest Pure CSS...

 

Drop-Down Menu

Drop-Line Menu

Fly-out Menu

Slide-In Menu

Tabed Menu

Share this post


Link to post
Share on other sites
I want a sneak peek. ;)

 

OK, I'm easy! Here's one of of them. It will be moving to a new home later. Pure CSS Slide-In (JS enhanced). Turn JS off and see it still works perfect. Also note, that the menu is position fixed (ie6 too with no jumping). Currently I have to use display none/display block hover/show for the script to work. If just CSS you can use the left -999em/ left 0 method instead in order to make screen readers happy. I really didn't contribute to any of the JS stuff - that was all Paul O'B.

Edited by Eric

Share this post


Link to post
Share on other sites

Thanks Jim! Yeah, all the JS does is slide it out/in slow. As you saw, the basic funtionality of it is not dependent on JS. That makes this type of menu the first of it's kind. You can even have drop menus that slide out of the first slide. Although, there is still one problem remianing with that that I'm trying to figure out.

Edited by Eric

Share this post


Link to post
Share on other sites
I'll post them all in a couple weeks.

 

Alright, they're all there on my tools page under "CSS Nav Menus". I made them all relatively fast (didn't obsess for hours in my usual way), so if you see anything I missed, let me know.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...