Re: [WSG] navigation using arrows for location

[Paul Novitski]

At 11:20 AM 3/5/2005, Anders Nawroth wrote:
I wish we could find out why IE throws the submenus around sometimes ... 
then it would be *really* useful.

If you haven't already, you might try posing the problem also to the CSS-D 
listserve .  There are a 
number of people on that list who routinely conquer the IE beast and can 
probably help you pin down the cause.

Paul 

**
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] navigation using arrows for location

[Anders Nawroth]

Thanks!
I wish we could find out why IE throws the submenus around sometimes ... 
then it would be *really* useful.

/Anders
Paul Novitski skrev:
Nice work, Anders!
Paul
At 02:40 AM 3/5/2005, you wrote:
Paul Novitski skrev:
I've been thinking along these lines lately, as I've just drafted 
another kind of menu that uses connecting lines:
http://www.dandemutande.org/ResourceGuide.asp
Play with the category & location menus -- categories are only 
two-deep but location's four-deep.  It is resizable (to a point).

I've tried to come up with a standards-based tree-menu with 
connecting lines.
With JS turned off the lines still show, but you can't open/close the 
folders client-side.
I only use images for the horizontal lines, corners (last items) and 
icons.
The open/close icons are added with JS.

http://cms3.nawroth.com/treemenu
The tree-menu is only used on this page and it's subpages. (But the 
tree still shows the entire site.)

My problem is, IE gets the positioning wrong sometimes when you open 
multiple folders client-side (JS). Some bug is triggered, and i can't 
find any solution to this.

/Anders
**
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] navigation using arrows for location

[Anders Nawroth]

Paul Novitski skrev:
I've been thinking along these lines lately, as I've just drafted 
another kind of menu that uses connecting lines:
http://www.dandemutande.org/ResourceGuide.asp
Play with the category & location menus -- categories are only 
two-deep but location's four-deep.  It is resizable (to a point).
I've tried to come up with a standards-based tree-menu with connecting 
lines.
With JS turned off the lines still show, but you can't open/close the 
folders client-side.
I only use images for the horizontal lines, corners (last items) and icons.
The open/close icons are added with JS.

http://cms3.nawroth.com/treemenu
The tree-menu is only used on this page and it's subpages. (But the tree 
still shows the entire site.)

My problem is, IE gets the positioning wrong sometimes when you open 
multiple folders client-side (JS). Some bug is triggered, and i can't 
find any solution to this.

/Anders
**
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] navigation using arrows for location

[Paul Novitski]

Peter Ottery wrote:
so I've designed myself a nice looking navigation scheme that displays 
visually whereabouts you are within a site.

Now I just need to work out how to sort out the css :)
...
I've had a play with some css and arrived at this:
http://c41.com.au/test/nav_test.html
(shows gif original concept and the new html version using 1 'sprite' [1] 
gif for the arrows/lines)
Peter,
Nice, interesting design problem you've cooked up.  I've made a first-draft 
effort at implementing it in CSS:
http://novitskisoftware.com/demos/PeterOtteryNavMenu/navtest.html

I first tried to come up with a technique that assembled the arrows from 
modular pieces so that the menu could stretch nicely when resized.  I was 
partly successful but haven't yet thought of a way to get it to work for 
both up & down arrows.

I've been thinking along these lines lately, as I've just drafted another 
kind of menu that uses connecting lines:
http://www.dandemutande.org/ResourceGuide.asp
Play with the category & location menus -- categories are only two-deep but 
location's four-deep.  It is resizable (to a point).

Cheers,
Paul  

**
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] navigation using arrows for location

[Ben Curtis]

However, that would only work if the line always comes from the top of 
the list and then down to the active category. In the example, though, 
the line can come from below (see the line from the first to the 
second list).

Right. I only saw the gif without anything going up. Hm. Wow. Tough nut.
--
Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613

**
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] navigation using arrows for location

[Patrick H. Lauke]

Ben Curtis wrote:
What you would ideally have is an older-sibling, younger-sibling type 
selector. Then you could select all the li elements that are siblings 
and come before your active element, and give them a vertical line 
background or border. Then give your active element the arrow. And leave 
the younger-siblings (the siblings after your active element) alone.
However, that would only work if the line always comes from the top of 
the list and then down to the active category. In the example, though, 
the line can come from below (see the line from the first to the second 
list). You could probably work around this, but only with some initial 
server-side processing (that counts down the number of list items with 
regards to the parent list and assigns different classes - with or 
without line on the left - to each list item)

