[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`
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
***
