묻고답하기
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 부여해서 스타일 바꾸는 방법으로 반정도 해결했습니다 ㅠㅠ
친절한 대답 감사했습니다 ㅠㅠ
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
마리아미르 | 위지윅 에디터 메뉴 클릭시 에러 [3] | 2015.02.03 by Kxo |
비상9 | [질문] 스케치북게시판 -업데이트시 최상위에 표출할수 있는 방법 [2] | 2015.02.03 by 비상9 |
파표 | 3차메뉴가 안나와요ㅠ [1] | 2015.02.03 by DoorWeb |
검푸 | 사이트 복원을 했는데. 메뉴 클릭시 404 error 나옵니다. [3] | 2015.02.03 by bluedream |
묭묭이 | 좀급하네요 ㅜㅜ수정관련 | |
노에르 | nginx + php-fpm + mariaDB 구성해서 xe를 설치했는데요.. [2] | 2015.02.03 by 노에르 |
추억팔이 | mono 레이아웃 본문 테두리 수정 | |
hshlalla | 이거 어떤 플레이어인지 알수 잇을까요ㅜㅜ?? [2] | 2015.02.02 by hshlalla |
짼이짼 | 확장변수 중 관리자만 볼 수 있는 확장변수? [2] | 2015.02.02 by 짼이짼 |
Dingsoft | 위젯 자바스크립트 질문입니다. [3] | 2015.02.02 by 총모아 |
GwangHoon | 다시 질문 올립니다.ㅠ 설문조사 관련. [7] | 2015.02.02 by 세상의모든계산기 |
앵그리고구마 | 댓글 회원정보 아이콘 지우는 방법 | |
빅스타 | 제발 도와주세요 ㅠㅠ으 미치겠네 ㅠ | |
도메인8295 | 로그인 폼.. | |
김기정746 | 혹시 이런 기술이 가능 할까요 ? [2] | 2015.02.02 by mindpainter |
슬로터 | 본인인증 문의. 오케이네임 KCB를 사용중인데.. [2] | 2015.02.02 by 슬로터 |
askanhr | 검색과 관련된 초보 유저입니다. 도와주세요ㅠㅠ [1] | 2015.02.02 by askanhr |
newfeed | 게시판 권한설정이 안됩니다. [1] | 2015.02.02 by 퍼니엑스이 |
xenewbie | 사이트 이전 관련 문의 드립니다 [4] | 2015.02.02 by xenewbie |
xenewbie | 아파치 버전과 웹호스팅 [2] | 2015.02.02 by xenewbie |
.body.sub .lnb ul ul ul{display: none}이면 감출 수 있을듯 한데요..
하지만 보이는게 문제인데 오버시 나오게 하는거면 css만으로 가능하지만...
.body.sub .lnb ul ul li:hover ul {display: block}
클릭시 나오게 하시려면 js파일도 건드리셔야 할듯싶네요..