Re: [WSG] when navigation schemes go bad.
On Thu, 12 May 2005 18:42:07 +0100, Drake, Ted C. [EMAIL PROTECTED] wrote: I used something similar on this site: http://www.csatravelprotection.com I don't see anything that would require tons of CSS on that page (checked FF nightly and Opera 8.01). Sub-navigation doesn't even change when you hover main elements - page has to be reloaded just to change that bit of CSS... BTW: clear padding on body, becase page looks a bit broken in Opera. -- regards, Kornel Lesiski ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] when navigation schemes go bad.
Hi Kornel True, that older site didn't require a lot of css. I did, however use the body class or id, I can't remember to trigger the sub nav to open. I've never liked that navigation layout. It was clumsy in cross-browsers. If I still worked there, I'd re-do it. I'll send them a note about the padding. I guess the point of the whole process is, if you have a lot of pages and need to create a navigation that is universal, using the body class and a set of rules in your CSS to open and close is a nice way to go. It's also nice if you can scrap all of this work and simply use a dynamically generated navigation list with appropriate class=here attributes. There is a piece on alistapart.com, one of the latest, that discusses how to combine this with rollover and current states. I've already used it's logic on a test navigation for a museum in Puerto Rico. Ted -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kornel Lesinski Sent: Friday, May 13, 2005 2:05 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] when navigation schemes go bad. On Thu, 12 May 2005 18:42:07 +0100, Drake, Ted C. [EMAIL PROTECTED] wrote: I used something similar on this site: http://www.csatravelprotection.com I don't see anything that would require tons of CSS on that page (checked FF nightly and Opera 8.01). Sub-navigation doesn't even change when you hover main elements - page has to be reloaded just to change that bit of CSS... BTW: clear padding on body, becase page looks a bit broken in Opera. -- regards, Kornel Lesiski ** 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 **
Re: [WSG] when navigation schemes go bad.
On Thu, 12 May 2005 12:35:24 -0400, Drake, Ted C. [EMAIL PROTECTED] wrote: For what it's worth, I thought this style sheet might be interesting. [...] Thanks for sharing. BTW, Value for color#333 is empty(28 instances). David Laakso -- http://www.dlaakso.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
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,
RE: [WSG] when navigation schemes go bad.
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=sub1a href=xxx.html id=asub1 class=first title=go back to
the xxx home pagexxx/a/li
li id=sub2a href=/xxx.html id=asub2xxx/a/li
li id=sub3a href=/xxx.html id=asub3xxx/a
ul
li id=sub3sub1a href=/xxx.html
id=asub3sub1xxx/a/li
li id=sub3sub2a href=/xxx.html
id=asub3sub2xxx/a/li
li id=sub3sub3a href=/xxx.html id=asub3sub3xxx/a
ul
li id=sub3sub3sub1a href=/xxx.html
id=asub3sub3sub1xxx/a/li
li id=sub3sub3sub2a href=/xxx.html
id=asub3sub3sub2xxx/a/li
li id=sub3sub3sub3a href=/xxx.html
id=asub3sub3sub3xxx/a/li
li id=sub3sub3sub4a href=/xxx.html
id=asub3sub3sub4xxx/a/li
li id=sub3sub3sub5a href=/xxx.html
id=asub3sub3sub5xxx/a/li
/ul
/li
li id=sub3sub4a href=/xxx.html
id=asub3sub4xxx/a/li
li id=sub3sub5a href=/xxx.html
id=asub3sub5xxx/a/li
/ul
/li
li id=sub4a href=xxx.html id=asub4xxx/a
ul
li id=sub4sub1a href=xxx.html id=asub4sub1 xxx/a/li
/ul
/li
li id=sub5a href=xxx.html id=asub5xxx/a/li
li id=sub6a href=xxx.html id=asub6xxx/a/li
li id=sub7a href=xxx/ id=asub7Ethics Training/a
ul
li id=sub7sub1a href=/xxx.asp
id=asub7sub1xxx/a/li
li id=sub7sub2a href=/xxx.html
id=asub7sub2xxx/a/li
li id=sub7sub3a href=/xxx.html
id=asub7sub3xxx/a/li
li id=sub7sub4a href=/xxx.html
id=asub7sub4xxx/a/li
li id=sub7sub5a hrefxxx.html
id=asub7sub5xxx/a/li
/ul
/li
li id=sub8a href=/xxx.html id=asub8xxx/a/li
li id=sub9a href=/xxx.html id=asub9xxx/a/li
li id=sub10a href=/xxx/ id=asub10xxx/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: wsg@webstandardsgroup.org
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