--
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
**
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] navigation using arrows for location

[Ben Curtis]

http://c41.com.au/test/sample_nav.gif
...
any ideas, wacky or otherwise, appreciated.

Always respect those wacky ideas.
Here's one:
What you would ideally have is an older-sibling, younger-sibling type 
selector. Then you could select all the li elements that are siblings 
and come before your active element, and give them a vertical line 
background or border. Then give your active element the arrow. And 
leave the younger-siblings (the siblings after your active element) 
alone.

CSS gives you child, descendent and sibling selectors, but no 
source-order selector like that. Dynamic css might give you a chance 
with nth-child selectors, but that's years off from being practice in 
public websites.

So, if you're not averse to calling down the wrath of the semantic 
gods, nest each element so you have a bunch of descendant selectors to 
work with. Instead of the nice and meaningful:


WoodCentre
250 Latin Street
El Changeo
2 Changed Ave
Changewood Facilities
Active Project
Park in Perth!
11 Smith Street
58 & 88 Changed St

...you would instead code it like this gob of meaningless gunk:

WoodCentre
250 Latin Street
El Changeo
2 Changed Ave
Changewood Facilities
Active Project
Park in Perth<
11 Smith Street
58 & 88 Changed St
/div>

Then you could style it like this:
div.locationArrow div { background: transparent url(vert-line.gif) 0 0 
repeat-y; }
div.active { background: transparent url(arrow-thing.gif) 0 0 
no-repeat; }
div.active div { background:none; }

--
Ben Curtis : webwright
bivia : a personal web studio
http://www.bivia.com
v: (818) 507-6613

**
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] navigation using arrows for location

[Rob Mientjes]

On Fri, 4 Mar 2005 08:04:46 +1100, Peter Ottery
<[EMAIL PROTECTED]> wrote:
> As you can see, the vertical lines are the catch am trying to think
> 'outside the square' to solve the prob but I cant see how you could do it
> without an id on every and li. I made "Archive" active in the first list to
> show how the need for the vertical line to go up *or* down to point to the
> next list complicates the issue. 

I have this idea of overlapping ULs and LIs that will display or hide
the red line. But it's hard to even visualise :(

> I'm not going to kill myself over this one. Potentially the best solution is
> to put some background images on the parent div that just show vertical
> lines that go all the way from the top to the bottom between the lists,
> which would still give the impression of "drilling down through a hierarchy"
> type of thing. Would be sweet if we could get it working tho :) 

Totally.
-- 
Cheers,
Rob.

http://zooibaai.nl  |  http://digital-proof.org  |  http://chancecube.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] navigation using arrows for location

[Peter Ottery]

hi there,

  Pete originally 
  said:so 
  I've designed myself a nice looking navigation scheme that displays visually 
  whereabouts you are within a site.Now I just need to work out how to sort 
  out the css :)http://c41.com.au/test/sample_nav.gif
   
  then Rob said:That's pretty. Pretty smart 
  stuff.I've some things in my head. Give it a shot, and if you don't 
  succeed,don't hesitate to ask.
thanks - had a chat to some of the 
guys at the WSG Sydney meeting last night. If you put an ID on every li you 
could achieve the result I'm sure, but the many, many, background images 
and overly complicated css would make the solution not very workable. Starts to 
feel like a ye olde table building method. If it is used on a clients 
site they should be able to add some extra li's and it should still hold 
together.
 
I've had a play with some css and arrived 
at this:
http://c41.com.au/test/nav_test.html
(shows gif 
original concept and the new html version using 1 'sprite' [1] gif for the 
arrows/lines)
 
As you can see, 
the vertical lines are the catch am trying to think 'outside the square' to 
solve the prob but I cant see how you could do it without an id on every and li. 
I made "Archive" active in the first list to show how the need for the vertical 
line to go up *or* down to point to the next list complicates the 
issue.
 
