메뉴 스타일 사용자 지정
사이트에서 사용하는 스타일시트에서 메뉴 스타일을 사용자 지정할 수 있습니다.
다음으로 이동 을 클릭하여 스타일시트를 사용자 정의할 수 있습니다.
보충 페이지 탐색 메뉴 예제 코드
다음 예제에서는 CSS 클래스 선택기 및 규칙을 살펴봅니다. 또한 외부 컨테이너(TD.layout_content_submenu_column)를 기반으로 블록 컨테이너(div.cms_menu_section_blocks)가 정의되는 방식을 검토합니다. 외부 컨테이너는 실제로 사이트 레이아웃의 일부입니다.
이 개념은 예제의 아래쪽에 있는 수퍼 메뉴에 사용된 스타일과 스타일을 비교하면 더 명확해집니다. 이 예제에서는 완전히 새로운 메뉴 시스템을 만들 필요가 없다는 것을 보여 줍니다. CSS를 사용하여 기존 메뉴의 모양과 느낌을 변경할 수 있습니다.
/*********************************************************************************************************************************************************
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 VARIATIONS... " 주석을 사용하면 고유 클래스가 있는 포함하는 div를 추가하여 기본값을 덮어씁니다. 기본 시스템의 헤더를 렌더링하는 코드에서 아래쪽 메뉴는
cms_header_bottom_menu 클래스가 있는 테이블 셀에 있습니다(TD.cms_header_bottom_menu CSS 선택기 참조)./*********************************************************************************************************************************************************
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;
}