Home > Creating your first menu > Style your menu

Style your menu

What we'll do in this section is take the menu we created in the preceeding section, Your first static menu, and style the menu items inside using the Style section found in right-side of the interface (for each menu item).

In order to fully be able to use the information in this section, you should first go through the Your first static menu section, as we'll pick up the work from the end of that section.

Note: This procedure doesn't fully apply to the Developer Edition of FlexiMenus JS. For static menus, each menu item can have an individual style as it can be selected in the Menu Structure panel; for dynamic menus, the style options are the same, only that menu items from the same category (submenus, buttons, captions or separators) can have only the same configuration.

  1. Open the .html file you created in the Your first static menu section.
  2. Switch to the Configuration section, the Menu Structure panel and select the top-level menu labeled Main Menu. Select the Menu tab from the right-side of the interface, and switch to the Style section. Leave the menu buttons alignment options as they are set by default, and set the Button Spacing option to 5 pixels; set the Top, Right, Bottom and Left margins to 5 pixels.
  3. Switch to the Button tab, the Style section. Set the Horizontal Content Align and Vertical Content Align to Center and Middle, and then set the Top, Right, Bottom and Left margins to 2 pixels. Configure the Text Properties: enable the Bold option for the Over and Down states of the buttons.
  4. Switch to the Caption tab, the Style section. Set the Horizontal Content Align and Vertical Content Align to Center and Middle, and then set the Top, Right, Bottom and Left margins to 5 pixels. Configure the Text Properties: enable the Bold option for the Over and Down states of the buttons. Configure the Icon Properties: set the Icon Positioning to Left, the Icon Align to Middle and the Icon Spacing to 5 pixels.
  5. Click the Save button at the bottom of the interface to save the changes; following, click the Close button to add the menu to your page. In the File menu, click Preview in Browser and select a browser from the list or click F12 to preview the page in your default browser.