[WSG] CSS variable navigational menu`
Hi,
I have the following navigational menu bar. The menu has multiple
parent menu items. For the sake of the example, I only provide the first menu
item. It has about five child menu items. This is a horizontal menu bar at the
top of the ASP.Net website. 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?
Page.aspx:div id=container class=top_menuul id=nav
li class=suba href=#urlb style=width: 100px;Parent/b/a
ul style=display: none;lia
href='child1.aspx'Child 1/a/lilia
href='child2.apsx'Child 2/a/lilia
href='child3.aspx'Child 3/a/lilia
href='child4.aspx'Child 4/a/lilia
href='child5.aspx'Child 5/a/li/ul
/li
menu.css:#container {width:960px; height:20px; position:relative;}
#nav, #nav ul {padding:0; margin:0; width:960px; list-style-type:none;}
#nav li {float:left; text-align:center; }#nav li a {float:left;
text-decoration:none; font-family: Arial, Helvetica, sans-serif;
font-size:11px; color:#3d2e1c; }#nav li a b {float:left; height:30px;
line-height:28px; font-weight:bold; cursor:pointer; font-size:11px;
font-weight:bold;}#nav li.sub a b { border-bottom:solid 1px #00;}
#nav b.hover {color:#ff; background:url(../Images/line_footer.jpg)
no-repeat center bottom; }#nav i.hover {color:#ff;}#nav em.hover
{color:#080;}#nav ul ul ul a:hover {color:#080;
background:url(../Images/line_footer.jpg) no-repeat center bottom;}
#nav ul {display:none;}#nav ul {position:absolute; left:0; top:30px;
background:none; width:auto; border-top:solid 1px #00; height: 0px}#nav ul
li {float:left; position:relative; }#nav ul li a {display:block; padding:0 20px
0 10px; font-size:12px; line-height:25px; cursor:pointer; }#nav ul li a i
{display:block; font-style:normal; cursor:pointer;}#nav ul li a.sub {
background:url(../Images/line_footer.jpg) no-repeat center bottom;}
Thanks,Andy
***
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 gokus...@hotmail.com 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
***
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.
ul style=display: none;
#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`
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 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`
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.
ul style=display: none;
#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 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`
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 ***
