List Navigation CSS

b8 — Sat, 04 Aug 2007 01:14:26 -500

[quote:70cbaa401c=”ctzsnooze”]Hi

something constructive from me for a change :-)

http://th.id.au/chris/multilink/testnav3.html

It’s a fully liquid test page I made, after much effort, to implement full CSS dropdown menus, in horizontal and vertical formats, along with the associated Freeway document to show how it was done. Some Javascript is needed for IE6 but on all modern browsers it should work well using CSS alone.

Chris.[/quote:70cbaa401c]

Hi,

thanks for your document, it is interesting to examine what you did.

I don’t think it is possible at the moment to make a pure CSS dropdownlist in Freeway, while not using javascript, which is working in IE6. IE6 is still the most used browser and it will be for years! :-( I did several attemps but failed every time, the alternative is doing it by handcode and place the list in a markup. The next problem is that you get tired to click the extended box in Freeway when you want to make some changes, stylesheets are made much faster in CSSEdit or Coda.

I made an example for a horizontal dropdownlist, placed in a mark up, that works in IE6 etc, it is based on a list at CSSplay.

You can download it here: http://www.xs4all.nl/~horemans/horizontalnavlist/

List Navigation CSS

waltd — Thu, 02 Aug 2007 13:08:54 -500

I mis-remembered this one. It’s :last-child. It is not supported by IE6, IE7 or IE Mac. More here:

http://www.quirksmode.org/css/firstchild.html

Walter

On Aug 2, 2007, at 3:33 AM, CableGuy2 wrote:

[quote:7674944bbe] waltd wrote: [quote:7674944bbe]It’s :last, not .last. It works in many but not all browsers. Put a colon before the word last. This is similar to how you would code a :hover.

Walter

[/quote:7674944bbe]

So, to make sure i’m getting this…doesn’t sound like rocket science, but I’m back again. Would the style then be "ul.menustylename li:last" or would it be a link style "ul.menustylename li a:last." I can’t seem to figure it out. Also, can you tell me (off the top of your head even) what browsers support this? Because I’m working with IE6, Firefox for Mac and PC, and Safari now and I would want to physically see the change to make sure it was right in the first place.

Thanks.

Freeway 4 Pro User No Freeway update since 12/14/2006

"To know how to suggest is the art of teaching others."

[/quote:7674944bbe]

This list is maintained by Softpress Systems - http://www.softpress.com

List Navigation CSS

ctzsnooze — Thu, 02 Aug 2007 11:03:27 -500

My apologies,

Thanks for the "Remove DIV Tag" action should have been to Weaver:

http://www.coastalrugs.com/Actions/dropbox/div_remover.zip

Sincerely,

Chris.

List Navigation CSS

ctzsnooze — Thu, 02 Aug 2007 10:56:21 -500

something constructive from me for a change :-)

http://th.id.au/chris/multilink/testnav3.html

It actually works great in Safari. Feedback is welcome via the list (not on the appearance or artistic merit of the page, but on technical aspects please). It is intended only to demonstrate what can be done, and how. There are a lot of extended attributes, and most measurements are in ems to keep it liquid. If you’re not deeply into CSS or these things, almost any change, no matter how small, can make it unworkable. Good luck!

Once it’s set up t’s not so difficult to use, and should work in most browsers. If I understood the Javascript bit better (ie it’s a total mystery to me) then both menus could be made to work in IE6, but at present only the horizontal menu is likely to work properly in that browser.

Thanks Paul for the"Remove DIV Tag" action you recently posted on this forum, without which none of this could be done.

Chris.

List Navigation CSS

Dan J — Thu, 02 Aug 2007 07:33:36 -500

[quote:a2f8bae714=”waltd”]It’s :last, not .last. It works in many but not all browsers. Put a colon before the word last. This is similar to how you would code a :hover.

Walter

[/quote:a2f8bae714]

Thanks.

List Navigation CSS

waltd — Wed, 01 Aug 2007 21:29:09 -500

It’s :last, not .last. It works in many but not all browsers. Put a colon before the word last. This is similar to how you would code a :hover.

Walter

On Aug 1, 2007, at 5:14 PM, CableGuy2 wrote:

[quote:7a3df3ee74]So, here’s something I am confused on. How do i get rid of the bottom border on the last item? I guess it would also apply to the horizontal navigation as well, how does one remove any border type on the last menu item?

I read somewhere that you could create a style that was like "ul.menustylename li.last" and it would do it, but it doesn’t seem to work for me.

Any help?

Freeway 4 Pro User No Freeway update since 12/14/2006

"To know how to suggest is the art of teaching others."

[/quote:7a3df3ee74]

This list is maintained by Softpress Systems - http://www.softpress.com

List Navigation CSS

Dan J — Wed, 01 Aug 2007 21:14:51 -500

So, here’s something I am confused on. How do i get rid of the bottom border on the last item? I guess it would also apply to the horizontal navigation as well, how does one remove any border type on the last menu item?

How does one apply a top-border to the first list item only, since all the other’s have border-bottom set?

I read somewhere that you could create a style (in the border-bottom issue) that was like "ul.menustylename li.last" and then set your border to 0, then it would do it, but it doesn’t seem to work for me.

Any help?

List Navigation CSS

ralfy — Wed, 01 Aug 2007 13:29:28 -500

As promised here is the link to the site I designed using Ernie’s List Navigation CSS.

http://www.flexitable.co.uk/

One problem I have is that the Extra Background Action on the ‘Prices & Order Form’ page doesn’t seem to function correctly and leaves a white space t the bottom.

List Navigation CSS

The Big Erns — Tue, 22 May 2007 17:28:00 -500

That’s cool Joe :-) The LA article is good too, though I am hesitant when js is needed to force IE’s behavior (since js can be turned ‘off’ on these browsers). Also, a good test for these types of things to pass are how the flyouts react to elements behind them.

So many cool things. So little time :-)

Joe wrote: [quote:7c061cb51d]I’ve just been having a play around with this and have made a page with the above method + some dropdowns. These, thanks to a bit of Javascript (boo I know, but it’s the only way) work in IE too.

I will try and get either a tutorial or an Action written up so people can use this. I can’t take all credit though, Erns, you gave me the idea and made the menu look as nice as it does and the trickery to get IE to behave came from this great site: http://alistapart.com/articles/horizdropdowns

Feel free to rip apart and use any bits of the page as you like - I would use the Javascript from my page as I had to amend it slightly to get it to behave with some other Freeway created styles.

Here’s the link: http://users.softpress.com/joe/DropdownTest/dropdownTest.html[/quote:7c061cb51d]

This list is maintained by Softpress Systems - http://www.softpress.com

List Navigation CSS

ralfy — Tue, 22 May 2007 15:25:01 -500

The second example is what I needed. In the finished site I will make the box transparent, I just coloured it magenta to show the gap. I will post a link to the site once it is live.

[quote:67fa772ab3=”The Big Erns”]Does the second example fix what you needed?

…Or just make the box transparent.

Nice work :-)[/quote:67fa772ab3]

List Navigation CSS

Helveticus — Sun, 31 Dec 2006 22:47:39 -500

I’m trying to build a navigation list in the left column of my page, I’ve managed to make the list very close to the one in the link 1. below, but I can’t figure out how to do the roll over and clicked states. Is the rollover part of the listnav CSS attribute or must I make a seperate new CSS attribute for each state.

[url]http://www.lakemount.ca/go/ministry/overview/[/url]
I’ve also found this link [url]http://www.ssi-developer.net/css/menu-rollover-effect.shtml[/url] I can figure some of this out but I just do not know enough to make it all work.