Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Zen Section
id574407961

Gallery
includemega-nav.png

In addition to simple drop-down secondary menu styling, Zen now allows more complex drop-down menu 'panels.' (These are a great place to add images as well.)

  1. Go the .zen.menu page where your menu is set (In Zen Intranet, this is found in the Intranet Utility space.)

    Expand
    titleFinding Zen Intranet's menu...(click to expand)

    The simplest way to find and edit the menu for any space is to use the gear menu. Select "Zen Space Settings"...

    Gallery
    includespacesettings.png
    columns1

    ...and in the Zen Space Settings UI, click the view and edit Menu link:

    Gallery
    includeeditMenu.png
    columns1
     

  2. Use the Section Menu to insert a section after the main menu.
  3. Add a list of links. 
    1. Looking for multiple columns in your panel? Use the Confluence editor layout tools (these work great in Zen Sections!). Or, use the Zen Wrap Macro for detailed design control.
  4. Now, in this new section, use the Section Designer to set the 'title' field to match the text displayed in the menu tab where you'd like the drop menu panel to appear. (Zen will match up the title with the menu text.)

See below for more detailed menu panel design options.

...

Zen Section
section-nameLayout
tab574462560
id574546400

To align and position content within your menu panels, you can:

Wrap
padding9px 2px 0 0
floatleft

This option works great in Zen sections!

Select your desired number of columns, and insert your navigation links. 

Wrap
padding9px 2px 0 0
floatleft

For more precise control, use the Wrap Macro, which allows you to float content, and add other styling, such as padding and margin.

Zen Section
section-nameAdd Images
tab574462560
id574428470

You can add images to menu panels just as you would normally add images to any section:

Wrap
padding9px 2px 0 0
floatleft

Use the Insert option in the Editor to insert your image. You can then align and position it in a variety of ways:

  • Use the Editor's align left or right option (text will then wrap around the image) 
    Clear
  • Use the Editor's Layout tool to create columns on the page, and insert the image in one of the columns.
    Clear
  • For more precise positioning, use the Zen Wrap macro, which allows you to float content, add padding and margins, and even "extra sauce" CSS if that is needed (though you'd need to access the Brand Designer for this level of customization.) 
Wrap
padding9px 2px 0 0
floatleft

Use the Section Designer to select a background image to be used for your menu panel.

Info
titleImportant

Since your menu will be viewed on many pages, and potentially across spaces, it's important to include the space key and page title when naming your image.

(See Broken Links and Images on .zen Pages for more information)

As in the example below, follow this pattern:

Code Block
spacekeyPageTitle^image.png