Results 1 to 5 of 5

Thread: Smooth Bottom Navigation Menu

  1. #1
    Join Date
    Aug 2009
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question Smooth Bottom Navigation Menu

    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?
    Last edited by Abbster22; 12-11-2010 at 04:43 AM. Reason: The problem has been resolved. Thank you to the effort of ddadmin.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    I'm not familiar with Spry Menu. On DD though, there is DD Smooth Menu, which if you use the modified .js file I attached inside this thread, should cause it to drop up instead.
    DD Admin

  3. #3
    Join Date
    Aug 2009
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    I'm sorry for the late reply, but I will definitely give this a try and let you know how it goes.

  4. #4
    Join Date
    Aug 2009
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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/s...ad.php?t=38517

    which helped me accomplish what I want! 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?

  5. #5
    Join Date
    Aug 2009
    Posts
    39
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    I actually figured out how to get it working properly. I had to add the following to the jqueryslidemenu.css:

    Code:
    #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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •