[WSG] nav or menu?
Hi LG, I am making a site (html5) which has a nav section at the top of each page. Some pages will also have a 'menu' which will be a short list of links to other pages in the site, and these will appear lower down in the content of the page. Instinct tells me that it is sensible to make this subset as follows: menu dl ddblah/dd ddblah/dd ddblah/dd /dl /menu (where blah is a link to a page) But lots of folk seem to say that menu is only to be used for lists of commands. It's not clear to me, anyway! Is the above 'wrong'? All advice gratefully recd. Bob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] nav or menu?
On 1/9/11 7:44 AM, designer wrote: Hi LG, I am making a site (html5) which has a nav section at the top of each page. Some pages will also have a 'menu' which will be a short list of links to other pages in the site, and these will appear lower down in the content of the page. Instinct tells me that it is sensible to make this subset as follows: menu dl ddblah/dd ddblah/dd ddblah/dd /dl /menu (where blah is a link to a page) But lots of folk seem to say that menu is only to be used for lists of commands. It's not clear to me, anyway! Is the above 'wrong'? All advice gratefully recd. Bob I do not think the above is necessarily wrong. Another approach might be: Top menu nav ul li/li ul /nav Subset menu nav ul id=s li/li ul /nav Best, ~d -- http://chelseacreekstudio.com/ http://chelseacreekstudio.com/fa/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] nav or menu?
This is a 'too early' post as HTML5 nav nor menu aren't really supported yet in any major browsers. So, we are speculating about how browsers might interpret these elements. You can read the HTML5 spec and see what is says about those tags, but at the end of the day browser implementation is going to dictate what is right or wrong. For now I would strongly suggest not putting either in your code, as you are simply adding bloat which serves no purpose whatsoever (until browsers start implementing these tags). Focus on the code which is going to deliver some value to your UI. Thanks, Jason On Sun, Jan 9, 2011 at 1:24 PM, David Laakso da...@chelseacreekstudio.comwrote: On 1/9/11 7:44 AM, designer wrote: Hi LG, I am making a site (html5) which has a nav section at the top of each page. Some pages will also have a 'menu' which will be a short list of links to other pages in the site, and these will appear lower down in the content of the page. Instinct tells me that it is sensible to make this subset as follows: menu dl ddblah/dd ddblah/dd ddblah/dd /dl /menu (where blah is a link to a page) But lots of folk seem to say that menu is only to be used for lists of commands. It's not clear to me, anyway! Is the above 'wrong'? All advice gratefully recd. Bob I do not think the above is necessarily wrong. Another approach might be: Top menu nav ul li/li ul /nav Subset menu nav ul id=s li/li ul /nav Best, ~d -- http://chelseacreekstudio.com/ http://chelseacreekstudio.com/fa/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- Jason Grant BSc, MSc CEO, Flexewebs Ltd. www.flexewebs.com ja...@flexewebs.com +44 (0)7748 591 770 Company no.: 5587469 www.flexewebs.com/semantix www.twitter.com/flexewebs www.linkedin.com/in/flexewebs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] nav or menu?
On 09/01/2011 13:32, Jason Grant wrote: This is a 'too early' post as HTML5 nav nor menu aren't really supported yet in any major browsers. So, we are speculating about how browsers might interpret these elements. You can read the HTML5 spec and see what is says about those tags, but at the end of the day browser implementation is going to dictate what is right or wrong. For now I would strongly suggest not putting either in your code, as you are simply adding bloat which serves no purpose whatsoever (until browsers start implementing these tags). Focus on the code which is going to deliver some value to your UI. nav doesn't have any new functionality of behaviour...it's simply a new structural element to denote navigation in a machine-readable way (like header, footer, aside, etc). It's a slightly more specific alternative to the generic div. Even once all browsers natively support it (giving it default block-level styling, amongst other things), they won't do anything different with it afaik. It's safe to use (with the usual caveat of IE support for unknown elements like this having to be plugged in via html5shim and default display:block styling having to be explicitly given). menu on the other hand is a planned interactive element. it is indeed meant for context menus, toolbars, etc, and once supported browsers will actually do something new and different with it. So long story short: between the two, I'd opt for nav. And (if you can live with the IE need for scripting) it's safe to use, though you won't get any benefit from it as such (other than more explicit semantics which *may* be of benefit to tools like screenreaders or search engine bots in future). But yes, failing all that, there's nothing wrong with a traditional div id=nav or whatever... P -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com | http://flickr.com/photos/redux/ __ twitter: @patrick_h_lauke | skype: patrick_h_lauke __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] nav or menu?
The nav element is the correct element to use in the case of site navigation links. You are correct about menu which when implemented will be like a desktop app menu. The nav element is not generally accessibility supported in browsers yet, which means it's semantics are not conveyed, but you can add an ARIA landmark role to convey the meaning: nav role=navigation Regards Stevef Sent from my iPhone On 9 Jan 2011, at 12:44, designer desig...@gwelanmor-internet.co.uk wrote: Hi LG, I am making a site (html5) which has a nav section at the top of each page. Some pages will also have a 'menu' which will be a short list of links to other pages in the site, and these will appear lower down in the content of the page. Instinct tells me that it is sensible to make this subset as follows: menu dl ddblah/dd ddblah/dd ddblah/dd /dl /menu (where blah is a link to a page) But lots of folk seem to say that menu is only to be used for lists of commands. It's not clear to me, anyway! Is the above 'wrong'? All advice gratefully recd. Bob *** 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 ***
[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 ***
[WSG] Out of Office Re: WSG Digest
Hi, I'll be out of the office from the 22nd of December 2010 until the 12th of January 2011. For urgent inquiries, please be in touch with Georgie at geor...@10collective.com.au Merry Christmas Julien *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