I'm not going to 
kill myself over this one. Potentially the best solution is to put some 
background images on the parent div that just show vertical lines that go all 
the way from the top to the bottom between the lists, which would still give the 
impression of "drilling down through a hierarchy" type of thing. Would be sweet 
if we could get it working tho :)
 
any ideas, wacky 
or otherwise, appreciated.
 
pete
 
[1] http://www.alistapart.com/articles/sprites/

Re: [WSG] navigation using arrows for location

[Rob Mientjes]

On Wed, 2 Mar 2005 09:18:18 +1100, Peter Ottery
<[EMAIL PROTECTED]> wrote:
> so I've designed myself a nice looking navigation scheme that displays
> visually whereabouts you are within a site. 

That's pretty. Pretty smart stuff.

> Now I just need to work out how to sort out the css :) 

I've some things in my head. Give it a shot, and if you don't succeed,
don't hesitate to ask.
-- 
Cheers,
Rob.

http://zooibaai.nl  |  http://digital-proof.org  |  http://chancecube.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] navigation using arrows for location

[Dave O'Brien]

The navigation looks pretty good; started laying out a concept, still
a fair bit to do however and will have a go finishing off when I can
over the next few days.

Am shattered so enough said.

Dave

On Wed, 2 Mar 2005 09:18:18 +1100, Peter Ottery
<[EMAIL PROTECTED]> wrote:
>  
> so I've designed myself a nice looking navigation scheme that displays
> visually whereabouts you are within a site. 
>   
> Now I just need to work out how to sort out the css :) 
>   
> Here's what I want it to look like: 
>   
> http://c41.com.au/test/sample_nav.gif 
>   
> I'm *not* after any dynamic or popout (suckerfish [1]) type functions. 
> Essentially the tricky bit is going to be the light red lines/arrows and
> working out how to get them in the right spot. ie: so they'll adjust to line
> up with the section you are in. 
> There's also going to be content below this navigation, so if one of the
> lists grew really long it should push down the content (ie: may rule out
> absolute positioning) 
>   
> Wondering if anyone has some immediate ideas or even has a similar
> example..? 
>   
> Ideally I'd imagine the html should look something like this: 
>   
>  
> By Expertise 
> 
>  
> Architecture 
>   
>  
> WoodCentre 
> 250 Latin Street 
> El Changeo 
> 2 Changed Ave 
> Changewood Facilities 
> Active Project 
> Park in Perth! 
> 11 Smith Street 
> 58 & 88 Changed St 
>  
>   
>  
> Interior Design 
> Urban + landscape design 
> Heritage conservation 
> Consulting 
>  
>   
>  
> By Location 
> Archive 
>  
>   
> any thoughts or help appreciated, 
> pete 
>   
>   
> [1] - http://www.alistapart.com/articles/dropdowns/ 


-- 
Dave O'Brien

Venting my spleen at:
http://www.ventingspleen.co.uk

Developing my web at:
http://www.thewebdeveloper.net
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

[WSG] navigation using arrows for location

[Peter Ottery]

so I've designed 
myself a nice looking navigation scheme that displays visually whereabouts you 
are within a site.
 
Now I just need to 
work out how to sort out the css :)
 
Here's what I want 
it to look like:
 
http://c41.com.au/test/sample_nav.gif
 
I'm *not* after any 
dynamic or popout (suckerfish [1]) type functions.
Essentially the 
tricky bit is going to be the light red lines/arrows and working out how to get 
them in the right spot. ie: so they'll adjust to line up with the section you 
are in.
There's also going 
to be content below this navigation, so if one of the lists grew really long it 
should push down the content (ie: may rule out absolute 
positioning)
 
Wondering if anyone 
has some immediate ideas or even has a similar example..?
 
Ideally I'd imagine 
the html should look something like this:
 

By Expertise
    
    

    Architecture
 
    
    
WoodCentre
    
250 Latin 
Street
    El 
Changeo
    2 
Changed 
Ave
    
Changewood 
Facilities
    Active 
Project
    
Park in 
Perth!
 
    11 
Smith 
Street
    58 
& 88 Changed 
St
    

 
    

    Interior 
Design
    Urban + landscape 
design
    Heritage 
conservation
    
Consulting
    

 

By 
Location
Archive

 
any thoughts or help 
appreciated,
pete
 
 
[1] - http://www.alistapart.com/articles/dropdowns/