European Experts Exchange (EEE.org) :: Free Experts PHP MySql Oracle Microsoft Web SQL Delphi


Web :: Browser issues :: Three-level variable-width right-to-left vertical CSS (or Javascript) menu
By: tutntut	Date: 27/01/2007 20:02:13	Points: 60	Status: Answered Quality : Excellent
It's a lot to ask, but I haven't found an example online yet. Found a fixed-width left-to-right menu that I was able to get to go right-to-left, but haven't yet been able to make it work with variable-width text: http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html (Suckerfish Dropdowns - Vertical) And this has a variable-width two-level horizontal menu: http://www.cssplay.co.uk/menus/variable_dl.html Need it to work in Firefox mainly. Basically, need it for a blog, with an on-hover expanding position:fixed menu on the right edge like this: Subtopic 1 <-- Days 16+ <-- Jan Subtopic 2 Subtopic 3 Subtopic 4 <-- Days 16- <-- Subtopic 5 <-- Feb etc., where "Days 16+" could be variable-width text, "Subtopic X" would be variable-width. Clicking on any of the menu items would go to the corresponding link on the same page. Know any online examples? Or any thoughts on implementation
By: COBOLdinosaur	Date: 29/01/2007 04:27:13		Type : Answer
The first example is a clen simple design that uses a fixed width hardcoded in teh css as 11em. That makes it accessibility friendly and trouble free. The second one is pretty messy but basically uses hard coding all over the place to genrate "variable width" rederign. The quotes are because they are not really variable width. They are a series CSS declarations with hardcode sizing and positioning. What you want to do would be an even bigger mess if you can get it to work. If you know in advance what the sizing has to be (normal for a menu) then you just hard code everything and whenever you have to do maintenance you spend several hours cursing while you rewrite most of the stylesheet. If the output is dynamic then you will have to script it and you will end up with a bloated nightmare, accessibility issues, huge cross browser issues and slow response to the mouse events. My best advice is to re-think the design; generate from the server where you have more appropriate tools, or send the menu across as an xml dataset and prse that into a menu structure. The XL would still need some maintenance but a lot less then you would run into trying to do this client side. Actually looking at the second messy example, it is possible that similar code could be generated server side, then it would just be a matter of matching up the right classes and ids with the content entries.

By: tutntut	Date: 29/01/2007 09:14:55		Type : Comment
Thanks Cd& XML & server-side programming I know very little about, and lack time yet to learn. I'm fairly proficient in Javascript but prefer to avoid that route. CSS I've done & learn as needed, but am far from expert in. The blog, which currently is in plane text & to be converted to HTML, will for now be posted at geocities, unless I can find some better site (despite it's severe limitations, one thing about a free geocities account is: reliability: I've used yahoo for a decade & it's almost guaranteed to be around in the future, so links posted in forums stay valid) I've found another online CSS demo, much better this time. Altered it to work both rtl & variable-width. Will finalize & post here later for your consideration.

By: VGR	Date: 30/01/2007 18:03:42		Type : Comment
yes, please do post your solution here. I'm sure a lot of people will be interested :D

By: tutntut	Date: 16/02/2007 13:45:28		Type : Comment
Using: http://www.seoconsultants.com/css/menus/vertical/ Vertical CSS Menu with Popout and Dropdown Menus ->"Grab/View the CSS in a text file" ---> http://www.seoconsultants.com/css/menus/vertical/css/menuv.txt ->"Grab/Read the Basic Tutorial", then "Grab the HTML" --->http://www.tanfa.co.uk/css/examples/menu/ Note: For IE, need this file also: http://www.xs4all.nl/~peterned/htc/csshover.htc (from http://www.xs4all.nl/~peterned/csshover.html) /* Partial solution: works in FF but not IE / #menu{ left:30em; / to shift menu for testing / } menu ul{ /width:100%; removing this makes it variable width, rather than just the width of the top level*/ } ---------- Slightly different CSS here. Need to make it work here also. http://www.tanfa.co.uk/css/examples/menu/ --> Click "tanfa Demo example" & save the source --> Also need this: http://www.tanfa.co.uk/css/examples/menu/tanfa.css --> & the csshover.htc file from above --- Does this site have place to upload files? If not, demos here: http://www.sendspace.com/file/pi04vo seo_rtl_v.htm -> first example, modified to rtl & variable width tanfa_ltr.htm -> second example

By: tutntut	Date: 16/02/2007 14:03:40		Type : Comment
Oops. In first example, forgot to mention: #menu ul{ /width:100%; cut this: makes it variable width / direction: rtl; /* right-to-left / } div#menu li ul{ right:100.1%; / instead of left:100.1% */ } To see the diffs, Kdiff3 is an awesome program to compare up to 3 files! :)

By: OpConsole	Date: 04/07/2007 16:48:03		Type : Comment
Dear, If you found some of the above comments to have proved helpful in solving your issue, you shall Accept the Answer or sPlit points between the various useful comments. Each one can receive a quality evaluation from + (somewhat helpful) to +++ (working solution). Given this Question has been Open for quite a while now, please accordingly "accept an Answer" ASAP This Question will be forced-closed in one month from now. Thanks and regards. Admin.

By: tutntut	Date: 14/07/2007 17:10:42		Type : Comment
Decided to do it server side instead...learning PHP for that :O Original problem remains unresolved though, but closing question.

Do register to be able to answer

©2010 These pages are served without commercial sponsorship. (No popup ads, etc...). Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE.
Please DO link to this page! Post to Plurk Post to Yahoo Buzz Post to Delicious Post to Digg Post to MySpace Post to Ping.fm Post to Reddit Post to StumbleUpon

Contact

page generated in 346.877810 milliseconds

Why Google AdSense ads ?

New Improved Search!