묻고답하기
3차메뉴 펼침접힘 기능을 추가하고 싶습니다ㅠ
2015.01.29 17:31
메뉴에 관하여 질문이 있어 글올립니다
홈페이지를 만드는 데 2차메뉴까지 만을 사용하려고 했으나 3차메뉴까지 만들어도 각 페이지에 분류가 또 있는 홈페이지이라
최소 3차메뉴까지는 써야하는 상황에 있습니다.
그래서 XE 기본으로 깔려 있던 default 테마를 바꿔 만들었는데 3차메뉴에 대한 기능이 없어 일단 레이아웃을
<nav class="lnb" cond="$layout_info->LAYOUT_TYPE == 'SUB_PAGE'">
<h1 loop="$GNB->list=>$key1,$val1" cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></h1>
<ul loop="$GNB->list=>$key1,$val1" cond="$val1['selected'] && $val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
<ul cond="$val2['selected']">
<li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']" ><a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a></li>
</ul>
</li>
</ul>
</nav>이렇게 변경하여 3차메뉴를 나오게 까지 하는데는 성공했습니다
그래서 적용된 모습이
이건데요
살짝 들어간 메뉴들이 3차메뉴 입니다 ㅠ
하지만 보시다 시피 다 펼쳐져 있는 상태라 2차 메뉴들과 구분하기가 힘들고 메뉴가 너무 많아 복잡해 보이는 지라 3차메뉴는 2차메뉴를 클릭한 당시에만 펴져 보이게 하고 싶어 수정을 해볼려고 했는데
어떻게 수정해야 될지를 모르겠습니다 ㅠ
현재 css는 이렇구요
.body.sub .lnb{float:left;width:210px; margin:0; background: url(./images/lnb_b.png) no-repeat;}
.body.sub .lnb>h1{margin:0;position:relative;z-index:2}
.body.sub .lnb>h1>a{display:block;text-decoration:none;}
.body.sub .lnb ul{list-style:none;margin:0;padding:0}
.body.sub .lnb ul a{display:block;text-decoration:none;color:#333;}
.body.sub .lnb>ul{position:relative;z-index:1;margin:0;}
.body.sub .lnb>ul>li>a{margin:0px;}
.body.sub .lnb>ul>li.active>a,
.body.sub .lnb>ul>li>a:hover,
.body.sub .lnb>ul>li>a:focus{}
.body.sub .lnb>ul>li:first-child>a{border-top:0}
.body.sub .lnb ul ul{margin:0px; display:none !important;}
.body.sub .lnb li li>a{margin:0px;}
.body.sub .lnb li li.active>a,
.body.sub .lnb li li>a:hover,
.body.sub .lnb li li>a:focus{margin:0px;}
css 부분에서 display:none;을 사용해볼려고 했는데 2차메뉴까지 보이지 않게되고; 3차메뉴만 보이지 않게 하는게 안되더군요 ㅠ
js 부분은 적용된게 아무 것도 없습니다.
미흡한 실력으로 고생하고 있는 초보에게 조언 좀 부탁드리겠습니다 ㅠㅠㅠ
댓글 7
-
mindpainter
2015.01.29 17:40
-
쏘블링
2015.01.29 17:53
.body.sub .lnb ul ul ul{display: none}가 먹히질 않네요 ㅠㅠㅠㅠㅠㅠㅠㅠ
-
mindpainter
2015.01.29 18:49
앗 헷갈리네요.. ul이 두개 네요..
테스트 해보니 첨부파일에서 보듯이 css는 맞게 되어 있는것 같은데요.. -
mindpainter
2015.01.29 19:11
펼쳐지는 건 이렇게요..
-
쏘블링
2015.02.02 11:24
답변감사합니다!
css로 적용 시키는 것은 성공했는데 역시 자바스크립트에서 걸리네요
접힘펼침에 관해서 자바스크립트를 찾아서 적용해 볼려고 이렇게 해봤는데 안되더군요 ㅠ
혹시 이것에 관해서도 질문드려도 될까요 ㅠㅠㅠ
-
mindpainter
2015.02.02 18:13
뭘하시려는건진 잘 모르지만..jQuery 선언은
jQuery(function($)){ 가 아니고
jQuery(function($){이고
제일아래는 }); 입니다.그리고 마우스 오버하면 나타나게 하는건
$(오버하려는 대상).each(function () {
$(this).hover(function () {$(this).find(나타나게하려는 대상).show();
});
});
이 골격으로 짜 보시구요.. 기본제공하는 default스킨에도 나타나고 없어지는 jquery소스는 들어 있습니다.
-
쏘블링
2015.02.03 16:44
2차메뉴에 onclick 부여해서 스타일 바꾸는 방법으로 반정도 해결했습니다 ㅠㅠ
친절한 대답 감사했습니다 ㅠㅠ
.body.sub .lnb ul ul ul{display: none}이면 감출 수 있을듯 한데요..
하지만 보이는게 문제인데 오버시 나오게 하는거면 css만으로 가능하지만...
.body.sub .lnb ul ul li:hover ul {display: block}
클릭시 나오게 하시려면 js파일도 건드리셔야 할듯싶네요..