CSS Navigation Styling

By CRAIG KUNCE

I love the clean, elegant and speedy performance of navigation styled with CSS. I like to use Dreamweaver's library elements to create my lists, and then style them with css on my page. Updating is a breeze and allows me to maintain my 160-page web site by myself. If you haven't used library items in Deamweaver, give them a try. I link to an article on them in my left nav. Special thanks to my colleague Eddie who introduced me to css navigation several years ago.

Words of advice…insert your library item(s) when you design your first page. Then as you make new pages simply save-as and the library items will already be inserted into every page. What a time saver. If you already have your web site up and running, you could try a site-wide Find and Replace. I haven't tried it, but I think it might work…?

Horizonal Nav

Here's how the horizontal navigation (above-on this page) works.

First, I created the nav's headings in a Dreamweaver Library item. Here's my library item in dreamweaver's split screen view:

nav library item - split screen

 

a close up of the html code (library item):

nav horizontal css close up

 

Once my library item was complete, I inserted it into the horizontal navigation div, and styled it with the following css:

horz nav css styling

Vertical Navigation

Here's how the vertical navigation (left sidebar of this page) works.

Again, I created the nav's menu in a Dreamweaver library item. Here's my library item in Dreamweaver's split screen view:

vert nav css styling

 

Notice that Web Design is h1 strong, CSS Styling is p strong, and the list items are p. To indent under the CSS Styling heading, I added a space, and two non-breaking spaces (option-space). This is really indenting with non-breaking spaces, which is frowned upon in the coding community, but It seems to work well in this instance, and browsers seem to recognize it just fine. (I'm not sure why the   doesn't show up in the library item's html code. I'll update if/when I find out).

This is all the formatting I do in library items. I've tried to do more, but have found that simple text seems to work best. Once, I tried putting my entire header (rollovers and all) into a library item, but Dreamweaver wasn't having it! Maybe it was too much to process.

Once my library item was complete, I inserted it into the vertical navigation div (#leftnav) on the left side and styled it with the following css:

vert nav css styling

Horizontal Drop-down Navigation

I used to use this type of drop-down menu on my web site, but changed to the current navigation to simplify a bit, and to have everything visible for each category of my site. I also wasn't sure how a touch screen would interact with a drop-down menu. When I am comfortable with it on a touch screen, I may switch back.

Again, I created the library item and then inserted it into a div. My colleague, Eddie, helped me set this one up and troubleshoot it too-special thanks.

 

try it out…

 

 

Here is the library item and html code shown in Dreamweaver's split view:

vert nav css styling

 

And here is the css used to style it:

vert nav css styling