List Navigation CSS

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.

1. [url]http://www.lakemount.ca/go/ministry/overview/[/url]
2. 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.

quote

To add the rollover and "clicked" states, add the following styles to your stylesheet:

(this is assuming that you have used a class to style the container list)

ul.nav{ margin: 0; padding: 0; }

li.nav{ margin: 0; padding: 0; list-style-type: none; }

Okay, that takes care of the list, so it doesn’t look so list-like. Now on to define the shape and behavior of the links themselves. We are using display: block to make the entire shape of the resulting "button" clickable, not just the text itself.

.nav a{ display: block; padding: 3px 6px 3px 6px; border-bottom: 1px solid #ccc; color: #fff; text-decoration: none; background-color: #333; }

This makes the links in your "nav" list have a shape, a bottom border, and take up the entire width of whatever container they find themselves in. They are dark gray background, pale gray stripe below, and white text.

So now you want to add the link :hover attribute:

.nav a:hover{ background-color: #ccf; color: #333; }

This makes the background change to pale purple, and the text to dark gray when you roll over the link. Note that none of the rest of the style has to be sketched in, as it is inherited from the generic a (anchor) definition.

Now you are asking about a "clicked" state — by this, are you meaning the "you are here" sort of state? If so, then you could do this:

.nav a.here{ font-weight: bold; backround-color: #669; }

Which would give you bold text on a medium-dark purple background. To apply this style you need to extend the link you want to be lit up with class="here", and you would need to do this on each page to show which is the current page.

Hope this helps,

Walter

On Dec 31, 2006, at 5:47 PM, Helveticus wrote:

[quote:a525d71d89]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.

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

---

FreeWay 4.3.2 Pro | Powerbook 15" | OS X 10.4.8 Computer design is often merely bad design done on a computer – Mike Hicks

[/quote:a525d71d89]

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

quote

Hi Walter - wonderful explanation, just a small correction…

I don’t think li.nav will work unless the list elements are also given the class style ‘nav’, something very hard to do in Freeway 4 Pro. Listed as .nav li would cause the list items that are in the .nav styled container to accept the styling.

Also, list-style works as well as list-style-type. There must be some confusion as I started out lists with the longer version too, but have seen so many examples of the shorter version that my naturally exuberant laziness has prompted me to adopt it.

waltd wrote:

[quote:d00b0d98d0]li.nav{ margin: 0; padding: 0; list-style-type: none; [/quote:d00b0d98d0]

Ernie Simpson — Freeway 4 Pro User — http://www.thebigerns.com/freeway/

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

quote

I have a working prototype of this here — except for the fact that I mis-spelled background-color in the .here state, it does do exactly what is asked of it. But maybe this is just Safari being "nice" to me. A better way to code the li, then, would be:

ul.nav li{ … }

That can be done in Freeway without any trouble.

Walter

On Dec 31, 2006, at 8:30 PM, The Big Erns wrote:

[quote:6a0c0c4434]Hi Walter - wonderful explanation, just a small correction…

I don’t think li.nav will work unless the list elements are also given the class style ‘nav’, something very hard to do in Freeway 4 Pro. Listed as .nav li would cause the list items that are in the .nav styled container to accept the styling.

Also, list-style works as well as list-style-type. There must be some confusion as I started out lists with the longer version too, but have seen so many examples of the shorter version that my naturally exuberant laziness has prompted me to adopt it.

waltd wrote:

[quote:6a0c0c4434]li.nav{ margin: 0; padding: 0; list-style-type: none;

[/quote:6a0c0c4434]

Ernie Simpson — Freeway 4 Pro User — http://www.thebigerns.com/freeway/

---

Ernie Simpson Freeway 4 Pro User http://www.thebigerns.com/freeway/

[/quote:6a0c0c4434]

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

quote

Walt, I’m sure your prototype looks fine, but how can you be sure li.nav is actually working? Humor me for a sec, and add an attribute like {color:red} or {text-transform:uppercase} to the li.nav style. Nothing happens. That’s because there are no list items that have the .nav class applied to them.

For WinIE you WILL need the list elements to be margin-less and pad-less… and you are correct that ( ul.nav li ) will do a better job. In plain englishâ„¢ it’s the same as saying "all list elements in un-ordered lists that are styled with the .nav class". My earlier suggestion of ( .nav li ) is less specific but also works, translated into plainspeak as "all list elements contained in any kind of element that are styled with the .nav class."

I wish there was an easy-to-follow discussion of the conventions of style-name parsing, as my pidgeon-CSS-speak makes me feel that I am back in language class. :-)

waltd wrote: [quote:09e59b1510]I have a working prototype of this here — except for the fact that I mis-spelled background-color in the .here state, it does do exactly what is asked of it. But maybe this is just Safari being "nice" to me. A better way to code the li, then, would be:

ul.nav li{ … }

That can be done in Freeway without any trouble. [/quote:09e59b1510]

Ernie Simpson — Freeway 4 Pro User — http://www.thebigerns.com/freeway/

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

quote

You are absolutely correct. The only thing that was going on in li.nav was the list-style[-type] and that was moot because the container had padding set to 0. So bullets there might have been, but any bullets were shifted outside the container and were thus invisible.

I tried your color:red thing and got (predictably) nothing happening to text outside of the styled anchor.

Walter

On Jan 1, 2007, at 2:24 PM, The Big Erns wrote:

[quote:396988e63a]Walt, I’m sure your prototype looks fine, but how can you be sure li.nav is actually working? Humor me for a sec, and add an attribute like {color:red} or {text-transform:uppercase} to the li.nav style. Nothing happens. That’s because there are no list items that have the .nav class applied to them.[/quote:396988e63a]

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

quote

Walt, Ernie Thanks for all the info, this is truly fascinating stuff, I’m on my way experimenting I also found Paula Petrik’s site with a tutorial [url]http://www.archiva.net/pdf/fw_tutorial.pdf[/url] Marcel

quote

Here is some follow-up on this topic: [url]http://www.thebigerns.com/freeway/vertical_listnav/index.html[/url]

quote

Thanks Ern,  That is a real gift to us. I really appreciate all the help  you’ve been giving us on CSS and Freeway Pro. 

I’m finally redesigning my portfolio site, which was originally  built in Dreamweaver, and is long overdue for an overhaul in  my favorite software (Freeway Pro). I will definitely be referring  to your wonderful training materials while building. 

~ Bill McEntee  Easton, MA USA (soon to change site: [url=http://billmcentee.com]http://billmcentee.com[/url]) 

On Jan 7, 2007, at 10:21 PM, The Big Erns wrote: [quote:4fba383c8e]Here is some follow-up on this topic: [url=http://www.thebigerns.com/freeway/vertical_listnav/index.html]http://www.thebigerns.com/freeway/vertical_listnav/index.html[/url]

---

Ernie Simpson Freeway 4 Pro User [url=http://www.thebigerns.com/freeway/]http://www.thebigerns.com/freeway/[/url]

—————————— m2f ——————————

This message was sent from [url=http://www.freewaytalk.net]www.freewaytalk.net[/url]

Read this topic online here: [url=http://www.freewaytalk.net/viewtopic.php?p=7130#7130]http://www.freewaytalk.net/viewtopic.php?p=7130#7130[/url]

—————————— m2f ——————————

[/quote:4fba383c8e]

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

quote

[quote:a6dd69c052]Here is some follow-up on this topic: http://www.thebigerns.com/freeway/vertical_listnav/index.html[/quote:a6dd69c052]

A superb clear walkthrough -should be on the Softpress site and linked fron the Tutorials section as should all your great examples.

Often I turn to hand coding rather than using Freeway for CSS simply because I have to take my knowledge of css and twist it back again to the way Freeway implements it. Your tutorials are always a great time saver.

Can we call you Daddy?

quote

Erns in your uploaded example I’m intrigued by your use of the definition list and the mark up etc.

[quote:bb680eccfd]Here is some follow-up on this topic: http://www.thebigerns.com/freeway/vertical_listnav/index.html[/quote:bb680eccfd]

Hand coding this is straight forward but the Freeway trickery eludes me slightly.

Your first inline mark-up defines a definition term, but how does Freeway know that the class you’ve applied to the list should be marked as dl e.g <dl class="deflist"> ? Freeway has also closed the html mark-up for the whole list without you adding this</dl>

Does Freeway auto complete start and end tags to complete the requirements of valid xhtml?

Is it easier to add such lists as mark-up including the span class mark-up rather than this method?

Finally at the bottom you have an action called "remove div style" I’m not familiar with this - what does it do pray tell?

Hold up - a definition list is an unbulleted list, which is what you’ve applied and by marking up the definition term what follows then becomes a <dd> rather than automatically being a <dt> as it would if you hadn’t added the mark-up- oops, I’m with it now.

PC

quote

[quote:23be4b98c2=”Percival Cheesehead”]Erns in your uploaded example I’m intrigued by your use of the definition list and the mark up etc.[/quote:23be4b98c2] I’ve started a new thread to answer (some of) your questions: [url]http://www.freewaytalk.net/viewtopic.php?p=7302#7302[/url]

Best wishes —

quote

Ernie, I have used your wonderful tutorial to create a menu on one of my websites. The only problem I have is that if you place the div containing the list on a coloured background a gap appears at the top of the menu. This is problematic if you want to butt the top of the menu up against the top of the page or against another page element. I can post an example if you are interested.

Edited to add; Just figured out how to get rid of the space at the top;

Add:- Paragraph: Space before: 0px

to the .navlist CSS attributes.

Feels good when you work something out for yourself.

quote

Yes, please — post an example and we’ll figure it out. :-)

ralfy wrote: [quote:a55f68c8a3]Ernie, I have used your wonderful tutorial to create a menu on one of my websites. The only problem I have is that if you place the div containing the list on a coloured background a gap appears at the top of the menu. This is problematic if you want to butt the top of the menu up against the top of the page or against another page element. I can post an example if you are interested.[/quote:a55f68c8a3]

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

quote

Here are the 2 examples. In the second one I have added;

Add:- Paragraph: Space before: 0px

to the .navlist CSS attributes.

Example 1 [url]http://liquid-design.com/freeway/example1/example1.html[/url]

Example 2 [url]http://liquid-design.com/freeway/example2/example2.html[/url]

quote

Does the second example fix what you needed?

Remember that an HTML List is composed of at least two things — the list items and the list itself — which is a kind of virtual ‘box’ or container for the list items. Both the List and the List Items can have padding, margin, width, etc., all controlled through the extended Style attributes in the Edit Styles window.

Since I recommended a margin-left and padding-left attribute setting of zero to combat IE’s mis-measurement, you could also just set the whole margin and padding to zero to save time. You may also want to delete the height of the div/html box the list is in, as IE6 seems to incorrectly add some space at the bottom of the list too. Or just make the box transparent.

Nice work :-)

ralfy wrote: [quote:3ee95a4541]Here are the 2 examples. In the second one I have added;

Add:- Paragraph: Space before: 0px

to the .navlist CSS attributes.

Example 1 http://liquid-design.com/freeway/example1/example1.html

Example 2 http://liquid-design.com/freeway/example2/example2.html[/quote:3ee95a4541]

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

quote

[quote:57cd995174=”The Big Erns”]Here is some follow-up on this topic: [url]http://www.thebigerns.com/freeway/vertical_listnav/index.html[/url][/quote:57cd995174]

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

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]

quote

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

quote

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.

quote

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?

OR

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?

quote

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

quote

[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]

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.

quote

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.

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.

quote

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.

quote

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

quote

[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/

quote