서브메뉴 구성요소를 꾸미는 CSS 소스 소개합니다.
배경을 이미지처리(연두색테두리)하고 상위메뉴는 색상처리(연두색처리)를 하였으며 하위메뉴에는 삼각형 블릿을 붙여보았습니다.
메뉴가 뿌려지는 텍스트 부분은 메뉴관리에서 수정하는대로 고쳐질 수 있도록 메뉴텍스트에 이미지는 사용하지 않았습니다.
예시홈페이지: http://lovecss.ohpy.com/122146/0
1.
'홈페이지관리 > 구성요소 레이아웃 ' 에서...
'서브메뉴'를 좌측단 또는 우측단에 추가합니다.
2.
아래처럼 배경으로로 쓸 이미지를 준비합니다.
아래처럼 하위메뉴 앞 블릿으로 쓸 이미지를 준비합니다.
3.
'홈페이지관리 > 디자인관리 > 구성요소CSS' 에서...
'서브메뉴' CSS에 아래의 style을 추가합니다.
/* op element style - elsnb
***************************************************/
.elsnb { clear: both; float: left; margin-bottom: 10px;}
.elsnb h2.elsnb-h { display: none; }
.elsnb a { selector-dummy: expression(this.hideFocus=true); }
.elsnb a:focus { -moz-outline-style: none; }
.elsnb ul.navi { clear: both; float:left; }
.elsnb ul.navi li.menu { clear: both; float:left; width: 185px; display: block; list-style:none; }
.elsnb ul.navi li.menu .item a { clear: both; float: left; width: 160px; font: bold 14px/1.4em 돋움, sans-serif; color: #333; margin: 0 10px 5px 10px; text-decoration: none; }
.elsnb ul.subnavi { clear: both; float:left; }
.elsnb ul.subnavi li.submenu { clear: both; float:left; display: block; list-style:none; }
.elsnb ul.subnavi li.submenu .subitem a { clear: both; float: left; width:155px; color:#555; font: bold 12px/1.2em 돋움, sans-serif; padding: 4px 10px 3px 20px; background: url(http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/elsnb_bul.gif) no-repeat 13px 9px; text-decoration: none; }
.elsnb ul.subnavi li.submenu .subitem a:hover { color:#333; }
/* 메뉴별 설정 */
.elsnb ul.navi li.menu!!!메뉴고유클래스 { height:140px; background: url(http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/elsnb_bg.gif); }
.elsnb ul.navi li.menu!!!메뉴고유클래스 .item a { color: #63A900; padding: 12px 0px 8px 0px; border-bottom:1px dashed #ccc;}
[참고하세요]
※ 스킨별로 측단의 width(너비)값이 다르기 때문에 위 소스의 모든 width값은 꼭! 홈페이지에 맞게 넣어주셔야 합니다.
※ /* 메뉴별 설정 */의 height(높이)값과 backgrund 이미지는 각 메뉴에 따라 다른 값을 넣어주셔야 합니다.
※ 홈페이지별로 따로 설정해야 되는 부분은 !!!로 표시해두었습니다.
[추가팁]
<메뉴고유클래스 찾는 방법1 - 메뉴관리에서찾기>
'홈페이지관리 > 메뉴관리 > 메뉴' 에서...
각 메뉴이름에 마우스를 갖다대면 아래처럼 브라우저하단의 상태표시줄에 GNB 번호가 나옵니다.
이 숫자 앞에 mene를 붙인 'menu236266'가 메뉴고유클래스입니다.
<메뉴고유클래스 찾는 방법2 - 소스보기>
'!!!메뉴고유클래스' 를 넣어야 하는 부분이 아마도 이 소스를 사용하시는 데 있어서 가장 난관일 것입니다.
오피로 만든 모든 홈페이지의 메뉴들은 각각 고유의 메뉴클래스를 가지고 있는데요.
메뉴고유클래스 찾는 방법은 아래와 같습니다.
① 해당 홈페이지에서 마우스 오른쪽을 클릭하여 소스를 엽니다.
② 소스에서 ctrl+F를 눌러 'class="menu'라고 되어있는 부분을 찾습니다.
③ 예를 들어 아래와 같은 소스들이 나옵니다.
<li class="menu menu1" ><span class='item'><a href='/122146/0' onclick='ajax._setSubList({ url : "/opbbs/", query : "control=List&op_no=151276&bbs_no=122146&ele_gnb_no=236266", div : "opm", form :"", method : "get" }); return false; ' style='cursor:pointer;' >제목형1</a></span>
④ 위에서 찾은 소스 중에 'ele_gnb_no=236266'라고 되어있는 부분이 있는데 이 숫자가 '메뉴고유번호'이고 '메뉴고유클래스'는 숫자앞에 알파벳menu를 붙인'menu236266' 입니다.
⑤ li class="menu menu1"이 첫번째 상위메뉴이고 li class="menu menu2" 가 두번째, li class="menu menu3" 이 세번째 상위메뉴 순서로 클래스가 지정되므로 해당 메뉴를 찾아 고유번호를 찾으시면됩니다.
이 부분은 꼭 HTML소스를 보셔야만 알 수 있기 때문에 안타깝지만 초보자분들은 알기 힘들 수도 있겠습니다. ㅠㅠ
사용하기 쉬운 소스를 만들려고 노력했는데...
'메뉴고유클래스'를 찾는 것 때문에 역시나 이번에도 사용하기 어려운 소스일수도 있겠네요.
P.S.
서브메뉴 꾸미기 소스는 디자인에 따라 너무 달라질 수 있어서 공용소스로 올리기는 좀 모자란 감이있지만,
서브메뉴 배경 이미지만으로도 분위기를 다르게 연출할 수 있으니 응용하시면 전혀 다른 디자인이 될 수도 있을꺼에요.
잘안되는 분은 댓글 올려주시면 방법을 찾아보도록 하겠습니다.
P.S. 2008-07-24
추가팁으로 메뉴고유클래스 찾는 방법(메뉴관리에서찾기) 하나더 추가하였습니다.
