Re: [WSG] CSS variable navigational menu`
On 1/9/11 10:24 AM, Thierry Koblentz wrote: These two essentially are the same. I am assuming the menu is controlled by a javascript, best practise is to use the absolute positioning to control submenu and use the toogle or mouseover to trigger the sub-level. I'm not sure this is considered best practice as keyboard users would have to go through all the links in the menu before reaching the last one. These two examples show the difference between styling the sub menus off-screen or via display:none - http://www.tjkdesign.com/articles/new_drop_down/default.asp - http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp +1 I have adapted the first of these very successfully, even adding fancy fade effects for those who have scripting enabled. Very adaptive, and does exactly what you want, I think. (Assuming you only have few sub-menu items, as your example indicates,,,) Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS variable navigational menu`
On Jan 9, 2011, at 11:42 AM, Goku San wrote: > Hi, > > Thanks for your responses! I added the, #nav .sub {position: > relative;}, removed the {display:none;} from my CSS file and from the ASPX > page. Still not getting a solution. The #nav .sub {position: relative;} > helped because it positioned the child elements directly below the parent. > However, it repeated the next child element in the group below the above > child element, and the same for the next one, in a vertical formate. I don't > need it to do that. I need it to display the whole group of child elements > going across horizontally directly below the parent. So take the following as > an example: > > A B C > "1 2 3" > > User hovers over Parent A, Childs 1, 2, and 3 will display directly below A > going across. I'm not good with Java. I believe this site and menu system > does use some Java. I'm trying to stay away from it and achieve this > functionality through the use of CSS. > > Anyway to make this possible? > > Thanks guys, > Andy In order to help you better, maybe you can setup a sample page by copying over the menu (not just the first set) to a html page along with the script (javascript isn't the same as java) and CSS? There is pure CSS drop-down menu, but if you need to support IE browsers, a javascript ones that controls the hover/mouseover/toggle behavior is a better option. Superfish menu, which I know pretty well, is a reliable open source menu system that works in all browsers including IE6, but there are many other options, such as the two from Thierry. Superfish require extra jQuery script though. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS variable navigational menu`
Hi, Thanks for your responses! I added the, #nav .sub {position: relative;}, removed the {display:none;} from my CSS file and from the ASPX page. Still not getting a solution. The #nav .sub {position: relative;} helped because it positioned the child elements directly below the parent. However, it repeated the next child element in the group below the above child element, and the same for the next one, in a vertical formate. I don't need it to do that. I need it to display the whole group of child elements going across horizontally directly below the parent. So take the following as an example: A B C "1 2 3" User hovers over Parent A, Childs 1, 2, and 3 will display directly below A going across. I'm not good with Java. I believe this site and menu system does use some Java. I'm trying to stay away from it and achieve this functionality through the use of CSS. Anyway to make this possible? Thanks guys,Andy > Subject: Re: [WSG] CSS variable navigational menu` > From: weblis...@gmail.com > Date: Sun, 9 Jan 2011 09:40:28 -0800 > To: wsg@webstandardsgroup.org > > > On Jan 9, 2011, at 7:04 AM, Benjamin Hawkes-Lewis wrote: > > > > Make the parents the containing blocks for the absolute positioning of > > the children: > > > > #nav .sub { > >position: relative > > } > > > > http://reference.sitepoint.com/css/containingblock > > > > I hope you'll ensure that users who are not using a mouse (e.g. people > > with certain > > motor disabilities) can still access the content linked in the child items, > > whether via deeper links on hub pages reached via parent items or by > > ensuring > > that child menus are focusable and visible on focus. > > > > Furthermore, you should get rid of all display:none in your inline style and > in the CSS. > > > #nav ul {display:none;} > > These two essentially are the same. I am assuming the menu is controlled by a > javascript, best practise is to use the absolute positioning to control > submenu and use the toogle or mouseover to trigger the sub-level. Judging > from the #nav ul, it seems to be the case, but the display none overwrites > the rule below. > > #nav ul {position:absolute; left:0; top:30px; background:none; width:auto; > border-top:solid 1px #00; height: 0px} > > tee > > *** > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > *** > *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS variable navigational menu`
On Jan 9, 2011, at 10:24 AM, Thierry Koblentz wrote: >> These two essentially are the same. I am assuming the menu is >> controlled by a javascript, best practise is to use the absolute >> positioning to control submenu and use the toogle or mouseover to >> trigger the sub-level. > > I'm not sure this is considered best practice as keyboard users would have > to go through all the links in the menu before reaching the last one. I am a die-hard superfish menu fan :) Fully aware of the argument. IMHO, this issue is like chicken and egg which comes first tiring and constantly on-going debate, which I have long given up :-) IMHO, this is a fundamental issue that should be fixed by the browser (with arrow keys, and with combination of ARIA perhaps?) that allow satisfying both, not by one school of developers who strongly believe in his way is better (who are you to dictate I wouldn't want to tab through all links and block me from accessing all the sub-links! Damn! Talk about freedom of accessibility!), and another school of developers believing her way is better (and who are you to dictate me to tab through all links - I may not want to do that 6 days in a row, but on Sunday I want the choice to be able to tab through all links just because it's a god-given fundamental right). Having said that, I re-word my sentence: One of the best practises, and me, as a Superfish Menu fan thinks, is to use the absolute positioning to control submenu. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] CSS variable navigational menu`
> These two essentially are the same. I am assuming the menu is > controlled by a javascript, best practise is to use the absolute > positioning to control submenu and use the toogle or mouseover to > trigger the sub-level. I'm not sure this is considered best practice as keyboard users would have to go through all the links in the menu before reaching the last one. These two examples show the difference between styling the sub menus off-screen or via display:none - http://www.tjkdesign.com/articles/new_drop_down/default.asp - http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp -- Regards, Thierry @thierrykoblentz www.tjkdesign.com | www.ez-css.org | www.css-101.org *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS variable navigational menu`
On Jan 9, 2011, at 7:04 AM, Benjamin Hawkes-Lewis wrote: > > Make the parents the containing blocks for the absolute positioning of > the children: > > #nav .sub { >position: relative > } > > http://reference.sitepoint.com/css/containingblock > > I hope you'll ensure that users who are not using a mouse (e.g. people > with certain > motor disabilities) can still access the content linked in the child items, > whether via deeper links on hub pages reached via parent items or by ensuring > that child menus are focusable and visible on focus. > Furthermore, you should get rid of all display:none in your inline style and in the CSS. #nav ul {display:none;} These two essentially are the same. I am assuming the menu is controlled by a javascript, best practise is to use the absolute positioning to control submenu and use the toogle or mouseover to trigger the sub-level. Judging from the #nav ul, it seems to be the case, but the display none overwrites the rule below. #nav ul {position:absolute; left:0; top:30px; background:none; width:auto; border-top:solid 1px #00; height: 0px} tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS variable navigational menu`
On Sun, Jan 9, 2011 at 2:09 PM, Goku San wrote: > I have the following navigational menu bar. The menu has multiple parent > menu items. [snip] > What currently happens is when a user hovers over > the Parent menu item, the child menu items appear below, horizontally, of > course. And each time, the child menu items appear to the far left. So the > problem is when we get to the 5th parent menu item, going across, hover over > it, the child menu items appear below towards the far left. So it > cosmetically looks wrong but also causes the user to further navigate their > mouse to get to the child items. Anyway to position the child menu items to > appear directly below the parents and not always to the far left? Make the parents the containing blocks for the absolute positioning of the children: #nav .sub { position: relative } http://reference.sitepoint.com/css/containingblock I hope you'll ensure that users who are not using a mouse (e.g. people with certain motor disabilities) can still access the content linked in the child items, whether via deeper links on hub pages reached via parent items or by ensuring that child menus are focusable and visible on focus. Food for thought: http://www.w3.org/TR/WCAG20/#keyboard-operation http://www.uie.com/articles/users_decide_first/ http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/ http://labs.benjaminhawkeslewis.com/rapid-access-hover-menu.html -- Benjamin Hawkes-Lewis *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***