Personalização de estilo de menu
Você pode personalizar estilos de menu nas folhas de estilo que seu site usa.
Navegar até para personalizar folhas de estilo.
Código de exemplo de menu de navegação de página suplementar
No exemplo a seguir, observe os seletores e regras de classe CSS. Além disso, revise como os contêineres de bloco (div.cm_menu_section_blocks) são definidos com base no contêiner externo (TD.layout_content_submenu_column). Na verdade, o contêiner externo faz parte do layout do site.
Este conceito ficará 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 menu 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 supermenu
O menu a seguir é uma grade flutuante simples. Os padrões são gravados primeiro. Em seguida, abaixo do "SUPER MENU VARIAÇÕES..." comentário, 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 de base, o menu inferior reside em uma célula da tabela com a classe de
cms_header_bottom_menu (Consulte o seletor 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;
}