Re: [css-d] expanding submenu
Christian Heilmann wrote: Could it be you meant YADM? http://www.onlinetools.org/tools/yadm/expanding.html Christain (and others), Some questions on expanding menu's: - is a css + javascript combination still the best way to go (instead of css only)? - is YADM the best solution for these menus, or is there a better one? I have to build a menu bar with a submenu level into this site i'am building: http://beta.erikvisser.net/24-10/ Thanks, Erik visser __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] expanding submenu
On 11/23/06, Erik Visser [EMAIL PROTECTED] wrote: Some questions on expanding menu's: - is a css + javascript combination still the best way to go (instead of css only)? My opinion, CSS only is the best way. But unfortunately we cannot use the best way if we want to support IE :D. So CSS+Javascript cound be the best trade-off. - is YADM the best solution for these menus, or is there a better one? I think what you really need is pop-up menu (on mouse over). This is one of my favourite (the code is simple and runs fast). http://solardreamstudios.com/learn/css/cssmenus The demo http://solardreamstudios.com/_img/learn/css/cssmenus/index-horiz.html -Charles- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] expanding submenu
Some questions on expanding menu's: - is a css + javascript combination still the best way to go (instead of css only)? Short answer: yes. Justification: http://www.wait-till-i.com/index.php?p=327 My opinion, CSS only is the best way. But unfortunately we cannot use the best way if we want to support IE :D. So CSS+Javascript cound be the best trade-off. Short answer: Try using a keyboard (without creating invalid markup). - is YADM the best solution for these menus, or is there a better one? http://icant.co.uk/sandbox/bonsaimenu/index.html I think what you really need is pop-up menu (on mouse over). This is one of my favourite (the code is simple and runs fast). If you want a good, free, as accessible as it gets menu try the YUI menu component: http://developer.yahoo.com/yui/menu/ Let's stop this thread right here and now though. Not again, please! -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] expanding submenu
On 11/23/06, Christian Heilmann [EMAIL PROTECTED] wrote: Some questions on expanding menu's: - is a css + javascript combination still the best way to go (instead of css only)? Short answer: yes. Justification: http://www.wait-till-i.com/index.php?p=327 Well at least we need to remember one thing: the user can turn off javascript support (also the fact is that 'noscript' is one of the most popular extension in firefox). So even if we use javascript, we have to make sure that the design is also accessible without javascript support. Short answer: Try using a keyboard (without creating invalid markup). I'm sorry, but I do not really get the meaning of the phrase, I am using a keyboard :D If you want a good, free, as accessible as it gets menu try the YUI menu component: http://developer.yahoo.com/yui/menu/ YUI is great, both in quality and size :D (136K menu.js, 41K menu-min.js). -Charles- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] expanding submenu
Some questions on expanding menu's: - is a css + javascript combination still the best way to go (instead of css only)? Short answer: yes. Justification: http://www.wait-till-i.com/index.php?p=327 Well at least we need to remember one thing: the user can turn off javascript support (also the fact is that 'noscript' is one of the most popular extension in firefox). So even if we use javascript, we have to make sure that the design is also accessible without javascript support. yes, as stated... quote: Notice that we are talking about modern DOM scripting here, that works unobtrusively (http://onlinetools.org/articles/unobtrusivejavascript) and follows the idea of progressive enhancement (http://en.wikipedia.org/wiki/Progressive_Enhancement). It is easy to find examples of scripts that dont help the cause, so please let the sins of the past be behind us. :unquote Short answer: Try using a keyboard (without creating invalid markup). I'm sorry, but I do not really get the meaning of the phrase, I am using a keyboard :D quote: You are at the mercy of the browser when it comes to keyboard support. While the focus pseudo class offers you the option to trigger a style application via keyboard, browsers only allow keyboard access to links and buttons. With links being inline elements you can only nest other inline elements in them, and you may make it a real pain for users relying on assistive technology to use your site. While CSS can only apply styles to an element that has the focus (which could have happened either by keyboard or mouse) JavaScript can use several keyboard event handlers and even recognize which key is currently pressed. This enables you to create menus that work like real application menus. While the normal web way of navigating through a list of links via keyboard is to jump from link to link via Tab (or the A key in Opera), real application menus like the Windows start bar or any dropdown in the browser menu can be navigated with the arrow keys. :unquote If you want a good, free, as accessible as it gets menu try the YUI menu component: http://developer.yahoo.com/yui/menu/ YUI is great, both in quality and size :D (136K menu.js, 41K menu-min.js). The my solution is smaller than yours is as boring as the opposite equivalent when it comes to body parts. However: http://yuiblog.com/blog/2006/10/16/pageweight-yui0114/ As in terms of quality: There is a great book by Sitepoint called the JavaScript Anthology where James Edwards, developer of the Ultimate Dropdown Menu(UDM) explains ALL the things a real dropdown menu has to cater for - and these are a lot. If you can do better, do it, and consider these uses cases of the menu: - a user can only navigate via keyboard - the menu sub level cannot fit in the browser's viewport when it is expanded - a user is incapable of non-erratic mouse movements Happy coding. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] expanding submenu
From: Christian Heilmann [EMAIL PROTECTED] Notice that we are talking about modern DOM scripting here, that works unobtrusively (http://onlinetools.org/articles/unobtrusivejavascript) and follows the idea of progressive enhancement (http://en.wikipedia.org/wiki/Progressive_Enhancement). It is easy to find examples of scripts that dont help the cause, so please let the sins of the past be behind us. Dear admin, Is promoting web technology and web development fads as religious dogma within the posting roles of this mailing list? Thanks. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] expanding submenu
Dear admin, Is promoting web technology and web development fads as religious dogma within the posting roles of this mailing list? Thanks. Is quoting out of context within the rules? I am out of here... __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] expanding submenu
... The JavaScript I ended up using was one very short function. I could have sworn I pulled it from either Eric Meyer's More ... book or from The CSS Anthology along with research via Google. I just found my SOURCE today and thought I would pass it along. The O'Reilly CSS Cookbook by Christopher Schmitt. It's in Chapter 3: Links and Navigation and here is called 'Creating Collapsible Menus' (pp 78-80). http://www.oreilly.com/catalog/cssckbk/ There is a zip available of code and I think the example is there. Additional comment: Chris was right to correct my comment that implied short JavaScript was 'better'. As he so well stated, short really has nothing to do with better or not. I meant that I used one that had much less JS involved. Lynda __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] expanding submenu
I just found my SOURCE today and thought I would pass it along. The O'Reilly CSS Cookbook by Christopher Schmitt. It's in Chapter 3: Links and Navigation and here is called 'Creating Collapsible Menus' (pp 78-80). http://www.oreilly.com/catalog/cssckbk/ There is a zip available of code and I think the example is there. Additional comment: Chris was right to correct my comment that implied short JavaScript was 'better'. As he so well stated, short really has nothing to do with better or not. I meant that I used one that had much less JS involved. Which might be even worse. With JavaScript I can delay the hiding of sub elements, I can set a state that doesn't change, and it works in every browser that supports the DOM and event handlers (which includes all major ones since their third generation). I can make the menus collapse and expand with a mouse and a keyboard or I can even offer the option not to collapse the menu - something I can only do with CSS with an extra style sheet. With CSS I have to hack around (with JS or JScripts in HTCs) to make MSIE behave, I have no way of keeping the state and I cannot make the menu work with a keyboard (unless the browser in use supports :focus and :active). However, CSS menus are sexier as they are newer :-) Eric pointed all these issues out in his book, sadly enough a lot of CSS tutorials reiterating some of his ideas fail to mention them. CSS menus are easier to maintain for the developer, hybrid JS/CSS menus with all the styling in the CSS are both maintainable and work for a lot bigger user group. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] expanding submenu
Chris, I was already afraid that it couldn't be done with CSS only. Do you perhaps have an example of how I can accomplish this with javascript, or do you know a 'good' javascript forum where I can get this information? option two has the sub menu: http://www.icant.co.uk/sandbox/sticky.html This can become VERY annoying really fast, though :-) Information on that stuff either via my self training course: http://www.onlinetools.org/articles/unobtrusivejavascript/ Or Stuart's great book: http://www.sitepoint.com/books/dhtml1/ Thanks Chris, that's exactly the example I'm looking for. Don't find it annoying yet, but maybe in time. :-) I've already been looking through your site. Look's very good. Like the fact that you manage to seperate the javascript from the html, so your code stays clean. And I'm also going to download the sample chapters from your site and Sitepoint's website. Dimpie. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] expanding submenu
I sent him an example of what he wanted to do, which can be pretty annoying: http://icant.co.uk/sandbox/sticky.html I agree -- didn't like this behavior. Could it be you meant YADM? http://www.onlinetools.org/tools/yadm/expanding.html ARGH -- that JavaScript is huge! It is neither of those -- The JavaScript I ended up using was one very short function. I could have sworn I pulled it from either Eric Meyer's More ... book or from The CSS Anthology along with research via Google. Sorry I can't point you all to a link. The sites that use it are behind our firewall. If the ADMINs approve, I think I could post the code. Lynda __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] expanding submenu
ARGH -- that JavaScript is huge!
It is neither of those -- The JavaScript I ended up using was one very
short function.
Ok, just quickly, and speaking as a member of the WaSP DomScripting Task Force:
The size of a JavaScript is NOT a measure of how clever, good or bad
it is. What it _does_, how clean it does it and how nicely it plays
with other scripts and different environments is what is important.
All of these matters are very complex and do mean that there are hacks
and workarounds at the moment, all of them making the scripts larger
than needed, much like a lot of CSS hacks make a CSS file less
readable. They are necessary however, as short and quick scripts
simply are a lot less failsafe or expect a special user agent or
elements to be available.
You can make a nested navigation clickable and collapsing by this:
window.onload=function()
{
n=document.getElementById('nav');
uls=n.getElementsByTagName('ul');
for(i=0;iuls.length;i++)
{
uls[i].style.display='none';
uls[i].parentNode.getElementsByTagName('a')[0].onclick=function()
{
u=this.parentNode.getElementsByTagName('ul')[0];
u.style.display=u.style.display=='none'?'block':'none';
return false;
}
}
}
However, it will make your navigation unusable for screen readers, not
allow for other scripts to be used on the page, and might break when
your navigation HTML has whitespace in it.
A lot of developers are creating a newer breed of scripts that CSS
developers can use without knowing anything about JavaScript to apply
them. These scripts apply the functionality CSS is not capable to
deliver in a cross browser fashion and keep the complete look and feel
in CSS classes that get applied and removed dynamically. This makes
the scripts bigger, but also a lot more versatile.
Think of these scripts as a CSS helper, not as something you have to
grasp or should change without knowing what you do.
We stopped mixing presentation and HTML, now we start taking the
presentation of the DHTML days out of the scripts and put them into
the CSS, where they should be.
This will help web development in the future and cut down on
maintenance time and frustrating hours before the machine for all of
us.
Don't trust scripts that ask you to change them to make them look
different, or promise the moon on a stick - there is just no silver
bullet in web design, our environment is far too diverse for that.
Our safest bet is to keep the different layers separated and work
together towards good and clever solutions. This also involves
restraint and understanding of each others' problems.
regards,
Chris
--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] expanding submenu
RE: [css-d] expanding submenuHi Linda, I know where you can find the code from Eric Meyer's book More Eric Meyer on CSS. You can download it here http://more.ericmeyeroncss.com/dloads/ under 'CSS-driven dropdowm menu's'. However it is pure CSS and doesn't contain javascript to keep the submenu's open. It does however contain a file called csshover.htc, which is needed to provide IE with some extra CSS functionality so hover works on any element and not only on a links. Regards, Dimpie - Original Message - From: Peach Lynda L Contr 96 CG/SCTOA To: Christian Heilmann Cc: dimpie ; css-d@lists.css-discuss.org Sent: Friday, August 12, 2005 3:34 PM Subject: RE: [css-d] expanding submenu I sent him an example of what he wanted to do, which can be pretty annoying: http://icant.co.uk/sandbox/sticky.html I agree -- didn't like this behavior. Could it be you meant YADM? http://www.onlinetools.org/tools/yadm/expanding.html ARGH -- that JavaScript is huge! It is neither of those -- The JavaScript I ended up using was one very short function. I could have sworn I pulled it from either Eric Meyer's More ... book or from The CSS Anthology along with research via Google. Sorry I can't point you all to a link. The sites that use it are behind our firewall. If the ADMINs approve, I think I could post the code. Lynda __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] expanding submenu
Chris, I was already afraid that it couldn't be done with CSS only. Do you perhaps have an example of how I can accomplish this with javascript, or do you know a 'good' javascript forum where I can get this information? Thanks Dimpie. - Original Message - From: Christian Heilmann [EMAIL PROTECTED] To: dimpie [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Wednesday, August 10, 2005 3:46 PM Subject: Re: [css-d] expanding submenu On 8/10/05, dimpie [EMAIL PROTECTED] wrote: I would like to be able create a menu with several levels (submenu's) that does the folowing: If you hover over the toplevel the submenu should expand and stay visible when you remove the mouse from it. When you hover over the top menu again, the submenu should close. I was wondering it this is possible with CSS only? Here is an example http://www.hoogvliet.com/ of what I'd like to achieve. If you hover over 'Over Hoogvliet' the submenu expands and stays open if you remove the mouse cursor. No. CSS cannot keep a state, and can only show and hide everything inside the element the cursor is currently on. This effect can be easily done with JavaScript though. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] expanding submenu
On 8/10/05, dimpie [EMAIL PROTECTED] wrote: I would like to be able create a menu with several levels (submenu's) that does the folowing: If you hover over the toplevel the submenu should expand and stay visible when you remove the mouse from it. When you hover over the top menu again, the submenu should close. I was wondering it this is possible with CSS only? Here is an example http://www.hoogvliet.com/ of what I'd like to achieve. If you hover over 'Over Hoogvliet' the submenu expands and stays open if you remove the mouse cursor. No. CSS cannot keep a state, and can only show and hide everything inside the element the cursor is currently on. This effect can be easily done with JavaScript though. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
