Menu Bar

The Menu bar sits at the top of the screen for all pages in CalmView and allows the user to navigate to any important pages. It is configured in CalmViewRefreshConfig.xml, a file in the \CalmView\Configuration folder.

The Menu Bar, with Search selected and the sub-menu opened below it

Logo

The code for the logo is in the ImagesCollection section. The menu bar shown above is configured as follows:

<ImagesCollection>

<Images>

<Image type="banner" source="bank-of-england.jpg" altText="The building of the Bank of England"/>

<Image type="logo" source="brand-logo.svg" altText="CalmView"/>

</Images>

</ImagesCollection>

To add a logo, the Image element must have the 'type' attribute 'logo'. 'source' points at the file and by default looks in the \CalmView\images folder. An svg file is used here to allow the image to scale while still looking clean, but other file formats such as jpg, png, or gif can be used, too. 'altText' is included for users accessing the site from a screen reader or other device and is usually used to explain the image.

Menu options

By default the main menu is set up with four options, Home (returning the user to the home page), Search (opening advanced search. A menu drops down to allow the user to choose the database in which to search), Collections (which gives access to the Showcase and Image Gallery), and Contact (which navigates to a contact page). These can be added to or removed. Any options can have a menu of sub-items show up below it, in the same way that Search allows the user to pick a database in which to search.

The code for the menu bar is in the MenuCollection section. The menu bar shown above is configured as follows:

<MenuCollection>

<MenuItems>

<MenuItem label="Home" link="default.aspx"/>

<MenuItem label="Search" link="advanced.aspx?src=CalmView.Catalog">

<MenuSubItems>

<MenuSubItem label="Catalog Search" link="advanced.aspx?src=CalmView.Catalog"/>

<MenuSubItem label="People Search" link="advanced.aspx?src=CalmView.Catalog"/>

<MenuSubItem label="Advanced Search" link="advanced.aspx?src=CalmView.Catalog"/>

</MenuSubItems>

</MenuItem>

<MenuItem label="Collections" link="showcase.aspx">

<MenuSubItems>

<MenuSubItem label="Showcase" link="showcase.aspx"/>

<MenuSubItem label="Image Gallery" link="imagegallery.aspx"/>

</MenuSubItems>

</MenuItem>

<MenuItem label="Contact" link="contact.aspx"/>

</MenuItems>

</MenuCollection>

Each entry on the Menu bar is set up as a MenuItem. The 'label' attribute determines the text that appears on the Menu bar. The 'link' attribute is the page that is linked to. By default, this is assumed to be in the \CalmView folder. To have a sub menu (as under 'Search'), add the MenuSubItems element below the entry it should be part of, and then add a MenuSubItem element for each desired option.

➤