Personalização de estilo de menu
Você pode personalizar os estilos de menu nas folhas de estilos que seu site usa.
Navegar até para personalizar folhas de estilos.
Código de exemplo do menu de navegação de página suplementar
No exemplo a seguir, observe os seletores e as regras de classe CSS. Além disso, revise como os contêineres de bloco (div.cms_menu_section_blocks) são definidos com base no contêiner externo (TD.layout_content_submenu_column). O contêiner externo é, na verdade, uma parte do layout do site.
Esse conceito fica mais claro se você comparar os estilos com os estilos usados no supermenu mais abaixo no exemplo. Este exemplo mostra que não há necessidade de criar um sistema de menus completamente novo. Você pode usar CSS para mudar a aparência dos menus existentes.
/*********************************************************************************************************************************************************
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;
}
Código de exemplo de seções do super menu
O menu a seguir é uma grade flutuante simples. Os padrões são gravados primeiro. Em seguida, abaixo do comentário "VARIAÇÕES DO SUPER Menu...", os padrões são substituídos pela adição de um div contendo uma classe exclusiva. No código que renderiza o cabeçalho do sistema base, o menu inferior reside em uma célula da tabela com a classe
cms_header_bottom_menu (consulte o seletor de CSS TD.cms_header_bottom_menu)./*********************************************************************************************************************************************************
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;
}