PicnicTutorials Posted March 12, 2009 Report Posted March 12, 2009 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! Quote
Susie Posted March 12, 2009 Report Posted March 12, 2009 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... Quote
falkencreative Posted March 12, 2009 Report Posted March 12, 2009 Yeah, I second Susie -- superfish is my favorite. Shouldn't be that difficult to set up, and you can control fade in speed with jQuery. Quote
PicnicTutorials Posted March 12, 2009 Author Report Posted March 12, 2009 (edited) 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 March 12, 2009 by Eric Quote
jlhaslip Posted March 12, 2009 Report Posted March 12, 2009 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. Quote
PicnicTutorials Posted March 12, 2009 Author Report Posted March 12, 2009 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. Quote
PicnicTutorials Posted March 13, 2009 Author Report Posted March 13, 2009 Ok here it is (2nd example) http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/ now I just need to figure out how to add it to mine. Quote
jlhaslip Posted March 13, 2009 Report Posted March 13, 2009 CSS version? No speed controller, but nice all the same. http://www.cssplay.co.uk/menu/gallery3l Quote
PicnicTutorials Posted March 13, 2009 Author Report Posted March 13, 2009 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! Quote
PicnicTutorials Posted March 14, 2009 Author Report Posted March 14, 2009 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 Quote
PicnicTutorials Posted March 14, 2009 Author Report Posted March 14, 2009 (edited) 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 March 14, 2009 by Eric Quote
jlhaslip Posted March 14, 2009 Report Posted March 14, 2009 Works excellent with or without js using FF3/Linux, too. Nice work. Name's Jim. Quote
PicnicTutorials Posted March 14, 2009 Author Report Posted March 14, 2009 (edited) 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 March 14, 2009 by Eric Quote
PicnicTutorials Posted March 17, 2009 Author Report Posted March 17, 2009 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. Quote
Recommended Posts
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.