PDA

View Full Version : Resolved Smooth Bottom Navigation Menu



Abbster22
12-06-2010, 02:32 AM
I have used a similar system before for my other website navigation, but I haven't tried using this on the bottom. I know that there is a way to do this in Dreamweaver using the Spry Horizontal Menu, but it doesn't allow the smooth animation when showing all the links.

Right now, I have it so it only works in Firefox and Safari, but doesn't work on IE 6+. This is what I have up so far:
http://abrielshipley.com/testslide.html

The picture I have provided is what I would like the bottom navigation to look like, where the links smoothy slide from the bottom.

Is there an easier way for me to do this or somehow fix up the CSS so it's compatible with all browsers?

ddadmin
12-06-2010, 04:51 AM
I'm not familiar with Spry Menu. On DD though, there is DD Smooth Menu (http://dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm), which if you use the modified .js file I attached inside this thread (http://www.dynamicdrive.com/forums/showthread.php?t=39092), should cause it to drop up instead.

Abbster22
12-07-2010, 07:49 PM
I'm sorry for the late reply, but I will definitely give this a try and let you know how it goes. :)

Abbster22
12-11-2010, 02:25 AM
I apologize for the delay.. I've been busy finishing a few things up. But I actually found this post:
http://www.dynamicdrive.com/forums/showthread.php?t=38517

which helped me accomplish what I want! :D I will experiment with your other JavaScript file to see if I can accomplish the same thing. But whenever I go into the browser, for some reason, it adds 1px or so to the bottom, enabling the browser's scroll bar. I want to know how I would be able to get rid of the extra space on the bottom, disabling the scroll bar?

Abbster22
12-11-2010, 04:43 AM
I actually figured out how to get it working properly. I had to add the following to the jqueryslidemenu.css:



#myslidemenu {
position: absolute;
bottom: 0;
left: 0;
}


Then, I configured the colors, borders, etc. in the CSS file to how I wanted it for the website.