Menu style customization

  • Release version: Xanadu
  • Updated August 1, 2024
  • 4 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Menu style customization

    ServiceNow allows customers to customize the appearance of menus on their site by modifying the style sheets. This customization is done through CSS within the style sheets accessible viaContent Management > Design > Style Sheets. The provided examples demonstrate how to alter the look and feel of existing menus without rebuilding the menu system, focusing on submenu and super menu structures.

    Show full answer Show less

    Key Features

    • Submenu Styling: CSS class selectors target submenu containers, such as div.cmsmenusectionblocks within the outer container TD.layoutcontentsubmenucolumn. Styles define dimensions, padding, colors, and background images to control the submenu layout and appearance.
    • Super Menu Styling: The super menu is structured as a floating grid with default styles overridden by adding unique container classes. The bottom menu is rendered within a table cell with the class cmsheaderbottommenu, which is targeted to customize the super menu’s dropdown bar, menu items, and content blocks.
    • Visual Customizations: Key CSS properties include width, height, float positioning, borders, padding, colors, background images, and text formatting (e.g., font size, text-transform, font-weight). These enable refinement of menus to match branding and improve user interface clarity.
    • UI Macros: The examples reference UI Macros like cmsmenusectionblocks that organize menu sections and support consistent styling.
    • Use of Z-Index and Positioning: For super menus, absolute positioning and z-index layering ensure dropdown content appears correctly layered above other page elements.

    Practical Application for ServiceNow Customers

    • Navigate to the style sheets in your ServiceNow instance to locate menu-related CSS classes.
    • Use the provided CSS selectors and properties as templates to customize submenu and super menu layouts, colors, and typography.
    • Adjust container widths, padding, and backgrounds to align menus with your site’s visual brand and improve navigation usability.
    • Leverage the existing menu structure by overriding styles rather than creating new menus, simplifying maintenance and upgrades.
    • Apply z-index and positioning carefully to ensure dropdown menus display properly without visual conflicts.

    Expected Outcomes

    By applying these style customizations, customers can deliver a polished, branded menu experience on their ServiceNow portals. Menus will have clear visual hierarchy, enhanced readability, and improved navigation functionality, all achieved through CSS adjustments within the standard ServiceNow framework.

    You can customize menu styles in the style sheets your site uses.

    Navigate to Content Management > Design > Style Sheets to customize style sheets.

    Supplementary page navigation menu example code

    In the following example, look at the CSS class selectors and rules. Also, review how the block containers (div.cms_menu_section_blocks) are defined based on the outer container (TD.layout_content_submenu_column). The outer container is actually a part of the site layout.

    This concept is clearer if you compare the styles to the styles used in the super menu further down in the example. This example shows that there is no need to make a completely new menu system. You can use CSS to change the look and feel of existing menus.
    /*********************************************************************************************************************************************************
   SUB MENU VARIATIONS FOR HORIZONTAL MENUS - Section Blocks Menu (cms_menu_section_blocks UI Macro)
*********************************************************************************************************************************************************/
TD.layout_content_submenu_column DIV.cms_menu_section_blocks {
    width: 156px;
    height: auto;
    float: left;
    position: relative;
    border-style: solid;
    margin: 0px 0px 0px 0px;
    border: 0px solid #e0e0e0;
    padding: 0px;
    background: none;
    padding: 24px 12px 0px 12px;
}
 
TD.layout_content_submenu_column DIV.sub_menu_section {
    width: 156px;
    height: 20px;
    float: left;
    border-style: solid;
    border: 0px solid #e0e0e0;
    padding: 0px;
    background: none;
    padding: 0px 12px 0px 12px;
}
 
SPAN.cms_sub_menu_list_link, TD.submenu_cell A   {
    color: #FFF;
}
 
TD.layout_content_submenu_column IMG.menu_bullet{
	display: none;
}
 
TD.cms_menu_section_blocks_title h2, TD.cms_menu_section_blocks_title h2 a, TD.cms_menu_tab_blocks_text h2 {
    margin:0;
    padding: 0px;
    font-size: 11px;
    text-transform: uppercase;
    color: #42C4DD;
    font-weight: normal;
    white-space: nowrap;
}
 
TD.layout_content_submenu_column a.cms_menu_block_item {
    margin:0;
    padding: 0px;
    font-size:11px;
    color:#FFF;
}
 
TR.layout_content_submenu_row TD.layout_content_submenu_column{
	background: transparent url(sub_menu_background.gifx) repeat-y center top !important; 
}

    Super menu sections example code

    The following menu is a simple float grid. The defaults are written first. Then, below the "SUPER MENU VARIATIONS..." comment, the defaults are overwritten by adding a containing div with a unique class. In the code that renders the header for the base system, the bottom menu resides in a table cell with the class of cms_header_bottom_menu (refer to the TD.cms_header_bottom_menu CSS selector).
    /*********************************************************************************************************************************************************
   SUB MENU VARIATIONS FOR HORIZONTAL MENUS - Section Blocks Menu (cms_menu_section_blocks UI Macro)
*********************************************************************************************************************************************************/
 
TD.layout_content_submenu_column DIV.cms_menu_section_blocks {
    width: 156px;
    height: auto;
    float: left;
    position: relative;
    border-style: solid;
    margin: 0px 0px 0px 0px;
    border: 0px solid #e0e0e0;
    padding: 0px;
    background: none;
    padding: 24px 12px 0px 12px;
}
 
