3단메뉴?
본문
3단 메뉴라고 해야 하나요?
요런 것처럼,
페이지 상단에 메뉴가 있고, 그아래로 드롭다운으로 메뉴가 나오는데, 그 드롭다운 메뉴 오른쪽으로 추가로 서브메뉴가 나오는 이런 방식으로 가능한 방법좀 없을까요?
그누보드5 버전에 추가된 메뉴관리 기능으로도 잘 안되는거 같구요.
답변 6
제홈에 쓸것을 날림으로 만든거라
소스가 많이 지저분하지만 리스트 (UL, LI )만 제대로 쓴다면
하부메뉴는 원하는 만큼 쓸수 있습니다
다만 자바스크립트와 CSS 쪽이 말그대로 임시로 막 만든거라 추후에 손을 볼 것이며
그때 개발자 팁란(자바스크립트 쪽이나 그누보드 팁란)에 올릴것이니 그후 변경하시면 될것입니다
function memuCALL(){
sublist("topMenuDIV")
}
위의 함수중 사용하고자 하는 메뉴의 아이디를 기입하시면 됩니다
메뉴의 하부 구조는 리스트 안에서 자식 UL을 통한 리스트로 2차 메뉴가 생성되고
그 리스트의 원하는 부분에 다시 UL을 통한 리스트로 3차로 이어집니다
<style>
ul{
margin : 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style:none;
}
ol{
margin : 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style:none;
}
li{
margin : 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style:none;
}
#topMenuDIV a:link{
text-decoration:none;
}
#topMenuDIV{/* 상단 주메뉴 자리 */
float :left;
margin : 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
width:auto;
min-height:30px;
font-family:굴림,돋움,verdana,tahoma, Arial,Helvetica,Sans-Serif;
font-size:9pt;
letter-spacing:-1px;
text-decoration:none;
color:#F4F4F4;
line-height:120%;
font-weight:bold;
}
.btLEFT{
border-left : 2px solid #8D8989;
margin : 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
width:1px;
min-height:36px;
}
.btRIGHT{
border-right : 2px solid #8D8989;
margin : 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
width:1px;
min-height:36px;
}
/* 팝업 메뉴 디자인 */
.topMenu{/* 1차 메뉴 총 높이 */
width:auto;
min-height:30px;
margin : 4px 4px 0px 4px;
padding : 0px 0px 0px 0px;
border : 2px solid #342e2e;
background-color: #261b1b;
box-shadow: 2px 2px 10px #888888;
display : inline-block;
}
#topMenuDIV .topMenu li{
width:90px;/* 1차 메뉴 간격 넓이 */
float: left;
margin : 11px 0px 0px 0px;
padding : 0px 5px 0px 5px;
height:12px;
text-align:center;
border-right : 2px solid #fff;
}
#topMenuDIV .topMenu ul{ /* */
box-shadow: 3px 3px 15px #888888;
}
#topMenuDIV .topMenu li ul{ /* 하부 메뉴를 ul에 담는다 넓이 폰트 */
display:none;
position:relative;
left:0px;
top: 10px;
z-index:auto;
width:200px;
height:auto;
margin : 0px;
padding : 0px;
background-color: #ddd;
border-top : 1px solid #ccc;
font-family:NanumGothic, 나눔고딕,새굴림,돋움,verdana,tahoma, Arial,Helvetica,Sans-Serif;
font-size:9pt;
text-decoration:none;
color:#F4F4F4;
line-height:120%;
font-weight:normal;
letter-spacing:1px;
box-shadow: 3px 3px 15px #888888;
}
#topMenuDIV .topMenu li ul li{/* 하부 메뉴 개당 높이 넓이 폰트 */
margin : 0px 0px 0px 0px;
padding : 0px 0px 5px 0px;
width:198px;
height:25px;
line-height:250%;
background-color: #4B4242;
border-right : 1px solid #ccc;
border-left : 1px solid #ccc;
border-bottom : 1px solid #ccc;
float: left;
}
#topMenuDIV a:link { color: #fff; }/* 링크가 걸린 방문하지 않은 상태*/
#topMenuDIV a:visited { color: #fff; }/*링크 걸린 방문한 상태 */
#topMenuDIV a:active { text-decoration: none; color: #fff; }
#topMenuDIV a:hover { text-decoration: none; color: #E5D85C;}/*마우스 올렸을 때 상태 */
#topMenuDIV li ul li a:hover { text-decoration: none; color: #000;font-weight:bold; background-color: #ccc; }/*마우스 올렸을 때 상태 */
.topMenu li ul a,.topMenu li ul li a{/* a링크에 넓이를 줄려면 인라인 블럭 처리를 해야함 */
margin : 0px 0px 0px 0px;
padding : 5px 0px 0px 0px;
display:inline-block;
width:198px;
height:25px;
text-align:center;
line-height:25px;
font-size:12px;
}
.adminEDIT{
float: left;
width:100px !important;
height:12px !important;
margin : 0px !important;
padding : 10px 10px 5px 10px !important;
border-right : 0px solid #8D8989 !important;
}
</style>
<script>
/******************************************************
* 엘레먼트 아이디를 간략하게 *
******************************************************/
function $ID(obj){
var element="";
if(obj==""){
return false;
}
else{
element= document.getElementById(obj);
return element;
}
}
/* 온로드후 실행 함수 자주쓰기에 구분을 주기 위해 이벤트 함수를 똑 같이 하나 더 만듬*/
function onLoad_Event(fucName){
if(window.addEventListener){ // firefox
window.addEventListener("load",fucName,false);
} //end firefox
else{ // IE
window.attachEvent("onload",fucName);
} //end IE
}
/* 메뉴 */
/*주의 사항 : 구분자를 이용해서 메뉴 팝업을 만들기에 메뉴의 아이디, 클라스에 언더바가 있으면 안됨 */
var ofenMenuSUBJECT="";
var ofenMENU_DIV="";
function sublist(subID){
if(!$ID(subID)){
alert("지정한 "+subID+"의 아이디를 가진 객체를 찾을수 없습니다");
return false;
}
var tags = "";
tags = $ID(subID).childNodes;
var tag_len = tags.length;
var s=1;
var onmenu="true";
for(var i=0; i<tag_len; i++) {
menu=tags[i];
if(menu.nodeType==1){
if(menu.nodeName=="UL"||menu.nodeName=="A"){
if(menu.nodeName=="UL"){
menu.id=subID+"_"+s;
coverID=menu.id;
}
else
if(menu.nodeName=="A"){
menu.id=subID+"_"+"A";
coverID=menu.id;
//아래 부분은 따로 함수로 빼서 재 사용하는데 지장 없도록 할것
$ID(menu.id).onmouseover=function(event){
linkID=this.id; //현재 마우스가 놓여진 링크 걸린 제목의 아이디 [ 노드검사를 링크(A) 로 검사해서 들어왔기 때문 ]
mouseonLIST = this.id.split("_A")[0];// 마우스가 놓여진 곳의 리스트 아이디
mouseonLIST_len= mouseonLIST.split("_").length;
var nowMenuDEP_number=parseInt(mouseonLIST_len/2); // 메뉴의 깊이 1차,2차,3차 메뉴
split_len= this.id.split("_").length;
linkID_targetUL = this.id.split("_A")[0]+"_1";
now_ofen_subMenu = ofenMenuSUBJECT.split("_A")[0]+"_1";
//열려진 서브 메뉴가 있는지 검사해서 현재 있는 곳의 링크와 같다면 (같은 그룹이면 )그대로 두고 그렇지 않으면 닫는다
if(ofenMenuSUBJECT!="" && ( $ID(now_ofen_subMenu) && $ID(now_ofen_subMenu).style.display=="inline-block")){
ofenMENU_DIV_len = ofenMENU_DIV.split("|").length;
var ofenMENU_DIV2 = ofenMENU_DIV.split("|");
var rename="";// 닫을 메뉴명을 빼기 위한 장치
for(i=0;i<ofenMENU_DIV_len;i++){
if($ID(ofenMENU_DIV2[i])){
mouseonLIST_len1= ofenMENU_DIV2[i];
mouseonLIST_len2= mouseonLIST_len1.split("_").length;
var nowMenuDEP_number2=parseInt(mouseonLIST_len2/2);
// 닫을 메뉴명을 빼기 위한 장치
if(i>0){
rename+=ofenMENU_DIV2[i-1]+"|";
}
if(nowMenuDEP_number<nowMenuDEP_number2){
//현재 선택한 곳이 상위 그룹이라면 연관되지 않은 하위 그룹을 닫는다
if($ID(ofenMENU_DIV2[i])){
$ID(ofenMENU_DIV2[i]).style.display="none";
//그룹을 닫고 해당 네임을 지운다
// 닫을 메뉴명을 빼기 위한 장치
ofenMENU_DIV=rename;
}
}
}//$ID(ofenMENU2[i])
}//end for
if(nowMenuDEP_number==1){ // 다른 메뉴로 넘어갔기에 1차 메뉴에 귀속된 모든 메뉴를 닫는다
ofenMENU_DIV="";
}
}//열려진 서브 메뉴가 있는지 검사해서 현재 있는 곳의 링크와 같다면 (같은 그룹이면 )그대로 두고 그렇지 않으면 닫는다
//서브 메뉴가 있다면 연다
if($ID(linkID_targetUL)){
//마우스 오버된 곳의 서브 메뉴를 열고 기록한다
$ID(linkID_targetUL).style.display="inline-block";
ofenMENU_DIV+=linkID_targetUL+"|";//현재 열려진 서브메뉴 팝업창의 아이디를 배열로 저장
}
/**************************************
* 팝업의 스타일을 지정 *
**************************************/
if($ID(linkID_targetUL)){
//첫번째 1차 메뉴라면
if(nowMenuDEP_number==1){
ofenMenuSUBJECT=linkID;
// 익스7에서 포지션 위치 계산이 틀림
//elementLeft=parseInt($ID(this.id.split("_A")[0]).offsetLeft);
//elementTop= parseInt($ID(this.id.split("_A")[0]).offsetTop)+parseInt($ID(this.id.split("_A")[0]).offsetHeight)+10;//리스트를 10으로 잡아놔서 바로 밑에 달라붙어서 여유를 줌
var cssName=$ID(linkID_targetUL).className;
//alert(document.getElementsByClassName(cssName)[0].style.margin);
$ID(linkID_targetUL).style.margin="-5px 0px 0px -5px"; // 분기 아래에 뒀던걸 위로 올림
//$ID(linkID_targetUL).style.margin= $ID(this.id.split("_A")[0]).style.margin;
}
else{ // 숨겨진 2차메뉴들의 위치
elementLeft=parseInt($ID(this.id.split("_A")[0]).offsetLeft)+parseInt($ID(this.id.split("_A")[0]).offsetWidth)-10;//+45;
elementTop= parseInt($ID(this.id.split("_A")[0]).offsetTop)-1;
$ID(linkID_targetUL).style.position="absolute"; // 분기 아래에 뒀던걸 위로 올림
$ID(linkID_targetUL).style.left=elementLeft+"px";
$ID(linkID_targetUL).style.top=elementTop+"px";
}
}
return false;
}//end $ID(menu.id).onmouseover;
$ID(menu.id).onmouseout=function(event){
linkID=this.id;
linkID_targetUL=this.id.split("_A")[0]+"_1";
if($ID(linkID_targetUL)){
//
}
return false;
}
/**************************************
* 클릭으로 닫기 *
**************************************/
document.onclick=function(){
ofenMENU_DIV_len = ofenMENU_DIV.split("|").length;
var ofenMENU_DIV2 = ofenMENU_DIV.split("|");
for(i=0;i<ofenMENU_DIV_len;i++){
if($ID(ofenMENU_DIV2[i])){
$ID(ofenMENU_DIV2[i]).style.display="none";
}
}//end for
ofenMENU_DIV="";
// return false; //링크가 있으므로 사용할때는 닫아줄것
}
//윗 부분은 따로 함수로 빼서 재 사용하는데 지장 없도록 할것
}//menu.nodeName=="A"
//자식 노드가 있을 경우만 불러들이도록 할것 스택 오류날수 있음
sublist2(coverID);
}
else
if(menu.nodeName=="LI"){//이곳 호출 안됨
if(!menu.id)menu.id="LIsub"+i;
coverID=menu.id;
sublist2(coverID);
}
else{
// continue;
}
}
}
}
function sublist2(subID){
var tags = "";
tags = $ID(subID).childNodes;
var tag_len = tags.length;
var s=1;
for(var i=0; i<tag_len; i++) {
menu=tags[i];
if(menu.nodeType==1){
if(menu.nodeName=="UL"){
menu.id=subID+i;
coverID=menu.id;
//자식 노드가 있을 경우만 불러들이도록 할것 스택 오류날수 있음
sublist(coverID);
}
else
if(menu.nodeName=="LI"){//써브 없는 리스트
if(!menu.id)menu.id=subID+"_"+s;
s++;
coverID=menu.id;
/*****************************************
* 서브 메뉴가 있으면 화살표 표시 *
*****************************************/
//자식 노드 중에 ul이 폼함 되어 있으면
tagUL = $ID(coverID).childNodes[2];
if(tagUL){
if(tagUL.nodeName=="UL" ){
split_len= coverID.split("_").length;
//첫번째 1차 메뉴라면
if(split_len>4){
//해당 리스트에 입혀짐
var arrowGIF = document.createElement("SPAN");
//arrowGIF.id = rollinOneNewsID+num;
arrowGIF.innerHTML = "▶";//<img src=\"reading.gif\">
arrowGIF.style.margin = "0px 0px 0px 0px";
arrowGIF.style.padding = "0px 0px 0px 0px";
// arrowGIF.style.width = "100%";
arrowGIF.style.height = "23px";//15pxlistH+"px";//
// arrowGIF.style.fontFamily = "굴림,돋움";
// arrowGIF.style.fontSize = "9pt";
// arrowGIF.style.lineHeight = "100%";//120%
arrowGIF.style.position = "absolute";//120%
arrowGIF.style.right = "15px";//120%
//arrowGIF.style.top = "5px";//120%
arrowGIF.style.color = "#787474";
$ID(coverID).appendChild(arrowGIF); //만들어진 ul에 자식 노드로 넣는다
}
}
}
/*****************************************
* 서브 메뉴가 있으면 화살표 표시 *
******************************************/
sublist(coverID);
}
else{
// continue;
}
}
}
}
/* 메뉴 */
//메뉴가 들얼간 div의 명칭만 안에 넣으면 됨
function memuCALL(){
sublist("topMenuDIV")
}
// 문서 로드후 메뉴 띄우기
onLoad_Event(memuCALL);
</script>
--------------------------- 메뉴 ------------------
<div id="mainMENU_containner">
<link rel="stylesheet" href="menu_style.css" title="style" media="all" />
<div id="topMenuDIV">
<h2 style="display:none;"></h2>
<UL class="topMenu">
<li class="topMenu_LI"><a href="/">홈</a></li>
<li class="topMenu_LI"><a href="/community/">커뮤니티</a>
<ul class="topMenu_UL">
<li class="topMenu_LI"><a href="/notice/">공지사항</a></li>
<li class="topMenu_LI"><a href="/free/">자유게시판</a></li>
<li class="topMenu_LI"><a href="/qanda/">질문 게시판</a></li>
<li class="topMenu_LI"><a href="/study/">스터디</a>
<ul class="topMenu_UL">
<li class="topMenu_LI"><a href="/js_study/">자바스크립트</a></li>
<li class="topMenu_LI"><a href="/php_study/">html 기초</a></li>
<li class="topMenu_LI"><a href="/html_study/">php 기초</a></li>
<li class="topMenu_LI"><a href="/html_study2/">5차메뉴</a>
<ul class="topMenu_UL">
<li class="topMenu_LI"><a href="/php_study2/">php 기초2</a></li>
</ul>
</li>
</ul>
</li>
<li class="topMenu_LI"><a href="/test_board/">테스트 게시판</a></li>
</ul>
</li>
<li class="topMenu_LI"><a href="/marihome/">마리홈</a>
<ul class="topMenu_UL">
<li class="topMenu_LI"><a href="/mari_history/">마리홈 개발</a></li>
</ul>
</li>
<li class="topMenu_LI"><a href="/guest/">방명록</a></li>
<li class="topMenu_LI"><a href="/community2/">다운로드</a></li>
<li class="topMenu_LI"><a href="/portfolio/">메뉴</a></li>
<li class="adminEDIT">관리자</li>
</UL>
</div>
</div>
정말 감사합니다.
잘 이해가 안되어서 그대로 소스 옮겨서 실행해 보니 잘 되네요.
근데 제가 사용하는게 빌더여서 거기서 테이블을 가지고 와서 잘 되게 하는데, 이거는 수동으로 메뉴를 만들어야 하나 봅니다.
뭐 관리자페이지에서 기능 안되더라도 수동이라도 작동하면 되서 시간날때 시도해 보겠습니다.
http://withlcc.com/menu.php
올려주신 것 테스트 아주 잘 보이네요.
http://withlcc.com/airlines/main.php?bo_table=jejuair
현재 최신글에 분류로 되어 있는 것을 각각 게시판으로 다시 생성해야 할거 같습니다.
혹시 조언 주실수 있는거 있으면 추가로 부탁 드립니다.
감사합니다.
계속 부탁만 드리는거 같네요 ㅠ
jqueryslidemenu.js 라는 라이브러리가 있습니다.
정적인 메뉴는 그냥 작업하면 되겠고
그누보드하고 동적연동하시려면 php단에서 작업을 좀 해주셔야 할거예요.
정적인 메뉴는 그냥 작업하면 되겠고
그누보드하고 동적연동하시려면 php단에서 작업을 좀 해주셔야 할거예요.
감사합니다.
지금 빌더를 그누보드 위에 설치를 해서 사용하고 있습니다.
잘 몰라서 뭐 수정하려고 하면 고민 스럽네요 ;;
그누보드 메뉴생성 기능이 3단메뉴를 지원하나요? 요즘껀 안깔아봐서리..
지원 안하면 답이 없어요. 바트빌더에는 그렇게 되도록 만들었었는데 그누보드메뉴생성기가 생기는바람에 빌더개발 때려치움 ㅜㅜ
지원 안하면 답이 없어요. 바트빌더에는 그렇게 되도록 만들었었는데 그누보드메뉴생성기가 생기는바람에 빌더개발 때려치움 ㅜㅜ
질문 게시판에 검색해 봤는데, 어느분이 저처럼 저렇게 하려고 새로 생긴 메뉴관리 기능에 넣어달라고 했는데, 힘들다고 하는 글을 봤습니다.
안됩니다. 저거 때문에 지금 고민이네요 ;;
위에 올려주신 사진으로 볼때는
구룹 명 -> 테이블 명 -> 분류 명으로
나눠지는 것 같습니다.
메뉴관리와는 별개로요 ㅎ
뭐 어떤거든 되기만 하면 되서요 :)
저거는 예전 스킨 게시판에 있는거 이미지 입니다.
잘되신다니 다행이네요
제가 사용하는 프로그램에 맞춰서 급하게 만들어 놓은거라 고쳐야 할곳이 있긴하지만
표현하는데 크게 문제는 없어 보이더라구요
그누보드5용으로 3단이상 지원되는 메뉴 구조를 파악중에 있습니다
필드를 서너개 추가해야하지만 표현은 되더라구요
좀 볼만하다 싶으면 자료 올리고 쪽지 드릴께요 :)
그대로 보여지는건 잘 보여지는데, 저의 상황에 맞고 고치는게 문제라서요 ㅠㅠ
g5를 사용하시는 거라면 문제없이 사용하실수 있을거 같고
수정된 사항이 어떠한 상황인지는 몰라도 구조라는게 비슷 비슷하거든요
게시판에서 원보글 밑에 답글 달리고 그아래에 계속 답글 달리지만
글번호가 틀어지지 않듯이
메뉴 깊이 구조도 게시판 글 구조마냥 불러서 정렬하는 것이라
아주 특이하게 메뉴를 불러다 쓰는 형식이 아닌 수정본이라면 가능할겁니다
다만 소스 g5 밖에 제가 설치한게 없어서 거기에 준해서 만드는거니 수정본을 사용하신다면
거기에 맞게 튜닝만 하면 될거예요 :)
일단 만들고 내어 놓아서 이상 없으면 일산사랑님 홈에 맞게 튜닝해 드리겠습니다
답변을 작성하시기 전에 로그인 해주세요.
