Rollover Drop Down Menu

Discussion in 'Web Design and Development' started by sbryan, Jan 21, 2009.

  1. sbryan macrumors member

    Joined:
    Jun 6, 2007
    #1
    What's the most efficient way to code Navigation buttons that drop down to display different items (i.e. About Us --> Completed Projects, Team, Mission Statement, etc.)

    I tried to do it using a swap image, a transparent GIF and a series of images... but I believe that's too complicated to maintain.
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    Most efficient way?

    To me efficiency means overall the easiest way to do it so you spend the least amount of time writing code and customizing plus the menu is scalable and cross-browser compatible so you have less worries about code and more focus on menu content and design.

    I'd look into Javascript frameworks that take all these issues into account, not just one or two of said issues. These include JQuery Menu Plugins or the MooTools version.

    You can do the same with basic CSS, Javascript and HTML - but the frameworks I listed are pre-written, DOM specific (standards compliant), well supported and easy to customize. To me, that's efficiency in action.

    -jim
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    CSS Play has a good number of options for CSS-based menus.
     
  4. sbryan thread starter macrumors member

    Joined:
    Jun 6, 2007
    #4
    This is related to the appearance of <li> items in an un-ordered list.

    I have three buttons, each an <li> item, displayed inline, without bullet styling. For whatever reason, this <ul> is indented about 47px.

    There is no styling.

    An image not in a un-ordered list displays without being indented.

    I tried starting over twice. I checked the page properties to make sure there wasn't a setting messing things up. There wasn't.

    Any idea as to what is causing this?
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Could you post the code (HTML and CSS)? There's a couple things that could be up.
     
  6. Melrose macrumors 604

    Melrose

    Joined:
    Dec 12, 2007
    Location:
    In a sidewalk.
    #6
    Jim I have to say that link there is very cool - I'm just getting into MT and am amazed at what it can accomplish.

    Thx for posting..
    </offtopic>
     
  7. sbryan thread starter macrumors member

    Joined:
    Jun 6, 2007
    #7
    I discovered what was hosing it up, but I'm not sure why I need to make the changes I made.

    I hadn't specified margin or padding for the <ul>. When I specify 0 for padding-left, padding-top, margin-left, and margin-top it works.
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    That was one idea I had. There's a number of default styles browsers add to elements. That's why those CSS Reset style sheets are popular. That way all the styles have to be deliberately set and looks more uniform across browsers.
     
  9. jonnysods macrumors 601

    jonnysods

    Joined:
    Sep 20, 2006
    Location:
    There & Back Again
    #9
    I know I'm in the wrong spot - but I wish they had this option in iWeb!

    Obviously, without a lot of repetitive trickery.

    I'm leaving this post! I know you hardcore coders hate us WYSIWYG losers!
     
  10. sbryan thread starter macrumors member

    Joined:
    Jun 6, 2007
    #10
    I hammered out the left/right padding and margins in the horizontal list, but within the line items of that list, I have other <ul>'s that are oriented vertically.

    They have unneeded padding, too. I tried doing the same sort of fix but it didn't work. I found a Reset Style Sheet in the Yahoo Dev community and that didn't work, either. Any thoughts on this? It appears with extra padding in Safari, FF, Opera, and IE.
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    My own reset is based on Eric Meyers'. I'm not sure about new ideas unless you can show some code that can produce the issue. Otherwise it's just guessing.
     
  12. Greenhoe macrumors regular

    Joined:
    Dec 17, 2008
    #12
    CSS Play

    If your looking to create some drop down menus, you can do so with just CSS so you don't need any java script or any other coding.

    One of my favorite sites is http://www.cssplay.co.uk/ this site is amazing teaching you how to do some crazy stuff with css and is a great learning tool.
     
  13. sbryan thread starter macrumors member

    Joined:
    Jun 6, 2007
    #13
    Sweet. That reset helped me determine the problem. It was the line-height!

    Once I introduce LightBox v2.0 or ThickBox v3.1 in addition to the Moo Tools menu plug-in, my previously working menu is broken.

    Both plug-ins are popular image gallery plug-ins.

    I thought it best to add to this thread instead of creating a new one.

    Thanks,
    SB
     
  14. sbryan thread starter macrumors member

    Joined:
    Jun 6, 2007
    #14
    Please see this site for a better idea of the problem. Possibly related to the Z-index properties that Lightbox, Thickbox, Slimbox, etc. introduce.
     
  15. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #15
    When I look at the page, the JavaScript files

    /test/js/mootools-for-dropdown.js
    /test/js/UvumiDropdown.js

    are not found and thus causes errors. It's return 403 Forbidden errors for them. Does this happen for you as well?
     
  16. sbryan thread starter macrumors member

    Joined:
    Jun 6, 2007
    #16
    Java Index

    The files are there. They were working previously in a live environment. When I throw another plug-in into the mix, that's when things go haywire.

    Also, the only link that works is the main page. Other content has not been added. I forgot to mention that.

     
  17. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #17
    Yes, they're there, but I'm getting "forbidden" messages, not "not found" messages.

    You might want to check the file permissions.
     
  18. sbryan thread starter macrumors member

    Joined:
    Jun 6, 2007
    #18
    Excellent.

    Figured it out this morning.

    I used a Lightbox alternative called Slimbox from the same community that produced the drop-down menu using Mootools.

    In addition, permissions on my script folder were hosing things up.
     

Share This Page