TD.layout_content_submenu_column DIV.sub_menu_section {
    width: 156px;
    height: 20px;
    float: left;
    border-style: solid;
    border: 0px solid #e0e0e0;
    padding: 0px;
    background: none;
    padding: 0px 12px 0px 12px;
}
 
SPAN.cms_sub_menu_list_link, TD.submenu_cell A   {
    color: #FFF;
}
 
TD.layout_content_submenu_column IMG.menu_bullet{
	display: none;
}
 
TD.cms_menu_section_blocks_title h2, TD.cms_menu_section_blocks_title h2 a, TD.cms_menu_tab_blocks_text h2 {
    margin:0;
    padding: 0px;
    font-size: 11px;
    text-transform: uppercase;
    color: #42C4DD;
    font-weight: normal;
    white-space: nowrap;
}
 
TD.layout_content_submenu_column a.cms_menu_block_item {
    margin:0;
    padding: 0px;
    font-size:11px;
    color:#FFF;
}
 
TR.layout_content_submenu_row TD.layout_content_submenu_column{
	background: transparent url(sub_menu_background.gifx) repeat-y center top !important; 
}


4.2 2. Super Menu Sections Example Code

This menu is essentially a simple float grid. The defaults are written first. Then, below the "SUPER MENU VARIATIONS..." comment, the defaults are overwritten by adding a containing div with a unique class. In the code that renders the header for the base system, the bottom menu resides in a table cell with the class of "cms_header_bottom_menu" (note the TD.cms_header_bottom_menu CSS selector).

/*******************************************************************************************
   Section Blocks Menu (cms_menu_section_blocks UI Macro)
*******************************************************************************************/
div.cms_menu_section_blocks {
    width: 260px;
    height: 260px;
    float: left;
    border-style: solid;
    margin: 0px 0px 12px 12px;
    border: 1px solid #e0e0e0;
    padding: 10px;
    background: url(blue/portal_horizontal_bkg.pngx) repeat-x center bottom; 
}
 
p.cms_menu_separator {
    border-top:1px dotted #ccc;
    margin-top: 6px;
    margin-bottom: 6px;
}
 
td.cms_menu_section_blocks_title h2, td.cms_menu_section_blocks_title h2 a, td.cms_menu_tab_blocks_text h2 {
    margin:0;
    padding: 0px;
    font-size: larger;
    font-weight: normal;
    color:#444;
}
 
a.cms_menu_block_item {
    margin:0;
    padding: 0px;
    color:#999;
    font-size: inherit; 
}
 
/*******************************************************************************************
   SUPER MENU VARIATIONS FOR HORIZONTAL MENUS - Section Blocks Menu (cms_menu_section_blocks UI Macro)
*******************************************************************************************/
TD.cms_header_bottom_menu .cms_menu_super_menu_bar { /*style the super menu drop down bar */
   z-index: 199;
   float: left;
   background: none;
   margin-left: 44px;
}
 
TD.cms_header_bottom_menu div.cms_menu_section_blocks {
    width: 200px;
    float: left;
    border: 0px;
    margin: 0px 0px 12px 0px;
    padding: 0px;   
    background: none; 
}
 
TD.cms_header_bottom_menu p.cms_menu_separator {
    border-top:0px dotted #ccc;
    margin-top: 0px;
    margin-bottom: 0px;
}
 
TD.cms_header_bottom_menu  .cms_menu_super_menu_bar_item {  /*style an item on the super menu drop down bar*/ 
   z-index: 200;
   float: left; 
   padding-left: 12px; 
   padding-right: 12px;
   padding-bottom: 8px;
   padding-top: 4px;
   cursor: pointer;
   cursor: hand;
   font-weight: bold;
   color: #000;
   border-left: 1px solid #FFF;
   border-top: 1px solid #FFF;
}
 
TD.cms_header_bottom_menu  .cms_menu_super_menu_bar_item_selected {  /*style a selected item on the super menu drop down bar*/ 
   z-index: 200;
   float: left; 
   padding-left: 12px; 
   padding-right: 12px;
   padding-bottom: 8px;
   padding-top: 4px;
   cursor: pointer;
   cursor: hand;
   background: #fff url(super_menu_bkg.gifx) no-repeat left top;
   font-weight: bold;
   border-right: 0px solid #CCC;
   border-bottom: 0px solid #CCC;
   border-left: 1px solid #DDD;
   border-top: 1px solid #EEE;
 
}
 
TD.cms_header_bottom_menu  .cms_menu_super_menu_content { /* style super menu content block */
   position: absolute;
   z-index: 999;
   height:260px;
   display: none;
   padding: 18px;
   background: #dedfe0 url(super_menu_bkg.gifx) no-repeat left top;
   border-right: 1px solid #CCC;
   border-bottom: 1px solid #CCC;
   border-left: 1px solid #DDD;
   box-shadow: 5px 5px 6px #666;
   -webkit-box-shadow: 5px 5px 6px #666;
   -moz-box-shadow: 5px 5px 6px #666;
   filter: progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=5, offY=5, positive=true);
}
 
TABLE.super_menu_video_table {
    background: #787878 url("grey_background.pngx") repeat-y scroll center top;
	width: 184px;
}