Ajatix Advanced CSS Drop Down Menu 5

Revised and Updated: September 2016

Ajatix, the maker of the Lightbox Expression Web add-in also has an add-in for creating menus.

Ajatix Advanced CSS Drop Down Menu 5 allows you to create professional responsive touch-enabled CSS drop down menus in a few easy steps.

This powerful Expression Web Add-in completely automates the process of creating and managing professional horizontal and vertical CSS drop down menus.

Ajatix offers 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.

System requirements for Ajatix Advanced CSS Drop Down Menu 5 add-in

• Microsoft Windows 10, 8, 7, Vista, XP, 2000
• Microsoft Expression Web (all versions)
• Microsoft FrontPage 2003, 2002, 2000

The Advanced CSS Drop Down Menu Expression Web add-in completely automates the process of creating and managing professional horizontal and vertical CSS drop down menus. The menus are based on popular and most widely accepted jQuery / Suckerfish CSS dropdown menu techniques, and enhanced with JavaScript behaviors, this CSS menu guarantees the highest level of compatibility, accessibility and user experience across devices. The CSS menus are accessible and comply with W3C Web Content Accessibility Guidelines. Advanced support of touch devices - designed for top-notch user experience on iPhone, iPad, Android, and other touch devices. Now enhanced with Tap Away to Close feature.

You can create both vertical and horizontal menus with multi-level drop downs or flyouts.

Price: $79.95

Buy Now: Advanced CSS Menu 5 - Expression Web Add-In

Download Trial: Advanced CSS Menu 5 - Expression Web Add-In

Product Page: Product Website

Buy Now: You can also purchase the Complete Pack of Expression Web Add-Ins which includes  all Expression Web add-ins: Advanced CSS Drop Down Menu 5,  Lightbox 4, Image / Banner Slider 4, Maps & Directions 2, and Email Spam Blocker 2.

Advanced CSS Menu 5 Light - Free Expression Web Add-In The free version does NOT include all of the features of the Advanced version

Menu Examples

• Oxford Urban Wildlife Group (Sample Site Only uses multi-level horizontal dropdown menu)
• Ocean Site Template (uses simple one level top 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 the add-in, it 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'.  Select either 'Create a new menu' or 'Insert an existing menu.'

NOTE: If you already have a menu that you created in list form, you can select File > Import Menu Structure. The add-in will find all nested lists in the document and will prompt you to select the menu you want to import. Select the menu and click OK.  I found this works very nicely BUT I did clean up any applied styles BEFORE importing the menu. You will need to first open the document where the menu you want to import is located.

View Screenshot

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.' Ajatix CSS Drop Down Menus are fully customizable, you will have a chance to change the menu look, or apply a different preset theme of the menu any time later on.

View Screenshot

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.

You can enter information for each individual item as you populate the menu, or you can do this later.

View Screenshot

You will be able to Live Preview your menu in both the desktop and mobile view.

View Screenshot

Step 4: Customize your menu design using the 'Style Editor' tab changing colors, images, borders, text settings, etc. You can view more details in the section Editing Your Menu.

NOTE: I tend to create the entire menu first BEFORE I start editing any of the styles.

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. Make sure you are chcking both the mobile and desktop preview. 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. If your plan on using more than one menu on your site, make sure to give each one a distinctive name so that you can tell them apart and don't overwrite one or the other.

View Screenshot

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.

View Screenshot

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.

View Screenshot

If you need to edit your CSS menu style sheet switch to the 'Style Editor' tab.

Step 1: Edit the 'Global' behavior of your menu. I leave these three set at the default setting. View Screenshot

• Z-index which specifies the stack level of the menu. Default is set at 100.
• Submenu Show - 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.
• Submenu Hide - 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.

Responsive & Mobile group of settings allows to edit the menu appearance on narrow screen devices.

• 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 color specifies the background color of the level. NOTE: If your menu is already inserted in a page rather then an include, you will be able to use the color picker to select colors from the images on your page.
  • Border turns the border around the whole level on and off and sets its color.
  • Shadow when on, the corresponding level will cast shadow.
  • Background image allowd for a user provided image to be used as the level's background.
  • Image Custom background image.
  • 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, or none directions.
  • Rounded corners when checked enables rounded corners for the level.
  • Radius sets the radius of the corners.
• Editing Level Animation allows you can apply different opening animation effects to submenus. I tend to leave these at the default settings for the menu I have selected.
• Switch to the Responsive tab of the Responsive & Mobile panel to access Responsive settings. View Screenshot
  • Collapse on narrow screens if set, the menu will collapse into a bar with a responsive menu icon on narrow screen devices, e.g. phones. Tapping the menu icon will reveal a slide-down menu.
  • Collapse width specifies the maximum window width at which the menu will be displayed in the narrow mode. NOTE: The default is 480px which is not enough for larger phones and small tables. I changed this to 680px.
  • Background defines the background color of the menu in the narrow mode.
  • Border defines the color of border around the menu.
  • Radius specifies the corner radius.
  • Menu Icon:
    • Size of the menu symbol on the menu bar.
    • Color of the menu symbol.
    • Align specifies the location of the menu symbol on the menu bar.
    • Caption specifies whether the text caption should appear on the collapsed bar, and if so, the text of the caption. You can specify the Font size of the caption on the menu bar, the text color of the caption, and align specifies the location of the caption on the menu bar.

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.