Hi Mary It's for an intranet, so I can't show it right now. The purpose of this convoluted scheme was to make a navigation scheme that could work on thousands of pages without inline styles.
I used something similar on this site: http://www.csatravelprotection.com I think there is an article on alistapart.com that discusses the concept of body class or id to open and close navigation elements This is the nav list that goes with it <ul id="mainnav"> <li id="sub1"><a href="xxx.html" id="asub1" class="first" title="go back to the xxx home page">xxx</a></li> <li id="sub2"><a href="/xxx.html" id="asub2">xxx</a></li> <li id="sub3"><a href="/xxx.html" id="asub3">xxx</a> <ul> <li id="sub3sub1"><a href="/xxx.html" id="asub3sub1">xxx</a></li> <li id="sub3sub2"><a href="/xxx.html" id="asub3sub2">xxx</a></li> <li id="sub3sub3"><a href="/xxx.html" id="asub3sub3">xxx</a> <ul> <li id="sub3sub3sub1"><a href="/xxx.html" id="asub3sub3sub1">xxx</a></li> <li id="sub3sub3sub2"><a href="/xxx.html" id="asub3sub3sub2">xxx</a></li> <li id="sub3sub3sub3"><a href="/xxx.html" id="asub3sub3sub3">xxx</a></li> <li id="sub3sub3sub4"><a href="/xxx.html" id="asub3sub3sub4">xxx</a></li> <li id="sub3sub3sub5"><a href="/xxx.html" id="asub3sub3sub5">xxx</a></li> </ul> </li> <li id="sub3sub4"><a href="/xxx.html" id="asub3sub4">xxx</a></li> <li id="sub3sub5"><a href="/xxx.html" id="asub3sub5">xxx</a></li> </ul> </li> <li id="sub4"><a href="xxx.html" id="asub4">xxx</a> <ul> <li id="sub4sub1"><a href="xxx.html" id="asub4sub1" >xxx</a></li> </ul> </li> <li id="sub5"><a href="xxx.html" id="asub5">xxx</a></li> <li id="sub6"><a href="xxx.html" id="asub6">xxx</a></li> <li id="sub7"><a href="xxx/" id="asub7">Ethics Training</a> <ul> <li id="sub7sub1"><a href="/xxx.asp" id="asub7sub1">xxx</a></li> <li id="sub7sub2"><a href="/xxx.html" id="asub7sub2">xxx</a></li> <li id="sub7sub3"><a href="/xxx.html" id="asub7sub3">xxx</a></li> <li id="sub7sub4"><a href="/xxx.html" id="asub7sub4">xxx</a></li> <li id="sub7sub5"><a hrefxxx.html" id="asub7sub5">xxx</a></li> </ul> </li> <li id="sub8"><a href="/xxx.html" id="asub8">xxx</a></li> <li id="sub9"><a href="/xxx.html" id="asub9">xxx</a></li> <li id="sub10"><a href="/xxx/" id="asub10">xxx</a></li> </ul> Try setting this unordered list into a page and change the body classes around. Ted -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mary Wright Sent: Thursday, May 12, 2005 10:21 AM To: [email protected] Subject: Re: [WSG] when navigation schemes go bad. Ted, Do you have a URL for a page that show's this in action? Mary On 12 May 2005, at 17:35, Drake, Ted C. wrote: > For what it's worth, I thought this style sheet might be interesting. > > We have a navigation that can be as deep as three nested elements. This > style sheet is imported as nav.css. Each body is given a series of > class > elements (class="sub1 sub1sub1 asub1sub1") or something similar, > depending > on where the page sits in the navigation list. > [on v2, I changed sub1 to nav1 which is a better description for the > top-level] > > The following styles open, close the nested elements, highlight the > current > page, show who the parent element is via color, etc. > > It took forever to create, but I kind of like it now, if for no other > reason > that trying to impress co-workers with the overwhelming logic. > > Of course, they say, why couldn't we just put a style in the head of > each > page. Yeah, sure, go the easy route. > > Apologies in advance if this message is too long for your mailbox. > > Take a deep breath. > > /* ======================== persistant navigation > ===============================*/ > #navigation {background-color:#28455B;} > #mainnav {background:#29475d; width:182px; > list-style-type:none;padding:10px 0 10px 7px;} > #mainnav li {list-style-type:none; margin:0 0 -1px 0; padding:0;} > #mainnav li a {display:block; border-top:1px solid #fff; > padding-right:5px; > padding-left:5px; text-decoration:none; > font-weight:bold!important; color:#fff; background:#0b73c1; } > #mainnav li a:hover {background-color:#fff; color:#000; } > #mainnav li ul li a {background-color:#7fc4f7; color:#333; > padding-left:15px;} > #mainnav li ul li ul li a {background-color:#C7E7FF; color:#333; > padding-left:30px;} > #mainnav li ul, #mainnav li ul li ul, #mainnav li ul li ul li ul > {display:none;} > /* show sub on hover, this is annoying with long lists > #mainnav li:hover ul, #mainnav li ul li:hover ul, #mainnav li ul li ul > li:hover ul {display:block;}*/ > /* open submenus */ > .sub1 #sub1 ul, > .sub2 #sub2 ul, > .sub3 #sub3 ul, > .sub4 #sub4 ul, > .sub5 #sub5 ul, > .sub6 #sub6 ul, > .sub7 #sub7 ul, > .sub8 #sub8 ul, > .sub9 #sub9 ul, > .sub10 #sub10 ul, > .sub11 #sub1 ul {display:block;} > > /* keep their sub menus closed */ > .sub1 #sub1 ul li ul, > .sub2 #sub2 ul li ul, > .sub3 #sub3 ul li ul, > .sub4 #sub4 ul li ul, > .sub5 #sub5 ul li ul, > .sub6 #sub6 ul li ul, > .sub7 #sub7 ul li ul, > .sub8 #sub8 ul li ul, > .sub9 #sub9 ul li ul, > .sub10 #sub10 ul li ul, > .sub11 #sub1 ul li ul{display:none;} > > /* open sub sub menus */ > .sub1sub1 #sub1sub1 ul, > .sub1sub2 #sub1sub2 ul, > .sub1sub3 #sub1sub3 ul, > .sub1sub4 #sub1sub4 ul, > .sub1sub5 #sub1sub5 ul{display:block!important;} > .sub2sub1 #sub2sub1 ul, > .sub2sub2 #sub2sub2 ul, > .sub2sub3 #sub2sub3 ul, > .sub2sub4 #sub2sub4 ul, > .sub2sub5 #sub2sub5 ul{display:block!important;} > .sub3sub1 #sub3sub1 ul, > .sub3sub2 #sub3sub2 ul, > .sub3sub3 #sub3sub3 ul, > .sub3sub4 #sub3sub4 ul, > .sub3sub5 #sub3sub5 ul{display:block!important;} > .sub4sub1 #sub4sub1 ul, > .sub4sub2 #sub4sub2 ul, > .sub4sub3 #sub4sub3 ul, > .sub4sub4 #sub4sub4 ul, > .sub4sub5 #sub4sub5 ul {display:block!important;} > .sub5sub1 #sub5sub1 ul, > .sub5sub2 #sub5sub2 ul, > .sub5sub3 #sub5sub3 ul, > .sub5sub4 #sub5sub4 ul, > .sub5sub5 #sub5sub5 ul {display:block!important;} > .sub6sub1 #sub6sub1 ul, > .sub6sub2 #sub6sub2 ul, > .sub6sub3 #sub6sub3 ul, > .sub6sub4 #sub6sub4 ul, > .sub6sub5 #sub6sub5 ul{display:block!important;} > .sub7sub1 #sub7sub1 ul, > .sub7sub2 #sub7sub2 ul, > .sub7sub3 #sub7sub3 ul, > .sub7sub4 #sub7sub4 ul, > .sub7sub5 #sub7sub5 ul{display:block!important;} > .sub8sub1 #sub8sub1 ul, > .sub8sub2 #sub8sub2 ul, > .sub8sub3 #sub8sub3 ul, > .sub8sub4 #sub8sub4 ul, > .sub8sub5 #sub8sub5 ul{display:block!important;} > .sub9sub1 #sub9sub1 ul, > .sub9sub2 #sub9sub2 ul, > .sub9sub3 #sub9sub3 ul, > .sub9sub4 #sub9sub4 ul, > .sub9sub5 #sub9sub5 ul{display:block!important;} > .sub10sub1 #sub10sub1 ul, > .sub10sub2 #sub10sub2 ul, > .sub10sub3 #sub10sub3 ul, > .sub10sub4 #sub10sub4 ul, > .sub10sub5 #sub10sub5 ul {display:block!important;} > .sub11sub1 sub11sub1# ul, > .sub11sub2 #sub11sub2 ul, > .sub11sub3 #sub11sub3 ul, > .sub11sub4 #sub11sub4 ul, > .sub11sub5 #sub11sub5 ul {display:block!important;} > .sub12sub1 #sub12sub1 ul, > .sub12sub2 #sub12sub2 ul, > .sub12sub3 #sub12sub3 ul, > .sub12sub4 #sub12sub4 ul, > .sub12sub5 #sub12sub5 ul{display:block!important;} > > /*Give the Parent levels a lighter shade of blue and black text */ > > .sub1 #sub1 a, > .sub2 #sub2 a, > .sub3 #sub3 a, > .sub4 #sub4 a, > .sub5 #sub5 a, > .sub6 #sub6 a, > .sub7 #sub7 a, > .sub8 #sub8 a, > .sub9 #sub9 a, > .sub10 #sub10 a, > .sub11 #sub1 a {background-color:#7fc4f7; color:#000;} > > .sub1sub1 #sub1sub1 a, > .sub1sub2 #sub1sub2 a, > .sub1sub3 #sub1sub3 a, > .sub1sub4 #sub1sub4 a, > .sub1sub5 #sub1sub5 a{background-color:#C7E7FF; color:#000;} > .sub2sub1 #sub2sub1 a, > .sub2sub2 #sub2sub2 a, > .sub2sub3 #sub2sub3 a, > .sub2sub4 #sub2sub4 a, > .sub2sub5 #sub2sub5 a{background-color:#C7E7FF; color:#000;} > .sub3sub1 #sub3sub1 a, > .sub3sub2 #sub3sub2 a, > .sub3sub3 #sub3sub3 a, > .sub3sub4 #sub3sub4 a, > .sub3sub5 #sub3sub5 a{background-color:#C7E7FF; color:#000;} > .sub4sub1 #sub4sub1 a, > .sub4sub2 #sub4sub2 a, > .sub4sub3 #sub4sub3 a, > .sub4sub4 #sub4sub4 a, > .sub4sub5 #sub4sub5 a {background-color:#C7E7FF; color:#000;} > .sub5sub1 #sub5sub1 a, > .sub5sub2 #sub5sub2 a, > .sub5sub3 #sub5sub3 a, > .sub5sub4 #sub5sub4 a, > .sub5sub5 #sub5sub5 a {background-color:#C7E7FF; color:#000;} > .sub6sub1 #sub6sub1 a, > .sub6sub2 #sub6sub2 a, > .sub6sub3 #sub6sub3 a, > .sub6sub4 #sub6sub4 a, > .sub6sub5 #sub6sub5 a{background-color:#C7E7FF; color:#000;} > .sub7sub1 #sub7sub1 a, > .sub7sub2 #sub7sub2 a, > .sub7sub3 #sub7sub3 a, > .sub7sub4 #sub7sub4 a, > .sub7sub5 #sub7sub5 a{background-color:#C7E7FF; color:#000;} > .sub8sub1 #sub8sub1 a, > .sub8sub2 #sub8sub2 a, > .sub8sub3 #sub8sub3 a, > .sub8sub4 #sub8sub4 a, > .sub8sub5 #sub8sub5 a{background-color:#C7E7FF; color:#000;} > .sub9sub1 #sub9sub1 a, > .sub9sub2 #sub9sub2 a, > .sub9sub3 #sub9sub3 a, > .sub9sub4 #sub9sub4 a, > .sub9sub5 #sub9sub5 a{background-color:#C7E7FF; color:#000;} > .sub10sub1 #sub10sub1 a, > .sub10sub2 #sub10sub2 a, > .sub10sub3 #sub10sub3 a, > .sub10sub4 #sub10sub4 a, > .sub10sub5 #sub10sub5 a {background-color:#C7E7FF; color:#000;} > .sub11sub1 sub11sub1# a, > .sub11sub2 #sub11sub2 a, > .sub11sub3 #sub11sub3 a, > .sub11sub4 #sub11sub4 a, > .sub11sub5 #sub11sub5 a {background-color:#C7E7FF; color:#000;} > .sub12sub1 #sub12sub1 a, > .sub12sub2 #sub12sub2 a, > .sub12sub3 #sub12sub3 a, > .sub12sub4 #sub12sub4 a, > .sub12sub5 #sub12sub5 a{background-color:#C7E7FF; color:#000;} > > /* Now lets give their children grey text */ > .sub1 #sub1 ul a, > .sub2 #sub2 ul a, > .sub3 #sub3 ul a, > .sub4 #sub4 ul a, > .sub5 #sub5 ul a, > .sub6 #sub6 ul a, > .sub7 #sub7 ul a, > .sub8 #sub8 ul a, > .sub9 #sub9 ul a, > .sub10 #sub10 ul a, > .sub11 #sub1 ul a {color:#333;} > > .sub1sub1 #sub1sub1 ul a, > .sub1sub2 #sub1sub2 ul a, > .sub1sub3 #sub1sub3 ul a, > .sub1sub4 #sub1sub4 ul a, > .sub1sub5 #sub1sub5 ul a{color#333;} > .sub2sub1 #sub2sub1 ul a, > .sub2sub2 #sub2sub2 ul a, > .sub2sub3 #sub2sub3 ul a, > .sub2sub4 #sub2sub4 ul a, > .sub2sub5 #sub2sub5 ul a{color#333;} > .sub3sub1 #sub3sub1 ul a, > .sub3sub2 #sub3sub2 ul a, > .sub3sub3 #sub3sub3 ul a, > .sub3sub4 #sub3sub4 ul a, > .sub3sub5 #sub3sub5 ul a{color#333;} > .sub4sub1 #sub4sub1 ul a, > .sub4sub2 #sub4sub2 ul a, > .sub4sub3 #sub4sub3 ul a, > .sub4sub4 #sub4sub4 ul a, > .sub4sub5 #sub4sub5 ul a {color#333;} > .sub5sub1 #sub5sub1 ul a, > .sub5sub2 #sub5sub2 ul a, > .sub5sub3 #sub5sub3 ul a, > .sub5sub4 #sub5sub4 ul a, > .sub5sub5 #sub5sub5 ul a {color#333;} > .sub6sub1 #sub6sub1 ul a, > .sub6sub2 #sub6sub2 ul a, > .sub6sub3 #sub6sub3 ul a, > .sub6sub4 #sub6sub4 ul a, > .sub6sub5 #sub6sub5 ul a{color#333;} > .sub7sub1 #sub7sub1 ul a, > .sub7sub2 #sub7sub2 ul a, > .sub7sub3 #sub7sub3 ul a, > .sub7sub4 #sub7sub4 ul a, > .sub7sub5 #sub7sub5 ul a{color#333;} > .sub8sub1 #sub8sub1 ul a, > .sub8sub2 #sub8sub2 ul a, > .sub8sub3 #sub8sub3 ul a, > .sub8sub4 #sub8sub4 ul a, > .sub8sub5 #sub8sub5 ul a{color#333;} > .sub9sub1 #sub9sub1 ul a, > .sub9sub2 #sub9sub2 ul a, > .sub9sub3 #sub9sub3 ul a, > .sub9sub4 #sub9sub4 ul a, > .sub9sub5 #sub9sub5 ul a{color#333;} > .sub10sub1 #sub10sub1 ul a, > .sub10sub2 #sub10sub2 ul a, > .sub10sub3 #sub10sub3 ul a, > .sub10sub4 #sub10sub4 ul a, > .sub10sub5 #sub10sub5 ul a {color#333;} > .sub11sub1 sub11sub1# ul a, > .sub11sub2 #sub11sub2 ul a, > .sub11sub3 #sub11sub3 ul a, > .sub11sub4 #sub11sub4 ul a, > .sub11sub5 #sub11sub5 ul a {color#333;} > .sub12sub1 #sub12sub1 ul a, > .sub12sub2 #sub12sub2 ul a, > .sub12sub3 #sub12sub3 ul a, > .sub12sub4 #sub12sub4 ul a, > .sub12sub5 #sub12sub5 ul a{color#333;} > > > /*give the current page a bullet to the right */ > /* -- top level items --*/ > .asub1 #asub1, .asub2 #asub2,.asub3 #asub3,.asub4 #asub4,.asub5 #asub5, > .asub6 #asub6, .asub7 #asub7,.asub8 #asub8,.asub9 #asub9,.asub10 > #asub10 {background:#F1F9FF url(bg-here.gif) no-repeat right > !important; > color:#000; } > /*first sublevel items -- */ > .asub1sub1 #asub1sub1, .asub1sub2 #asub1sub2, .asub1sub3 #asub1sub3, > .asub1sub4 #asub1sub4, > .asub1sub5 #asub1sub5, .asub1sub6 #asub1sub6 {background:#F1F9FF > url(bg-here.gif) no-repeat right!important; padding-right:11px; > color:#000;} > .asub2sub1 #asub2sub1, .asub2sub2 #asub2sub2, .asub2sub3 #asub2sub3, > .asub2sub4 #asub2sub4, > .asub2sub5 #asub2sub5, .asub2sub6 #asub2sub6 {background:#F1F9FF > url(bg-here.gif) no-repeat right!important; padding-right:11px; > color:#000;} > .asub3sub1 #asub3sub1, .asub3sub2 #asub3sub2, .asub3sub3 #asub3sub3, > .asub3sub4 #asub3sub4, > .asub3sub5 #asub3sub5, .asub3sub6 #asub3sub6 {background:#F1F9FF > url(bg-here.gif) no-repeat right!important; padding-right:11px; > color:#000;} > .asub4sub1 #asub4sub1, .asub4sub2 #asub4sub2, .asub4sub3 #asub4sub3, > .asub4sub4 #asub4sub4, > .asub5sub5 #asub5sub5, .asub6sub6 #asub6sub6 {background:#F1F9FF > url(bg-here.gif) no-repeat right!important; padding-right:11px; > color:#000;} > .asub6sub1 #asub6sub1, .asub6sub2 #asub6sub2, .asub6sub3 #asub6sub3, > .asub6sub4 #asub6sub4, > .asub6sub5 #asub6sub5, .asub6sub6 #asub6sub6 {background:#F1F9FF > url(bg-here.gif) no-repeat right!important; padding-right:11px; > color:#000;} > .asub7sub1 #asub7sub1, .asub7sub2 #asub7sub2, .asub7sub3 #asub7sub3, > .asub7sub4 #asub7sub4, > .asub7sub5 #asub7sub5, .asub7sub6 #asub7sub6 {background:#F1F9FF > url(bg-here.gif) no-repeat right!important; padding-right:11px; > color:#000;} > .asub8sub1 #asub8sub1, .asub8sub2 #asub8sub2, .asub8sub3 #asub8sub3, > .asub8sub4 #asub8sub4, > .asub8sub5 #asub8sub5, .asub8sub6 #asub8sub6 {background:#F1F9FF > url(bg-here.gif) no-repeat right!important; padding-right:11px; > color:#000;} > .asub9sub1 #asub9sub1, .asub9sub2 #asub9sub2, .asub9sub3 #asub9sub3, > .asub9sub4 #asub9sub4, > .asub9sub5 #asub9sub5, .asub9sub6 #asub9sub6 {background:#F1F9FF > url(bg-here.gif) no-repeat right!important; padding-right:11px; > color:#000;} > .asub1sub10 #asub10sub1, .asub10sub2 #asub10sub2, .asub10sub3 > #asub10sub3, > .asub10sub4 #asub10sub4, > .asub10sub5 #asub10sub5, .asub10sub6 #asub10sub6 {background:#F1F9FF > url(bg-here.gif) no-repeat right!important; padding-right:11px; > color:#000;} > > /* ============ third levels ==============*/ > .asub3sub3sub1 #asub3sub3sub1, .asub3sub3sub2 #asub3sub3sub2, > .asub3sub3sub4 > #asub3sub3sub4, a.sub3sub3sub5 #asub3sub3sub5, > .asub3sub3sub6 #asub3sub3sub6 {background:#F1F9FF url(bg-here.gif) > no-repeat > right!important; padding-right:11px; color:#000;} > > #mainnav li a.here {background-color:#fff url(bg-here.gif) no-repeat > right; > padding-right:11px; color:#000;} > > > /*=================================Hacks============================ */ > /* \*/ > * html #mainnav li { > height: 1%; > float:left; > } > * html #mainnav li a { > height: 1%; > } > /* */ > ****************************************************** > The discussion list for http://webstandardsgroup.org/ > > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ****************************************************** > ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
