Responsive CSS Menu

The latest tutorial from Cheryl Wise, Responsive CSS Menu has just been posted. Cheryl shows you how to create a simple horizontal menu that turns into a stacked vertical menu on cellphones and other small format devices. The tutorial starts with her earlier CSS 3 Horizontal menu tutorial and takes you through the necessary steps to change from the horizontal menu pictured below

Screenshot CSS3 Horizontal Menu.

CSS# Horizontal Menu

to a vertical stacked menu.

Screenshot Vertical Stacked Responsive Menu.

Vertical Stacked Responsive Menu

Read Responsive CSS Menu

CSS3 Horizontal Menu

Cheryl Wise, is the author of the popular and highly recommended Basic Website Tutorial  that walks you through creating a website within Expression Web from images and a Word doc through a completed page layout and the creation of DWT for additional pages. Cheryl has just posted a new tutorial on creating a CSS3 Horizontal Menu using Expression Web. The tutorial is written for EW version 4 but you can use earlier versions you will just have to work directly with the css file for some parts.

The tutorial gives you step-by-step instructions and provides the sample files you will need to create the menu. Besides the basic menu, she gives you the extra steps needed to give it more zing.

Screenshot CSS3 Horizontal Menu.

CSS# Horizontal Menu

The finished menu

The tutorial for CSS3 Horizontal Menu.

If you have any questions about this tutorial you please ask them in the support forum.

Project Seven CSS Express Menus in Expression Web

One of my favorite menus to use is the Project Seven CSS Express Menus. I have quite often recommended this menu it if you need a dropdown menu and as an alternate to some of the commercial Expression Web add-ins. You can see an example of its use on my free Springtime Dynamic Web Template.

Cheryl Wise has posted a tutorial on her by-expression blog Project Seven CSS Express Menus in Expression Web. That same post also includes how to make changes to the graphics that are part of the menu.

CSS Based Menus

If you were not able to attend the Live Meeting today where CSS Based Menus were discussed, you can head on over to Cheryl Wise’s Blog at by-expression.com and download the zip file that contains the tutorials for:

The zip file for the menus contains all of the code as well as a text based tutorial on using the images and code to create three types of menus.  Download it and extract to your hard drive.