Ajatix Expression Web CSS Menu Add-ins
Ajatix, the maker of the Lightbox Expression Web add-in also has two add-ins for creating menus:
Both products offer a 15 day fully functional trial so that you can try it and see if it will work for you. Ajatix also has a 60 day no-questions-asked full money-back guarantee.
You can also purchase Complete Pack of Expression Web Add-Ins which includes all Expression Web add-ins: Advanced CSS Drop Down Menu, Pure CSS Drop Down Menu, and the Lightbox.
System requirements for Ajatix CSS Menu add-ins
- Microsoft Windows 8, 7, Vista, XP, 2000
- Microsoft Expression Web 4, 3(SP2), 2, 1
- Microsoft FrontPage 2003, 2002, 2000
You can create both vertical and horizontal menus with drop downs or flyouts.
Buy Now: Advanced CSS Drop Down Menu
Download Trial: Advanced CSS Drop Down Menu
Product Page: Advanced CSS Drop Down Menu
Pure CSS Menu is no longer available. It has been combined into Advanced CSS Drop Down Menu 3.
- Ocean Site Template uses Ajatix Advanced CSS Drop Down Menu
Installing Ajatix Expression Web CSS Menu Add-ins
Expression Web Add-ins are easy to install. You can find detailed instructions for Installing Expression Web 4 Add-ins. Installing either of the CSS menu add-ins to version 4 made them available for all versions of Expression Web and FrontPage 2003 on my computer. These Expression Web add-ins will let you add a great-looking css drop down menus or vertical flyouts without writing a single line of code.
How to use the CSS Drop Down Menu Add-in
Once you have installed either or both add-ins, they will be available from your 'Insert' menu in Expression Web 4 or from the "Ajatix' toolbar.
View Screenshot of Insert menu
View Screenshot Ajatix toolbar
Step 1: Launch Expression Web and open the page where you wish to insert the menu. Place the cursor into a position on page where you want the menu to be inserted. From the 'Insert' menu, select 'Ajatix' and 'Advanced CSS Drop Down Menu' or 'Pure CSS Drop Down Menu.' Select either 'Create a new menu' or 'Insert an existing menu.'
Step 2: You will be presented with a number of preset themes. Select the one that most closely meets your desired design and click 'Apply.'
Step 3: In the 'New Menu' dialog box, compose your menu structure using Add, Delete, and Move buttons under the menu structure treeview. Enter
- Text: the text you wish to appear on the menu.
- Link: the url for the menu page you wish to link to.
- Title: Short descriptive screen tip for the menu item.
- Target: make your selection from the dropdown or leave blank.
Step 4: Customize your menu design using the 'Style Editor' tab changing colors, images, borders, text settings, etc.
Step 5: The real-time preview window allows you to see what the menu looks like as you edit it. Any change in menu style or structure is immediately reflected in the preview window. Move the mouse over the menu to see how items look on mouseover and to open submenus. When you have completed the menu click 'OK.'
Step 6: Save the menu into a CSS file by selecting the Save command in the File menu. Select the location and the name of the CSS file and click on the Save button.
Step 7: Click 'OK' to finish working with the menu and close the Ajatix CSS Drop Down menu add-in.
Step 8: Look at your page in 'Split View' and you will see an unordered list-based markup of the menu in the 'Code' window of Expression Web and a WYSIWYG view of the menu in the 'Design' view.
Editing Your Menu
If you need to edit your menu, the 'Menu Editor' tab is where you make changes to the menu structure and individual items.
Using the buttons located under the menu structure treeview, you can Add new items, Remove items, Move items up or down, Move items to the left or right.
If you need to your CSS menu style switch to the 'Style Editor' tab.
Step 1: Edit the 'Global' behavior of your menu. I leave these three set at the default setting.
- Z-index which specifies the stack level of the menu. Default is set at 100.
- Submenu Show Delay - This setting specifies delay between pausing the mouse pointer over a menu item and opening of the dropdown submenu associated with the item. The delay prevents unintended opening and closing of dropdowns when the mouse is moving over items fast enough. Avoiding flickering of dropdowns improves user experience. Default is set at 160 milliseconds.
- Submenu Hide Delay - This setting specifies delay between moving the mouse pointer off the menu and closing of dropdown submenus (milliseconds). The delay prevents accidental closing of dropdowns on user mouse movement errors.
Step 2: Editing Levels is where you can select either the Top Menu or Submenu which then gives you access to the corresponding level settings. Top Menu settings are applied to the topmost level of the menu. Submenu settings are applied to all submenus, also known as dropdowns for horizontal menus or flyouts for vertical menus. You can see how the changes you make affect you menu within the Preview window.
- Editing Level Layout gives you access to the layout settings for the Top menu level or the Submenu. The settings you can change include:
- Orientation defines orientation of the level. The top level can either be Horizontal or Vertical. However, submenus are always vertical.
- Width specifies the way the level width is determined. The following settings are available for a horizontally oriented level:
- None No width property is applied to the menu.
- Fixed The menu width will be set to the number specified.
- Min The menu width will be no less than the number specified. 100% The menu width will be set to 100%.
- Auto The menu width will be determined by the items width.
- Menu align specifies how the menu is aligned horizontally - centered, left- or right-aligned.
- Items align specifies items alignment within the menu - centered, left- or right-aligned within the menu.
- Sublevel Offset allows you to adjust positioning of sublevels relative to the level. When offset values are set to 0, sublevels are open side-by-side to parent levels with no gap or overlap, and items in sublevels are aligned with items in parent levels. Change sublevel offset values to adjust position of sublevels (e.g. to make sublevels overlap parent menus).
- Editing Level Style gives you access to the style settings for the Top Menu or Submenu panel.
- Background specifies the background color and image of the level.
- Align specifies how the background image of the top menu or a drop down menu is aligned horizontally and vertically.
- Repeat specifies whether the background image of the menu level is repeated (tiled), and if so, how. The image can be repeated horizontally, vertically, in both directions or not repeated.
- Border turns the border around the entire level on and off and sets its color.
- Editing Level Animation allows you can apply different opening animation effects to submenus. I ten to leave these at the default settings for the menu I have selected.
Step 3: Editing Items Style allows you to you define the properties common to all items of the Top Menu or Submenu items. As you make changes to the styles, make sure you notice what happens in the preview window.
- Specifying Items Size and Position - I tend to leave these settings at the default.
- Width specifies the width of the items. For a horizontally oriented level the width setting can either be on or off. When off, the width of each item will automatically adjust to the space taken by text inside this particular item. When on, all items will have same explicitly defined width. In vertical levels all items have same width that should be defined explicitly.
- Height specifies the height of the items. When off, the height of the items is set automatically based on the font size. When on, the height is set to the specified value.
- Padding specifies interval between the group of all items and the outer boundary of the menu.
- Spacing specifies interval between items. Overlap child dropdown This option allows items to overlap their child dropdowns.
- Overlap child dropdown allows items to overlap their child dropdowns.
- Specifying Items Colors
- Item color defines the color of the item's background.
- Text color defines the color of the item's text.
- Border color allows you to turn the item's border on and off and defines its color.
- Normal and Mouseover colors allow you to define different sets of colors for the normal and for the mouseover states of items. Colors of an item will switch to the mouseover values when the mouse is over it, and back to normal when the mouse is off.
- Current page colors specifies colors for a menu item corresponding to the current page. You can highlight a menu item linking to the page currently viewed by a visitor by specifying Current colors.
- Setting Items Images - Menu items can be purely text-based, or optionally have background images. Some menu designs may use arrow images to distinguish items with submenus, others may use button or tab images for the entire item.
- Normal Images for the normal state (mouse off) of items.
- Over Images for the mouseover state of items.
- Current Images for an item corresponding to the page currently viewed by a visitor ("You are here" images).
- Item without Submenu Images for items without corresponding submenus.
- Item with Submenu Images for items with submenus.
- Align specifies how images are aligned in an item.
- Repeat specifies whether or not the images should be repeated. If set, the images will be be repeated both vertically and horizontally.
- Use Sliding Doors Technique which allows you to use a single image for items having different widths. All you have to do is select an image wide enough to fit the widest item in the menu level.
- Specifying Items Text Style
- Font specifies the font face.
- Size defines the font size in pixels.
- Bold, Italic, Underline specifies text weight, style, and decoration for normal and mouseover states.
- Transform controls capitalization effect of the text.
- None means no capitalization effect is used.
- Capitalize transforms the first character of each word to uppercase. Other characters are unaffected.
- Uppercase transforms all characters to uppercase.
- Lowercase transforms all characters to lowercase.
- Align specifies text alignment within items to be either left or right-aligned, or centered.
- Wrap long text lines will cause long text lines to be wrapped to fit into item's width if set.
- Paddings specifies left and right paddings for text within items. Separate settings for items with submenu allow to reserve some extra space for such images, as arrows.
Make sure you keep an eye on the Preview window to see what effects your changing the settings makes in your menu. Once you have made all the changes and saved the changes, preview your menus in the various browsers at various resolutions.