Menu Options

Read the sections below for more information about menu style options for your website. At the bottom of the page, you can see the four main menu layout options in action.

Button Formats

There are two button formats that can be used, Text and Graphic.

Text Buttons

Text buttons (like you see in the menu at the left of this page) are plain and simpler. They adjust to fit the space on the page and are well suited to pages that have flexible width. There are many options that can be applied such as background color, background image, text color, and the colors that are used when you hover over them with a mouse. In short, they are the most flexible button option, which makes them the most popular. Also, if would like the option to change the menu, you can do it yourself without the need for special software (you just edit the HTML code for the page),

Graphic buttons

As the name implies, these buttons use images to show the menu item. These buttons will be a fixed size, so on a page with flexible width, they will not shrink in size when needed . For this reason, graphic buttons should only be used on a page with a fixed page width. This style of button is very popular and there is an endless assortment of buttons available. Keep in mind that if you want to create a new button, you will need the original software (and settings) that were used when the buttons were made.

Menu Layouts

The two menu layout styles are horizontal and vertical.

Horizontal Menus

Horizontal menus are great for putting at the top of the page where you want to see the buttons beside each other. They are often used on a 1 column page layout when there are only a few buttons used in the menu.

Vertical Menus

Vertical menus show buttons one on top of the other and are usually seen on 2 or 3 column page layouts. They are also useful when you have more buttons that need to be shown.

More Layout Options

You can add empty space between buttons if you would like to see a little separation between the buttons on your page.

Specialty Menus

There are plenty of custom menu applications available. While we don't support most custom menus, one we do offer is the SPRY menu created by Adobe. This is a great way to have nested menus that "flyout". Be aware that these menus only work well if your visitor is using a mouse - which is often NOT the case if your visitor is using a smartphone or tablet to view your site.

---

Interactive Demonstration of the Four Most Common Menu Layouts

Vertical Text Menu

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Longer Menu Item Name

 

Horizontal Text Menu

• Item 1
• Item 2
• Item 3
• Item 4

 

Vertical Spry Menu

• Item 1
  • Item 1.1
  • Item 1.2
  • Item 1.3
• Item 2
• Item 3
  • Item 3.1
    • Item 3.1.1
    • Item 3.1.2
  • Item 3.2
  • Item 3.3
• Item 4

 

 

Horizontal Spry Menu

• Item 1
  • Item 1.1
  • Item 1.2
  • Item 1.3
• Item 2
• Item 3
  • Item 3.1
    • Item 3.1.1
    • Item 3.1.2
  • Item 3.2
  • Item 3.3
• Item 4