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:
+------------------------+------+
|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.
Rowsdower!
03-05-2009, 02:31 PM
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. :thumbsup: 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?
Nice ascii art :)
*laugh* Thanks, too bad I can't substitute that for this menu! :)
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!
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. :thumbsup: 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?
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.
Rowsdower!
03-06-2009, 03:42 PM
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 :D).
Scratch much of the above and the screenshot below. As it turns out I didn't even come close to actually READING the post... :rolleyes: Anyway, still ditto for the graphics not needing javascript to make it work in CSS-only fashion.
