Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2008
    Location
    NH, USA
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Graphical table-based multi-level cross-browser fly-out menu

    1) Project Details: I need a 7 item graphical menu with fly-outs to sub-menus. One of the sub-menus has another sub-menu under it. All graphics and table structure will be provided. This can be written in JavaScript or CSS, but the finished project must be heavily commented so that I can modify it in the future if necessary. NO obfuscated code!

    The menu is in a table that is set up like this:

    Code:
    +------------------------+------+
    |XXXXX|XXXXXXXXXXXXXXXXXX|XXXXXX|
    |XXXXX|------------------|XXXXXX|
    |XXXXX|   Menu Item 1    |XXXXXX|
    |XXXXX|------------------|XXXXXX|
    |XXXXX|   Menu Item 2    |XXXXXX|
    |XXXXX|-----------+------+---------------+
    |XXXXX|   Menu Ite|  Fly Out from MI 2   |
    |XXXXX|-----------+----------------------+
    |XXXXX|   Menu Ite|  Fly Out from MI 2   |
    |XXXXX|-----------+----------------------+
    |XXXXX|   Menu Ite|  Fly Out from MI 2   |
    |XXXXX|-----------+------+-----------------------+
    |XXXXX|   Menu Item 6    |  Fly out from above   |
    |XXXXX|------------------+-----------------------+
    |XXXXX|   Menu Item 7    |  Fly out from above   |
    |XXXXX|------------------+-----------------------+
    |XXXXX|XXXXXXXXXXXXXXxxxx|XXXXXX|
    +-------------------------------+
    The Xs represent cells which will be occupied by graphics. Each of the menu items and sub-menu items is also a graphic. There are also graphics *between* each main menu item. All of the cells must be "glued" perfectly together with no gaps.

    2) Payment Amount: I can afford $35 for this project.

    3) Payment method/ details: I will pay by PayPal and need this project completed ASAP. Yesterday would be nice, but tomorrow is acceptable.

    4) Additional Info: To nab this job show me an example of something like this that you have already done.

  • #2
    Regular Coder
    Join Date
    Nov 2007
    Location
    127.0.0.1
    Posts
    348
    Thanks
    26
    Thanked 40 Times in 39 Posts
    Nice ascii art
    Blog Charity:Water
    WhatisWrongWith.me/tagnu - Send me anonymous feedback.

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I have been tinkering off an on with a menu I made here:
    http://rowsdower.webs.com/projects/menus/menu1.html

    and it's transparent sister version here:
    http://rowsdower.webs.com/projects/menus/menu2.html

    Is something like this what you are looking for? It's valid XHTML and CSS - no javascript. Shows up fine in IE7 and FF2 at least, probably more. If you want to take the design above and run with it on your own feel free. I will warn you that it needs a lot of work with the "em" sizing unless you want to make it a non-liquid design (i.e. if you want to use sizes in px rather than in em - though you will still have to make this adjustment before you use the menu). In it's current version this menu looks good at default sizes on my machine but it breaks when I change the text size in my browsers.

    Anyway, if you're looking for something else, do you have a link to the menu block you are working with now so we can see what code block we have to work with if you still want to hire this work out?
    Attached Thumbnails Attached Thumbnails Graphical table-based multi-level cross-browser fly-out menu-regular.jpg   Graphical table-based multi-level cross-browser fly-out menu-transparent.jpg   Graphical table-based multi-level cross-browser fly-out menu-regular-ff.jpg   Graphical table-based multi-level cross-browser fly-out menu-transparent-ff.jpg  
    Last edited by Rowsdower!; 03-05-2009 at 02:35 PM. Reason: adding screenshots...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    New Coder
    Join Date
    Feb 2008
    Location
    NH, USA
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tagnu View Post
    Nice ascii art
    *laugh* Thanks, too bad I can't substitute that for this menu!

  • #5
    New Coder
    Join Date
    Feb 2008
    Location
    NH, USA
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I would LOVE to use just CSS, that is my preference. Unfortunately the client wants graphics and I don't know how to accomplish what I'm trying to do with CSS alone.

    The table set-up can be viewed here:

    http://tinyurl.com/cz94pu -- it's the menu to the left. It doesn't have any functionality at all right now because I'm in the process of recoding the page from what the original coder created.

    Right now the site uses CSS for the menu, but it is malfunctioning in Firefox (when you mouseout you have to mouse *all* the way out or you can't click on the other menu items. The client has decided to add a graphical background to the flyouts, which can be seen here (the flyouts, not the background)

    http://tinyurl.com/ae6ah9 (The url itself is tiny, I just don't want it to come up in searches based on this post.)

    Since I posted the above, they decided not to do the second level flyout, so I just need something with a single level of flyouts.

    The background for the flyouts is supposed to look like the attached image--I'm figuring that it can't be done in CSS, but if it can, all the better!




    Quote Originally Posted by Rowsdower! View Post
    I have been tinkering off an on with a menu I made here:
    http://rowsdower.webs.com/projects/menus/menu1.html

    and it's transparent sister version here:
    http://rowsdower.webs.com/projects/menus/menu2.html

    Is something like this what you are looking for? It's valid XHTML and CSS - no javascript. Shows up fine in IE7 and FF2 at least, probably more. If you want to take the design above and run with it on your own feel free. I will warn you that it needs a lot of work with the "em" sizing unless you want to make it a non-liquid design (i.e. if you want to use sizes in px rather than in em - though you will still have to make this adjustment before you use the menu). In it's current version this menu looks good at default sizes on my machine but it breaks when I change the text size in my browsers.

    Anyway, if you're looking for something else, do you have a link to the menu block you are working with now so we can see what code block we have to work with if you still want to hire this work out?

  • #6
    New Coder
    Join Date
    Feb 2008
    Location
    NH, USA
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I've got this thing working.... Anyone want to take a look (only "Events" is set up right now) and see if your particular browser _doesn't_ work, assuming you have JavaScript and CSS enabled?

    Or, if you don't have them enabled, does it not degrade gracefully?

    The method I used seems WAY too easy, I'm convinced I'm crazy and it isn't really working.

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Cymy View Post
    I think I've got this thing working.... Anyone want to take a look (only "Events" is set up right now) and see if your particular browser _doesn't_ work, assuming you have JavaScript and CSS enabled?

    Or, if you don't have them enabled, does it not degrade gracefully?

    The method I used seems WAY too easy, I'm convinced I'm crazy and it isn't really working.
    I'm viewing it in IE7 and FF2 (java and CSS enabled) and I see a menu structure like the screenshot below. It looks the same in both browsers. Are there supposed to be any graphics in the submenu areas?

    At any rate, I'm confused about what part you feel you could not do with CSS only. I don't see any effects on the page that would require javascript (not to harp on the issue ).

    Edit: Scratch much of the above and the screenshot below. As it turns out I didn't even come close to actually READING the post... Anyway, still ditto for the graphics not needing javascript to make it work in CSS-only fashion.
    Attached Thumbnails Attached Thumbnails Graphical table-based multi-level cross-browser fly-out menu-ie7.jpg  
    Last edited by Rowsdower!; 03-06-2009 at 03:49 PM. Reason: I'm illiterate!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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