Styling Navigation Menus

At this point it is assumed that you have already –

1. Installed the Navigation Menus module 
2. Created your Navigation Menu 
   
3. Defined the panels you wish to appear in your Navigation Menu
4. Set your Navigation Menu to ‘Active’

Once this has been done it is necessary to add a link to the navigation menu in the style in which you want the navigation to appear.

On the navigation menu module configuration screen, select ‘Display Link’. This will display a line of code in a text area below your list of navigations. Copy this line of code.

This code needs to be placed in the header of your style; typically this will be in either the PageHeader.ascx or DocumentMasthead.ascx page control. For ease of styling the code should be placed inside two divs, ‘menu-outer’ and ‘menu-inner’. If you have been previously using a hard-coded navigation then these containing divs may already be in your style. Simply paste the copied line of code between these divs, and then replace the ‘<SomethingUnique>’ with a name for your navigation, making sure to also remove the angled brackets.

This name will be referred to in the CSS for your navigation, so it is useful to give it a name that is relevant. In the example we’re using the navigation is simply named ‘TopNav’.

Styling your Navigation

"menu-outer" and "menu-inner" are the containing divs for your navigation, generally they will contain any background images/colours that need to apply to the navigation as a whole, as well as any margin and padding to fit the navigation into your design

#menu-outer { clear: both; overflow: hidden; background: #f7f7f7 url("/EasySiteWeb/EasySite/StyleData/Web_Copy/Images/top-nav-top.gif") no-repeat left top; margin: 30px 0 5px 0; }

#menu-inner { overflow: hidden; padding-bottom: 4px; background: transparent url("/EasySiteWeb/EasySite/StyleData/Web_Copy/Images/top-nav-bottom.gif") no-repeat left bottom; }

The code above shows background images being applied to the entire menu. The whole of the navigation is displayed as a list, including child pages.

The style-element-outer div may have a default margin set, so it may be necessary to remove this to match your design.

#menu-inner .style-element-outer { margin: 0; }

As the navigation is generated as a list, remove the margin and padding that is set by default, as well as the list style and any custom background images that are usually used in your lists.

.custom-menu-TopNav ul, .custom-menu-TopNav li { list-style-type: none; margin: 0; padding: 0; background-image: none; }

"footer-menu-panel" is the container for each panel in your navigation. The border set here works as a dividing line between each panel. The 'first-child' pseudo-class can be used to remove the border from the first panel in the menu.

.custom-menu-TopNav .footer-menu-panel { border-left: 1px solid #dbdbdb; }.custom-menu-TopNav .footer-menu-panel:first-child { border-left: 0; }

This code needs to be placed in the header of your style; typically this will be in either the PageHeader.ascx or DocumentMasthead.ascx page control. For ease of styling the code should be placed inside two divs, ‘menu-outer’ and ‘menu-inner’. If you have been previously using a hard-coded navigation then these containing divs may already be in your style. Simply paste the copied line of code between these divs, and then replace the ‘<SomethingUnique>’ with a name for your navigation, making sure to also remove the angled brackets.

This name will be referred to in the CSS for your navigation, so it is useful to give it a name that is relevant. In the example we’re using the navigation is simply named ‘TopNav’.

Styling your Navigation

"menu-outer" and "menu-inner" are the containing divs for your navigation, generally they will contain any background images/colours that need to apply to the navigation as a whole, as well as any margin and padding to fit the navigation into your design

#menu-outer { clear: both; overflow: hidden; background: #f7f7f7 url("/EasySiteWeb/EasySite/StyleData/Web_Copy/Images/top-nav-top.gif") no-repeat left top; margin: 30px 0 5px 0; }

#menu-inner { overflow: hidden; padding-bottom: 4px; background: transparent url("/EasySiteWeb/EasySite/StyleData/Web_Copy/Images/top-nav-bottom.gif") no-repeat left bottom; }

The code above shows background images being applied to the entire menu. The whole of the navigation is displayed as a list, including child pages.

The style-element-outer div may have a default margin set, so it may be necessary to remove this to match your design.

#menu-inner .style-element-outer { margin: 0; }

As the navigation is generated as a list, remove the margin and padding that is set by default, as well as the list style and any custom background images that are usually used in your lists.

.custom-menu-TopNav ul, .custom-menu-TopNav li { list-style-type: none; margin: 0; padding: 0; background-image: none; }

"footer-menu-panel" is the container for each panel in your navigation. The border set here works as a dividing line between each panel. The 'first-child' pseudo-class can be used to remove the border from the first panel in the menu.

.custom-menu-TopNav .footer-menu-panel { border-left: 1px solid #dbdbdb; }
.custom-menu-TopNav .footer-menu-panel:first-child { border-left: 0; }

Styling for child pages contained within the dropdown list is added. The CSS here is to add specific styling to the links in your dropdown menus.

.custom-menu-TopNav ul.fm-panel-list li.fm-panel-item { padding: 5px 0; }
.custom-menu-TopNav ul.fm-panel-list a.fm-panel-item:link { display: block; text-decoration: none; }
.custom-menu-TopNav ul.fm-panel-list a.fm-panel-item:hover {  }

At this stage the menu is now fully functional and working as expected.

Getting Your Navigation to Work with IE6

Your navigation should now be functional in most browsers, but there is still some extra code needed to get it working in Internet Explorer 6. This is because IE6 does not support onhover events for anything other than an anchor tag.

Getting the navigation to work with IE6 is simple, requiring an extra JavaScript file that can be copied straight from the Easysite Default style.

In the Default style, navigate to the scripts folderStyleData\Default\ScriptsLocated in this folder is a file named ‘dropdown.js’ - simply copy and paste this file into the Scripts folder of your own style.

Once this has been done you just need to add one line of code to your DocumentHeader.ascx page control, to allow the script to be brought in. Replacing ‘Your_Style’ with the actual name of the style where the script is located, the code is as follows –