brothercake 01-21-2004, 08:49 AM I've just released the beta version of my new website menu, after nearly a year's development! As far as I know, it's the world's first fully-featured and accessible DHTML menu. :cool:
I could say loads .. but I'd just be echoing what I've written on the site: http://www.udm4.com/
Any comments, bug reports, suggestions or other feedback is most welcome. :)
Roelf 01-21-2004, 09:08 AM very nice, i think i will use it sometime. It is a bit slow though, especially the little arrows take noticable time to appear
speedracer 01-21-2004, 09:23 AM very nice! works great viewing w/larger text size/zoom.
just downloaded and horizontal and relative positioning works great.
nice job.
downloded additional arrow gifs from demo site:)
should add comments for down gifs in custom.js and include in resources folder...
brothercake 01-21-2004, 09:58 AM Originally posted by Roelf
It is a bit slow though, especially the little arrows take noticable time to appear
It doesn't have to be like that - I chose to defer execution until the rest of the page has rendered, but if you want to you can have it so the menu script gets processed first, which means the arrows will be there with the rest of the document - http://af.brothercake.com/dropdown/manual/setup/scripts/#setup-scripts-body-defer - the defer attribute isn't 100% reliable x-browser, but you can also just move the script include around in the <body>, and that changes the parsing order.
Thanks :)
speedracer 01-21-2004, 10:19 AM can you check the sub menu with ie6? its nestled in a center align div. it works fine in ns7.1
http://66.33.60.221/~a206/udm4/template.html
brothercake 01-21-2004, 12:32 PM the nav looks right .. but the menus are too far off right in IE6 ... lemme look into that ;)
brothercake 01-21-2004, 12:42 PM It's the div align - if you take the align attribute out of the <div> and put it in the <table> instead, then it's okay in IE6 as well.
But obviously you shouldn't have to do that ... hmm ...
brothercake 01-21-2004, 01:19 PM Right - it appears that the div align attribute cascades in IE6 - it was center-aligning all the child <ul> elements. The fix is in udm-style.js, which I've attached, and also updated the site.
Ta :thumbsup:
brothercake 01-21-2004, 02:39 PM Here are some more arrows :)
speedracer 01-21-2004, 08:56 PM thanks!
i put the menu in div align because someone is bound to do that:)
brothercake 01-21-2004, 09:38 PM Yeah they are - I noticed what a particularly convoluted nesting of containers you had there ... good test ;)
allida77 01-22-2004, 02:26 PM Very nice. When will this be moved from beta to production?
The only thing I see is that most menu structures I use come from a db. From reading over some of your documentation I guess I would have to append the js file for this to work. I guess that is not to big of a deal since I would only have to output this if the menu tables were edited.
brothercake 01-22-2004, 04:05 PM Beta to production will probably be the beginning of next week, other things being equal.
To generate the structure dynamically you just build an unordered-list with the correct classname and id - then you do have to include the scripts, yes, but they can part of your template or just included at the same time.
Menu tables?? There are no tables ;) Or did you mean tables in the DB..
Just another suggestion on speed. The sub menus seem a little slow to display themselves onMouseover. Perhaps I'm just an impatient person, but I would prefer a quicker, perhaps almost instantanous revealing (the clipping animation not withstanding).
brothercake 01-24-2004, 02:14 AM That's a deliberate delay - if you move over a link and then quickly off it again, the menu doesn't open at all - the point of that is so you can move your mouse diagonally across links on your way to a menu, and the menu you're going to won't close.
Have a look at the Windows Start menus - that's exactly what they do - it makes for much better usability.
But you can set the value yourself - http://af.brothercake.com/dropdown/manual/customising/core/#customising-core-behaviors
Right. I think you even explained that to me before. Personally I think the delay in the demo is a little long, and might give the perception of the menu itself being "slow" to some people. Just my opinion though. :)
jeskel 01-24-2004, 01:00 PM excellent work brothercake! :thumbsup:
I'll be happy to use it one day or the other. I just won't choose to have a small delay.
Respect !
I'm definitely gonna check this out some more, and probably will use it.
croakingtoad 01-26-2004, 05:41 PM Very nice.. I used one of your menus for a site I was designing a few years ago, this one is quality work, good job!
glenngv 01-30-2004, 02:10 AM Awesome menu script brothercake! :thumbsup:
I have one suggestion. Up and down arrows in submenus are nice additions if the items are not fitted to current window's height. Similar to IE's Favorites menu. I've seen this implemented in MSDN Magazine site (http://msdn.microsoft.com/msdnmag/).
fredmv 01-30-2004, 02:26 AM Absolutely amazing. Excellent work James (and other contributors). ;)
I found the API reciever to be very cool and the fact that it is accessible is even more of a reason to use your script over the tons of other JavaScript menu scripts out there...
JAVAEOC 01-31-2004, 04:29 PM Ok first of all i, I really do think this menu is awesome. It has a cool design and i love that F12 and the arrows. But what else makes this menu so much better then the rest (ohter then style, and F12 stuff [which is really cool and amazing])
then i was wondering if you could explain to me how you did that arrow thing and the F12
thanks
Originally posted by JAVAEOC
Ok first of all i, I really do think this menu is awesome. It has a cool design and i love that F12 and the arrows. But what else makes this menu so much better then the rest (ohter then style, and F12 stuff [which is really cool and amazing])
then i was wondering if you could explain to me how you did that arrow thing and the F12
thanks
The fact that it is completely transparent. The existence of the menu is not really reflected within the markup of the document, keeping it semantically relevant. It is just as accessible as any <ul/> structure. Not only that, but even the Javascript enhancements are made accessible via implemented keyboard navigation and such.
JAVAEOC 02-01-2004, 01:28 AM ok, thats cool
and i really do like that key thing,
but how can i use my up and down arrows to do something like that?
JAVAEOC 02-01-2004, 05:12 PM i have add the delay to my own little menu;
I belive that this delay makes the menu look more profecionall, but even if you dont like it you can still switch it off very easily :)
Right. I think you even explained that to me before. Personally I think the delay in the demo is a little long, and might give the perception of the menu itself being "slow" to some people. Just my opinion though.
Skyzyx 02-01-2004, 08:53 PM I like it! This seems an awful lot like your other menu script posted here (http://www.codingforums.com/showthread.php?s=&threadid=19289), which is a good thing. The only problem I had with the other one was that there were some CSS color values hardcoded into the JavaScript Library. I'd hope that this wasn't the case here.
Also (without looking through all the source code), is the horizontal/vertical navigation determined by external CSS, or is it hard-coded into the JS file?
JAVAEOC 02-02-2004, 01:29 AM http://af.brothercake.com/dropdown/demos/style-msdn.php?PHPSESSID=c875e5a8775ac04df89f985fefd42e7a
if you foollow this link you will see a style example of the udm
if you foollow the link "Menual" then you will see a seperator, just like a horizontal rule.
How did you do this?
i gave it a try
take a look at the attached pic
looks prity crapy :(
JAVAEOC 02-02-2004, 01:42 AM Holy **** i was just messing with your voice thing it its so awesome i just dont know what to say.
When i posted the question what made this menu special i must have been stupid, let me take that back, cause i know now just HOW special this menu is, great job :D
JAVAEOC 02-02-2004, 03:28 AM Yea, what does that mean?
Does this mean i ahve to pay money to use ur script on a webpage on which i sell things? (This particular page, it would be ONE house)
so is it possible that i can use ur script without payin for it on this page?
brothercake 02-02-2004, 10:59 PM wow - several questions :) Sorry I haven't been keeping this up to date, but I was very sick last week.
Anyway:
- commercial licenses - if the site you're using it on makes money in any way then you are liable for a commercial license, yes. The free license is for educational, charitable and personal non-commercial websites; any site which generates any revenue at all is deemed to be commercial.
- menu separators - it's just external CSS I'm using to feed extra styling to some of the list-items. This is documented at http://af.brothercake.com/dropdown/manual/development/css/#development-css-menusexternal-decorations
- the arrow keys - you're asking how does it work? Well ... essentially it just works out node relationships. If you press "left" it works out which node corresponds to that, based on the current menu orientation, whether its a child menu of another menu, and so on. That's the core principle anyway - the details are just sitting and working it out for each of the directions, and for each of the circumstances that might change the node relationsip.
But also, what jkd said - the structure is just an unordered-list, so being able to navigate through it with the tab key is inherent - I didn't have to do anything to make that work other than add focus handlers to the links.
- Skyzyx - yeah it is the same core structure, and some of that original scripting has survived, but obviously it's far advanced on that basic prototype, and it doesn't do that rewriting <li> into <div> for IE anymore (the loss of semantics was a problem for screenreaders). The orientation of the navbar is in the configuration file - http://af.brothercake.com/dropdown/manual/customising/core/#customising-core-orientation
- fredmv - great - Let me know if you come up with some cool extensions :D
- glenngv - hmm .. yeah I started implementing that but I could only make it work in mozilla. A basic nested-list-based scrolling navigation demo I made at http://www.brothercake.com/Ref/maxheight.html but it's borked in most browsers. How to do it without introducing too much extraneous markup .. that's the difficulty ... not sure yet if it will be practicable at all - it's one of those things that has to work in all supported browsers, or it's not viable for any. Any pointers on that? ;)
And thanks to everyone for the kind comments :)
fredmv 02-02-2004, 11:18 PM Originally posted by brothercake
Let me know if you come up with some cool extensionsDefinitely. It's on my hard drive right now, I need to experiment with it some more. Again, amazing script. ;)
JAVAEOC 02-03-2004, 01:15 AM my code :(:
<tr><td class="ContextMenu" id="LinkTwo" onMouseOver="Color(this.id);Stop();Hide(1,4)" onMouseOut="UnColor(this.id);Delay()" onClick="PrintPage()" style="margin-top:2px;padding-top:2px;border-top:1px solid #999999;">Print this page</td></tr>
i tried that as you see i added the seperator in the style so i can still use my class ContextMenu in many other tables :(
but now it is part of the td border :( bad for me --> it means that when i go on it i give the td the same border color as the seperator and the seprator seemingly dissapears.
then i tried this:
<tr><td style="margin-top:2px;padding-top:2px;border-top:1px solid #999999;"></td></tr>
to jsut have a td filled with nothing but a seperator, but nothing is showing up. :(
thanks for any help :confused:
mindlessLemming 02-03-2004, 03:27 AM Let me add to the chorus... WOW!
I've been following the development of this since your original thread.
Great work, I'd like to use this in my portfolio if I may. (w/ big obvious credit to you, brothercake)
I'll be constructing it over the next six months (so its finished at the same time as I finish my course. )
I'll send you a copy before it's online, simply as a matter of curtesy.
Thanks again for your contribution to the web-dev community, the effort you have gone to is obvious.
Andrew:thumbsup:
brothercake 02-04-2004, 04:15 AM Javaeoc, your problem is unrelated; you should start another thread with that.
JAVAEOC 02-05-2004, 03:39 AM I think you should add a righclick navigation aid even tho it might not be a good thing, but you can leave this choice up to the user :thumbsup:
brothercake 02-06-2004, 08:19 AM I don't really wanna do that - not a simple right-click anyway. Because in this case "up to the user" means "up to the developer" rather than the end-user - the end-user might not be given the choice, and that's not something I can advocate.
But a mouse-gesture menu like http://www.codingforums.com/showthread.php?s=&threadid=31235 is not out of the question :)
btw to WA - I'm going to take your comment to heart, and reduce the default open-timer ... a bit ;) Actually there was something else going there which caused an extra pause on the very first menu opening, which I've now eradicated (well, almost completely).
There's going to be a 4.01 service release at the end of this week, which has a few other bugfixes, and also includes a new feature - you can add HTML headings inside the navbar, for example an <h3> around each navbar link, which should improve random access for screenreaders and other serial browsers, by allowing them to skip from branch to branch using their "headings reading mode" or equivalent :)
JAVAEOC 02-07-2004, 11:09 PM Well i desided to use your menu on my School's webpage, however i have a few problems, You script seems to destroy my js
this means that my js doesnt work when i use ur UDM, i belive this is because of the doctype strick or transitional. Do you have any idea why the doctype might restric my js?
JAVAEOC 02-08-2004, 01:37 AM dont get the point in the css maker (maybe cause i dont know how to use it :()
brothercake 02-08-2004, 09:12 AM See http://af.brothercake.com/dropdown/manual/final/noscript/ for how to use the CSS generator.
As to your scripts - yes, I can think of dozens of reasons why a Strict doctype might break a script that works in quirks mode. This, again, is a separate question you should really start another thread on - something like "why do scripts that work in quirks mode not work in compliant mode" - or search the forums for it; I've asked such a question myself before, so I'm sure there's info on it here somewhere.
But if you need it to "just work" - then change to an HTML transitional doctype - the menu script doesn't care either way.
JAVAEOC 02-08-2004, 04:44 PM I did everything you told me to do (on the website) to genarate my style sheet but it just shows up as a list (no more menu)
whats wrong?
JAVAEOC 02-10-2004, 12:18 AM here i attached the file maybe it helps.... what am i doing wrong?
|
|
