Horizontal Menu Advancer Expression Web Add-in

Horizontal Menu Advancer is an add-in for Expression Web from cssmenutools. With the Horizontal Menu Advancer you can build light-weight, SEO-friendly CSS menu navigation faster and easier. This add-in works with Microsoft Expression Web 4, 3, 2, 1 or Microsoft FrontPage 2003.

Download Trial: 15-day full-functional trial version Horizontal Menu Advancer

Buy Now: Horizontal Menu Advancer $59.95

Product Information: Horizontal Menu Advancer

Using Horizontal Menu Advancer

Step 1: Place the cursor into a position on page where you want the menu to be inserted. Select Horizontal Menu Advancer from the CSSMenusTools toolbar OR from the Insert menu, select Horizontal Menu Advancer.

Important Note: Make sure you have saved your page each time before either inserting or editing the menu or you will be reminded to do so before you can proceed.

Screenshot cssmenutools toolbar.

Choose from one of the following:

  • New
  • Open
  • Presets - I will be using Presets for this tutorial.

Screenshot Horizontal Menu Advancer.

Select the desired preset. You can change this design or apply a different preset to your menu later if necessary. Click the Apply button.

Screenshot Horizontal Menu Advancer Preset Preview.

Step 2: Change default menu structure using the Add, Delete, and Move buttons or just change Item text. In the Item tab panel you need to add the information for the following:

  • Text field - Text that will show on the menu button
  • Link field - Page the button is linked to. Use the Link Browse button, or enter the URL. You can use:
    • Absolute links which use the full URL such as http://www.expression-web-tutorials.com/horizontal-menu-advancer.html
    • Site root-relative links such as /horizontal-menu-advancer.html
    • Document-relative links such as horizontal-menu-advancer.html
  • Target field is an optional parameter specifying a frame or browser window where the URL will be opened.
  • Title field - The Tool Tip that shows when the mouse is hovered over the menu item

Screenshot Horizontal Menu Advancer Items menu tab.

You will see the changes you make to the menu in the Preview window. When you have finished adding items to the menu, click Save & Close.

Images used in presets are located outside the site folder. You will receive the Images Location warning message.

Screenshot Location warning.

Select the folder inside your site where you wish to store the images. Click OK.

You will see a list-based markup of the Horizontal Menu Advancer in the Code View window of Expression Web and a WYSIWYG view of the menu in the Design view.

Screenshot Horizontal Menu Advancer Split View.

Preview your page in more than one browser and/or SuperPreview and make sure their are no display issues.

Free Template: Red and Black Site Template which uses the Horizontal Menu Advancer.

Editing Your Menu

If you need to edit your menu, the 'Items' tab is where you make changes to the menu structure and the individual items.

Style Editor tab

The 'Style Editor' tab is where you make changes to the various styles or create new styles.

View Screenshot Style Editor tab

  • Style lets you select the style you wish to edit.
    • Create icon.Create new style.
    • Delete Style icon.Delete style.
    • Edit style title.Edit style title.
    • Apply style to current item.Apply style to current item.
  • Size
    • Width - You can turn the width check box on if you want set a button width for the menu item. Enter the width in pixels. If this option is not defined the button width is calculated as a sum of the text width and its left & right paddings.
    • Height - You can turn the height check box on if you want to set a button height for menu item. Enter the height in pixels. If this option is not defined the button height is calculated as a sum of the text height and its top & bottom paddings.
  • Text
  • Font - Select a font face from the drop-down list or type it directly.
    • Size -  Set the font size. You can only specify the size in pixels. If you wish to use another unit of measurement like ems, you would have to edit the style sheet directly.
    • Align - Set text alignment. Buttons set horizontal text alignment: Left, Centered, or Right. The next two buttons set vertical text alignment: Top or Centered. These buttons are accessible if the Button Width and Height options are defined. Otherwise the button size depends on the item text.
    • Padding  - Set the Text paddings in pixels - spacing between the text and button edges.
      NOTE: If you define Horizontal Align to Center then Left and Right paddings are disabled. If you define Vertical Align to Center then Top and Bottom paddings are disabled.
  • States - Each of the menu items can have three states which are:
    • Normal - menu item before the mouse is over the item.
    • Over - the mouse is over the item
    • Current (optionally) - highlighting/clicking on the menu item which is linked to the current page. You can set different text color, background color, border color and background image for each of the states. You can also set bold (B), italic (I) or underline (U) style to the states text. You can set ‘transparent’ color for background.
  • Border - Turn the border check box on if you want use border.
  • Images - Turn the images check box on if you want to use a background images.
    The Menu Item background can use up to three separate images: left and right edges and middle image (repeating horizontally). Text will appear within the middle part only so the edges can be reviewed as additional margins for text.
    Select the image box you wish to edit and browse to the image file by using the Browse button.

Menu settings tab

The 'Menu' settings tab enables you to set the common and animation properties for your menu. This tab has four panels to set the specific parameters within every of these.

