묻고답하기
xe 디폴트 레이아웃 메뉴부분 수정
2014.11.04 12:46
안녕하세요. xe 디폴트 레이아웃 2단 메뉴 쓰는데 상단 메뉴 클릭시 클릭한 메뉴만 2단에 나오게 하고 싶은데
첨부 그림과 같이 전체 2단 메뉴가 보입니다.
혹시 이걸 해당클릭시 클릭한 메뉴 하위만 보이게 하려면 어느 부분을 수정을 해야하는건지.
도움 부탁드립니다.
====================================================================
Default.layout.js 내용입니다
jQuery(function($){
// GNB
var $gnb = $('.gnb');
var $gnb_li = $gnb.find('>ul>li');
var $gnb_a = $gnb.find('>ul>li>a');
var $gnb_sub = $gnb.find('ul ul');
// IE 7 debug
if($.browser.msie && $.browser.version == "7.0"){
$gnb_a.each(function(){
$(this).width($(this).width());
});
}
if($gnb_sub.length){
$gnb.mouseover(function(){
$gnb.addClass('open');
});
$gnb.mouseleave(function(){
$gnb.removeClass('open');
$gnb_li.removeClass('hover');
});
}
$gnb_a.mouseover(function(){
$(this).parent('li').addClass('hover').siblings('li').removeClass('hover');
});
$gnb_a.focus(function(){
$(this).trigger('mouseover');
});
$gnb.find('a').focusout(function(){
setTimeout(function(){
if($gnb.find('a:focus').length == 0){
$gnb.trigger('mouseout');
}
}, 100);
});
// Visual Slide
var $visual = $('.visual');
var $visual_list = $visual.find('>.list');
var itemNum = $visual_list.find('>.item').length;
$visual_list.addClass('total'+itemNum);
var $last_item = $visual_list.find('>.item:last-child');
// Paragraph position
$visual.find('p').each(function(){
var $this = $(this);
$this.css('marginTop', Math.round(- $this.height()/2));
});
// Invalid href
$visual.find('a[href=""]').click(function(){return false});
// Item num
if(itemNum===1){
$visual.find('>button').remove();
} else if(itemNum===2){
$last_item.clone().prependTo($visual_list);
} else if(itemNum===3) {
$last_item.prependTo($visual_list);
}
// Prev
var $vpn = $('.visual, .visual>button');
$(window).load(function(){
$vpn.height($visual_list.find('>.item:eq(1)').height());
});
$visual.find('>.prev').click(function(){
$visual_list.animate({
left: '+=100%'
},400,function(){
var $last_item = $visual_list.find('>.item:last-child');
if(itemNum===3){
$last_item.prependTo($visual_list);
} else if(itemNum===2) {
$last_item.remove();
$visual_list.find('>.item:last-child').clone().prependTo($visual_list);
}
$visual_list.css('left','-100%');
$vpn.height($visual_list.find('>.item:eq(1)').height());
});
});
// Next
$visual.find('>.next').click(function(){
$visual_list.animate({
left: '-=100%'
}, 400, function(){
var $first_item = $visual_list.find('>.item:first-child');
if(itemNum===3){
$first_item.appendTo($visual_list);
} else if(itemNum===2) {
$first_item.remove();
$visual_list.find('>.item:first-child').clone().appendTo($visual_list);
}
$visual_list.css('left','-100%');
$vpn.height($visual_list.find('>.item:eq(1)').height());
});
});
});
====================================================
레이아웃 css 파일입니다.
@charset "utf-8";
/* Reset */
html,body{min-height:100%}
body{margin:0}
/* Skin to content */
.skip{margin:0}
.skip>a{display:block;text-align:center;line-height:28px;height:1px;overflow:hidden}
.skip>a:focus{height:auto}
/* Layout */
.container,
.footer>p{width:960px;margin:0 auto}
.header{position:relative;z-index:2;zoom:1;margin:0 0 17px 0}
.header>.side{position:absolute;z-index:2;right:0;bottom:57px;zoom:1}
.visual{position:relative;z-index:1;overflow:hidden;width:100%;margin:0 0 20px 0}
.body{position:relative;z-index:1}
.header:after,
.body:after{content:"";display:block;clear:both}
.content{padding:0 0 40px 0;zoom:1}
.content>*:first-child{margin-top:0}
.content img{max-width:100%;height:auto}
/* Header */
.header>h1{display:inline-block;*display:inline;zoom:1;margin:19px 0}
.header>h1>a,
.header>h1 img{display:block}
.header>h1>a{font-size:32px;text-decoration:none;color:#333}
/* Footer */
.footer{padding:25px 0 80px 0;background:#f8f8f8;border-top:1px solid #f4f4f4;color:#666}
.footer p{font-size:12px}
.footer a{text-decoration:none;color:#666}
.footer a:hover,
.footer a:focus{text-decoration:underline}
/* Login */
.account{margin-right:15px !important}
/* Search */
.header .search{display:inline-block;*display:inline;zoom:1;vertical-align:top;margin:0}
.header .search>input{font-size:12px;vertical-align:top;border-radius:2px}
.header .search>input[type="text"]{background:#e5e6e8;border:1px solid #dedede;height:21px;line-height:21px;padding:0 4px;margin:0 -6px 0 0;width:126px}
.header .search>input[type="submit"]{background:#484d51;border:1px solid #272b30;color:#fff;height:23px;line-height:23px;padding:0 15px;margin:0;cursor:pointer;box-shadow:0 1px 0 #6d7174 inset}
/* GNB */
.gnb{position:relative;z-index:1;border:1px solid #080808;font-size:13px;height:31px;clear:both;background-color:#080808;background:-webkit-linear-gradient(top, #2e2d32, #0c0c0e);background:-moz-linear-gradient(top, #2e2d32, #0c0c0e);background:-o-linear-gradient(top, #2e2d32, #0c0c0e);background:-ms-linear-gradient(top, #2e2d32, #0c0c0e);background:linear-gradient(top, #2e2d32, #0c0c0e);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#2e2d32, endColorStr=#0c0c0e)}
.gnb:before{content:"";display:block;background:#3e3e40;width:100%;height:1px}
.gnb ul{margin:0;padding:0;list-style:none}
.gnb a{text-decoration:none;white-space:nowrap}
.gnb>ul{position:absolute;top:32px;left:-1px;right:-1px;background:#464d5d;opacity:.98;filter:alpha(opacity=98);height:0}
.gnb.open>ul{height:auto;border-bottom:1px solid #333}
.gnb>ul:after{content:"";display:block;clear:both}
.gnb>ul>li{position:relative;top:-32px;float:left;margin:0 -1px -8px 0}
.gnb>ul>li>a{display:block;border-left:1px solid #3e3e40;border-right:1px solid #3e3e40;line-height:32px;padding:0 20px;color:#fff;position:relative}
.gnb>ul>li>a:after{content:"";position:absolute;width:1px;height:100%;right:0;top:0;background:#080808;overflow:hidden}
.gnb>ul>li.active>a,
.gnb>ul>li.hover>a{border-top:1px solid #4a505c;line-height:30px;padding-bottom:1px;background-color:#2f333b;background:-webkit-linear-gradient(top, #383c45, #0c0d0f);background:-moz-linear-gradient(top, #383c45, #0c0d0f);background:-o-linear-gradient(top, #383c45, #0c0d0f);background:-ms-linear-gradient(top, #383c45, #0c0d0f);background:linear-gradient(top, #383c45, #0c0d0f);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#383c45, endColorStr=#0c0d0f)}
.gnb ul ul{display:block;position:relative;z-index:2;padding:0 20px;margin:0 0 0 -1px;border-left:1px solid #424856;height:0;overflow:hidden}
.gnb.open ul ul{margin-top:6px}
.gnb ul ul:before{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:#4b5265}
.gnb.open ul ul{padding:13px 20px;height:auto}
.gnb>ul>li:first-child>ul{border:0}
.gnb>ul>li:first-child>ul:before{content:normal}
.gnb ul ul a{display:block;line-height:20px;font-size:12px;color:#fff}
.gnb ul ul a:hover,
.gnb ul ul a:focus{text-decoration:underline}
/* Visial */
.visual>.list{position:relative;width:300%;left:-100%;z-index:1}
.visual>.list:after{content:"";display:block;clear:both}
.visual>.list.total1{width:auto;left:0}
.visual img{display:block;max-width:100%;height:auto;margin:0 auto}
.visual a{display:block;float:left;position:relative;color:#fff;text-decoration:none;font-family:Corbel,Arial,Helvetica,sans-serif}
.visual a[href=""]{cursor:default}
.visual .total1 a{float:none}
.visual .total2 a,
.visual .total3 a{width:33.33%;}
.visual a>p{margin:-24px 0 0 0;padding:0 100px;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:47px;letter-spacing:-1px;line-height:1}
.visual.sub a>p{font-size:32px;text-align:left}
.visual>button{zoom:1;border:0;background:url(blank.gif);cursor:pointer;width:100px;position:absolute;z-index:2;top:0;bottom:0;margin:0;padding:0;color:#fff}
.visual>button:hover,
.visual>button:focus{background-color:rgba(0,0,0,.25)}
.visual>button>i{position:absolute;top:50%;left:50%;width:25px;height:50px;background:url(slideNav.png) no-repeat;margin:-25px 0 0 -12px;zoom:1}
.visual>.prev{left:0}
.visual>.next{right:0}
.visual>.prev>i{background-position:0 0}
.visual>.next>i{background-position:-25px 0}
/* LNB */
.body.sub .lnb{float:left;width:210px;margin:0 0 40px 0}
.body.sub .content{float:right;width:720px}
.body.sub .lnb>h1{margin:0;position:relative;z-index:2}
.body.sub .lnb>h1>a{display:block;line-height:36px;padding:0 18px;border-radius:3px;color:#fff;text-decoration:none;font-size:14px;border:1px solid #939395;background-color:#19191b;background:-webkit-linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);background:-moz-linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);background:-o-linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);background:-ms-linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);background:linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);zoom:1}
.body.sub .lnb ul{list-style:none;margin:0;padding:0}
.body.sub .lnb ul a{display:block;text-decoration:none;color:#333;font-size:13px}
.body.sub .lnb>ul{position:relative;z-index:1;border:1px solid #dcdcdc;padding:1px;margin:-1px 0 0 0;border-radius:3px}
.body.sub .lnb>ul>li>a{line-height:36px;padding:0 10px 0 18px;border-top:1px solid #eee}
.body.sub .lnb>ul>li.active>a,
.body.sub .lnb>ul>li>a:hover,
.body.sub .lnb>ul>li>a:focus{background:#f5f5f5;color:#3192d7}
.body.sub .lnb>ul>li:first-child>a{border-top:0}
.body.sub .lnb ul ul{padding:10px 0;border-top:1px solid #eee}
.body.sub .lnb li li>a{line-height:20px;padding:0 10px 0 25px}
.body.sub .lnb li li.active>a,
.body.sub .lnb li li>a:hover,
.body.sub .lnb li li>a:focus{background:#f5f5f5;color:#3192d7}
댓글 0
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
dishstks | 회원가입하면 가입대기자목록에 나올게하는 방법이 없나요? [4] | 2014.11.03 by dishstks |
열려리 | 웹서버 xe관리자모드 사이트메뉴편집 페이지오류 | |
초보중초보중초보 | 쿼리쓰는 법 좀 제발 알려주시면 안되나요? [8] | 2014.11.03 by 초보중초보중초보 |
dhchoi | 광고글이 도배 되고 있습니다..... 도와 주세요... [2] | 2014.11.03 by dhchoi |
로양 | Contact Us 모바일레이아웃 | |
XESTUDIO | 웹페이지가 잘려나오는 이유 - 고쳐주실분! [1] | 2014.11.03 by Hello_XE |
footok | 무한스크롤 질문이요.. [1] | 2014.11.03 by 몽실아빠 |
퐁층당 | 로그인이 안됩니다. | |
footok | 페이지 번호 링크 관련해서... | |
화랑529 | 추천, 반대시.. | |
화랑529 | 이런 인기글 어디서 구하죠?? [3] | 2014.11.03 by 화랑529 |
레몬소다 | 서버 이전 후 썸네일이 생기지 않고 있습니다. [1] | 2014.11.03 by 즈베즈다 |
KrteamENT | 특정 회원이 소유중인 글을 다른 멤버에게 넘기는방법 (??) [4] | 2014.11.03 by KrteamENT |
초보에용 | 안녕하세요 게시판 목록에 대한 문의입니다.. [5] | 2014.11.03 by 유케이 |
판디노 | 누리고 쇼핑몰 상세페이지에서 상품명을 xe보드로 가져오려면 [4] | 2014.11.03 by CosignStudio |
ray5273 | xe 레이아웃과 기능 구현에대한 질문입니다. [3] | 2014.11.03 by CosignStudio |
sdkfj24 | 게시판 글쓰기 등록 문의 [2] | 2014.11.03 by CosignStudio |
frogegg | 혹시 게시판 글 말고 덧글을 sns로 보내는 위젯 있나요? [1] | 2014.11.03 by KrteamENT |
양파F | 첨부파일 다운로드 설정 | |
길림성 | 회원정보 몇개 항목 레이아웃 |