묻고답하기
제 사이트의 css좀 봐 주실분 찾습니다;; ㅠ
2014.07.14 20:41
사이트 주소는 [["게시자 요청에 따른 도메인 삭제"]] 인데요..
크롬은 괜찮은데, 익스플로러에서는 조금 문제가 있습니다..
메뉴판은 1차메뉴를 클릭하면 2차 메뉴가 바로 아래에 뜨는 형식인데요
이런 방식으로 링크를 이동하면 각각의 1차메뉴에 깃들었던 모든 2차메뉴가 순간적(0.5초)으로 로딩되었다가 사라지고
정상적으로 해당 1차메뉴의 2차메뉴만 뜨는 이런 현상이 생깁니다..
이걸 해결하고자 css를 많이 쳐다봤지만 정렬절대값 문제가 아니냔 말에 알아봤던거구요..
그러나 마땅히 해결이 안돼네요...
그래서 제 레이아웃의 메뉴관련 css도 같이 동봉해 봅니다..
/* Lined Tab Navigation */
.tab.line{padding:0 0 35px 0; }
.tab.line ul{position:relative;margin:0;padding:0;list-style:none;font-size:12px;*zoom:1;}
.tab.line ul:after{content:"";display:block;clear:both;}
.tab.line li{float:left;margin-bottom:5px;}
.tab.line li a{position:relative;float:left;text-decoration:none;background:transparent;color:#333;}
.tab.line li a span{display:inline-block;height:30px;padding:6px 20px 6px 20px;letter-spacing:-1px;cursor:pointer;font-size:15px;}
.tab.line li ul{width:100%;position:absolute;top:40px;left:0;list-style:none;border:0;margin:0;padding:0;white-space:nowrap;overflow:hidden;*zoom:1;}
.tab.line li ul:after{content:"";display:block;clear:both;}
.tab.line li li{position:relative;left:-1px;padding:0 5px;border-left:1px solid #ddd;overflow:visible}
.tab.line li li a{padding:0;margin:0;border:0 !important;color:#666 !important;font-weight:normal;background:transparent;letter-spacing:normal;font-size:13px;}
.tab.line li.active a{margin-top:-1px;background:transparent;margin-bottom:-5px}
.tab.line li.active a span{padding-top:7px;font-weight:bold}
.tab.line li li a:hover,
.tab.line li li a:active,
.tab.line li li a:focus,
.tab.line li li.active a{font-weight:bold;letter-spacing:0px;color:#333 !important}
해결이 되면 좋겠네요...
댓글 16
-
DoorWeb
2014.07.14 20:46
-
멘탈가루루루루몬
2014.07.14 20:57
앗..제 사이트 좀 방문해 주시겠어요??! 접속되실거에요..
-
DoorWeb
2014.07.14 21:06
제가 글을 잘못 읽었습니다.
하위메뉴가 생성되었다가 사라지는걸로 아는데 전체 메뉴가 노출되었다가 사라지고 본 메뉴가 노출된다는 내용이더군요.
이건 css 문제가 아니라 그냥 js 처리속도로 인한 문제라 생각하십시오.
잡으려면 js를 잡아야 하는데....
그냥 처리속도 문제라 생각하시는게 속 편하실겁니다.
-
멘탈가루루루루몬
2014.07.14 21:09
헐.... ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 가르쳐주세요 가르쳐주세요 엉엉엉엉어어엉어엉어엉 저 그거 때문에 js 들 통합까지 해봤어요 ㅠㅠㅠ
-
DoorWeb
2014.07.14 20:53
조금더 설명을 들여야 할듯해서...
ie와 타브라우져는 z-index값을 잡아주는 기준이 조금씩 다릅니다.
그렇다 보니 비ie에서는 메뉴쪽 z-index가 높게 잡히고 ie쪽에서는 낮게 잡힐 수 있는데요.
만약 z-index값이 낮게 잡힌 상황이라면 하위메뉴가 body쪽 아래로 숨어버리는 형태가 되는지라 자연스럽게 하위메뉴에서 벗어나는 mouseover가 안되게 되는거죠. 그런 이유로 하위메뉴가 사라지고...
가장 확실하고 보편적인 방법은 header 부분과 body 부분의 z-index 값으로 header가 body 위로 오게 만들면 브라우져 종류에 상관없이 적용이 되기에 가장 안정적일겁니다.
-
멘탈가루루루루몬
2014.07.14 21:03
제 사이트가 header에 메뉴가 있는데 이 경우에도 해당하는 건지 잘모르겠습니다.. 일단 혹시나해서 그렇게 조정해 봤는데 해결이 잘 안된거같아요,,
사이트는 접속되실거에요
인터넷이 빠르면 익스플로러에서도 잘 관찰이 안될 때가 있어요
하지만 조금 느려지면 바로 관찰이 되더군요,,
-
DoorWeb
2014.07.14 21:12
tab.js를
jQuery(function($){
// Lined Tab Navigation
var $tab_line = $('.tab.line');
var tabtem = $tab_line.find('>ul>li');
$tab_line.removeClass('jx').find('ul ul').hide();
$tab_line.find('li li.active').parents('li').addClass('active');
$tab_line.find('li.active>ul').show();
function lineTabMenuToggle(event){
var $this = $(this);
tabtem.removeClass('active').find('>ul').hide();
$this.next('ul').show().parent('li').addClass('active');
if($this.attr('href') === '#'){
return false;
}
}
function lineTabSubMenuActive(){
$(this).parent('li').addClass('active').siblings('li').removeClass('active');
if($this.attr('href') === '#'){
return false;
}
};
$tab_line.find('>ul>li>a').click(lineTabMenuToggle).focus(lineTabMenuToggle);
$tab_line.find('li li>a').click(lineTabSubMenuActive).focus(lineTabSubMenuActive);
});
이렇게 한번 변경해 보세요 맞나 모르겠네요.
-
멘탈가루루루루몬
2014.07.14 21:13
무슨짓이든 다 하겠습니다 기다려주세요!
-
멘탈가루루루루몬
2014.07.14 21:19
일단 그대로 변경해서 적용해서 딱히 문제가 출력되진 않는데요?! 좀 겹치는 빈도가 줄어든 것 같기도 한데 그런 효과를 주는 방법인가요??
문제가 사라진 것은 아니지만요;; ㅎㅎ
-
DoorWeb
2014.07.14 21:30
그냥 먼저 하위메뉴가 사라지게 하고 클릭한 하위메뉴가 보이도록 순서를 바꿨습니다.
이렇게 하고도 문제 해결이 안되면 그냥 js 처리속도라고 밖에 달리 뭐라 말드리기가....
-
멘탈가루루루루몬
2014.07.14 21:32
그래서 처음 들어갈 때 제외하고는 많이 개선된것같은 기분이들었던거군요?! 이정도면 만족합니다!!너무 감사해요^^
-
DoorWeb
2014.07.14 21:38
그런 문제라면
.tab.line li ul{width:100%;position:absolute;top:40px;left:0;list-style:none;border:0;margin:0;padding:0;white-space:nowrap;overflow:hidden;*zoom:1;display:none}
.tab.line li.active ul{display:block}
로 css 빨간부분 추가해 보세요
-
멘탈가루루루루몬
2014.07.14 21:46
이럴수가. 완전히 잡혔습니다...
추가해결법 덕택에 처음 들어설 때부터 다른 메뉴를 클릭할 때 까지 잔상 메뉴들이 남지 않네요! 쪽지 보내드렸지만 정말 괴로운 문제에 부딪히면 번번히 도움받네요. 다시 한 번 감사합니다^^
-
큰성565
2014.08.02 18:34
도어웹님 ..! 사이트 수정관련해서 조금 도움받고 싶은게 있어서 그런데.. 코드수정좀 도와주실 수 있을까요..? 거창한 것은 아닙니다만...
-
DoorWeb
2014.08.02 18:37
외국이다 보니...
사이트 접근이 안되더군요.
-
큰성565
2014.08.02 18:58
제가 죄송합니다..;; 뭔가 다 완성된 사이트도 아니고 스팸이나 기타 게시글에 관리를 제 때에 할 자신이 없어서 국내접속만 허용하게 둔것이 불편하시게 하였네요..편하게 모셔야하는데..
아시겠지만 저는 메탈가루루루몬이구요;;;;
혼자 해내기 힘든 부분이 있는데 떠오르는 분이 몇 없어서 댓글참조해서 문의드렸는데 받으시네요 다행히도...
혹시 시간 되시면 잠깐 가능할까요??..
게시글은 http://www.xpressengine.com/qna/22811059
에 올려 둔 내용인데
cococob.com을 쓰고 있구요,,
이런 부분도 수정이 가능한지 잘 모르겠네요..
css 상으로는 큰 문제가 안보입니다.
.tab.line li a span{display:inline-block;height:30px;padding:6px 20px 6px 20px;letter-spacing:-1px;cursor:pointer;font-size:15px;}
이걸 보면 .tab.line li a의 높이는 42px이 확보되는 상태이고
.tab.line li ul{width:100%;position:absolute;top:40px;left:0;list-style:none;border:0;margin:0;padding:0;white-space:nowrap;overflow:hidden;*zoom:1;} 이걸보면 40px 위치에 놓이니까 충분히 .tab.line li a와 공간중복이 되는지라...
이 부분보다는 정확하게는 사이트를 봐야 알겠지만(제가 외국이다 보니 사이트가 안열려서 답변 달기가 힘듭니다.)
아마 header 부분과 body 부분의 z-index 문제가 아닌가 싶습니다. header에 body 보다 높은 z-index 값을 줘 보세요.