Top Level Settings which are the top level menu items that you see when the page is loaded.
View Screenshot Menu Top Level settings tab

  • Size & Layout
    • Width - Turn the width check box on if you want to set the top level width then enter the width in pixels. If width value is not specified, the top level width will be determined by its content.
    • Height Turn the height check box on if you want to set the top level height then enter the height in pixels. If height value is not specified, the top level height will be determined by its content.
    • Top Padding is used to set the top padding in pixels for the Top level.
    • H Interval is used to set the horizontal interval (in pixels) between the items within the Top level. This option value (if positive) also defines the very left and right padding on this level. You can use the negative values for this option in some special cases, e.g. to get the items overlapped (each next over previous one).
      H interval example.
  • Level Border
    •  Width allows you to set the Border Width for the Top level. Zero value means no border.
    • Color allows you to set the Border Color for the Top level.
  • Background  - Tick the Images check box on if you want to use background images.
    • The Top Level background can use up to three images: left and right edges (if the design requires) and middle image (repeating horizontally). The menu items (buttons) will appear within the middle part only so the edges can be used as additional margins. Select the image box you wish to edit and browse to image file using the Browse button.
      The Red and Black Template uses a singe image as the background.
    • Color select the background color for the Top level items.

Second Level Settings allows you to set the second level menu parameters for your menu.
View Screenshot Menu Second Level settings tab

  • Mode - Here you can choose to have the second level type as a Dropdown or a Horizontal.
    •  If it is defined as Dropdown then the second level has all the parameters defined in Dropdown Settings panel.
    • If it is defined as Horizontal then the second level appears horizontally and all the parameters of Second Level Settings panel are applied on it.
  • Size & Layout
    • Width - The Second level width is always equal to Top level width.
      NOTE: please make sure your second level content fits to the menu width.
    • Height - Set your second level height in pixels.
    • Top Padding allows you to set the top padding in pixels for the second level menu items.
    • H Interval allows you to set the horizontal interval (in pixels) between the items within the Second level. This option value (if positive) also defines the very left and right padding on the level. You can use the negative values for this option in some special cases, e.g. to get the items overlapped (each next over previous one). See example above.
  • Level Border 
    • Width allows you to set the Border Width for Second level menu items. Zero value means no border.
    • Color allows you to set the Border Color for Second level menu items.
  • Background  - Tick the Images check box on if you want to use background images.
    • The Second Level background can use up to three images: left and right edges (if the design requires) and middle image (repeating horizontally). The menu items (buttons) will appear within the middle part only so the edges can be used as additional margins. Select the image box you wish to edit and browse to image file using the Browse button.
      The Red and Black Template uses a singe image as the background.
    • Color select the background color for the Second level items.

Dropdown Settings allows you to set the submenu parameters.  The dropdown width is determined by the width of its items (buttons). If the items have different width, it is determined by the widest one.
View Screenshot Dropdown settings tab

  • Offset
    • First level means the first dropdown submenu. You can set the offset value for the submenu regarding its parent.
      • X - Horizontal offset.
      • Y - Vertical offset.
    • Sublevel - Every next submenu after the First level menu will be defined as Sublevel. You can set the offset value for Sublevel regarding its parent.
      • X - Horizontal offset.
      • Y - Vertical offset.
        These options may have the negative values. E.g. for getting an overlap.
  • Layout
    • Padding allows you to set the padding between the submenu borders (edges) and its items (buttons).
      Screenshot Layout padding example.
    •  V Interval allows you to define the vertical interval between the submenu items (buttons). Here you can also enter the negative values to overlap the items. NOTE: for the margins before the first and after the last item you need to use Padding parameter.
  • Style
    • Bg Color allows you to set the submenu background color.
    • Shadow allows you to turn the Drop Shadow check box on if you want all submenus to have the shadows.
    • Opacity allows you to set the submenus opacity in percents (%)
  • Border
    • Width allows you to set the Border Width in pixels.
    • Color allows you to set the Border Color.
  • Effect allows you to apply different opening and closing animation effects to submenus.
  • Open allows you to set the submenu animation effect on opening.
  • Close allows you to set the submenu animation effect on closing.  

    NOTE: The compound effects like Roll Down & Right, Roll Up & Left etc. work as follows: Roll Down (Up) performs for the First level, Roll Right (Left) for all the Sublevels.
  • Speed allows you to set the submenu animation speed. To get the speed higher you have to increase a value.
  • Delay allows you to set the delay for opening a submenu. This value defines delay (ms) between the moments when a parent item gets mouse over it and submenu opens. On closing a submenu. This value defines delay (ms) between the moments when mouse leaves the parent item or submenu and submenu hides.

The Menu position allows you to set your menu source code position in the HTML code and the menu position on the browser window.
View Screenshot Position settings panel

  • Turn the Put Menu Code at Cursor Position in HTML Code checkbox on to insert the code to the current cursor location. Turn it off to leave the code position unchanged.
  • If you want your menu to be absolutely positioned, check the Use Absolute Position on Page box and specify coordinates in pixels to determine exactly where you want the menu to appear on the browser window.  
  • The Z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

General Tab

  • Under Accessibility the Search Engine Optimization group allows you to select which Links On Page will show.
  • Highly optimized search engine menu scripts can greatly improve your site search engine placement and page rank. To improve the volume and quality of traffic to your web site from search engines select from show All links on the page, Top Only links or Optimized.
  • The Keyboard Navigation group allows you to Activate Keyboard Navigation. Turn the check box on if you want to use keyboard navigation.
  • Hotkey allows you to set key sequence to activate keyboard navigation in the browser.
  • Save/Load Script allows you to select the location and the name of the JS file. The CSS file will be saved to the same folder. The default setting is cssmenutools/scripts/MTHM.js

Once you have finished your menu and resaved all of the files, make sure you preview it in your browser, both Internet Explorer and Firefox, and at more than one resolution.

 

Pat Geary.
Copyright © 2010 Pat Geary of Expression Web Tutorials & Templates All Rights Reserved
Tutorial Added September 2010