June 2009 Meeting Report: Adding Up the Menu Options

At our June meeting, we discussed the elements of navigation menus and then saw how those elements worked on some sample menus.

We first considered the HTML foundation for a menu. Looking at a couple of major sites, we saw that the unordered list seems to be the most accepted format, but a simple sentence list is often used for secondary menus, like footers. Compare the White House site with the New York Times. Load them in Firefox, turn off styles, and check the actual HTML of the different navigation sections, both in body and in footer.

We then looked at the below online tutorials to see how menus can be styled with just CSS and no graphics.

Horizontal Navigation using list property - two methods

Button effect with only background colors

Next season, we will continue with using graphics, as illustrated in this Web Designer Wall tutorial that we looked at briefly.

June Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, June 20, at 9 to 10 am.

At this session, we will bring together the different elements of navigation styling that we have discussed this season. We will sum up where we have been, and then show how to use CSS to make navigation menus that are attractive as well as functional. Along the way, we will raise another of our web design philosophical questions, so you will have something to ponder while hanging at the Wildwoods this summer.

It will be a grand finale, so don't miss it.

May 2009 Meeting Report: Building Blocks of Nav Menus

At our May meeting, we returned to the topic of styling navigation menus, a topic we have been covering throughout this year.

This month we looked at the CSS properties that I think are keys to creating attractive menus. Those properties include

• pseudo-selectors, using the LoVeHA order;


• display:, both block and inline-block, the latter being increasingly supported by browsers;


• list-style, particularly list-style-type:none;


• background, both color and image;


• position.

And to get really creative, image editing for creating background images.

May Meeting Announcement

The next session of the PACS CSS Workshop will be held this Saturday, May 16, at the usual 9 - 10 am hour.

We will get back to the subject of navigation menus by looking at the building blocks of good navigation styling and considering some issues that come up in designing a navigation system.

We will also cover a couple of other topics of interest related to web design, as well as anything else that comes up in discussion.

30 Exceptional CSS Navigation Techniques

Since we have been talking about CSS navigation this year, I think this article from Six Revisions will be of interest. Many of the examples are from websites where you can find even more ideas. We'll see if we can work through some of these approaches to navigation in coming meetings.