메뉴 구성중 active를 클래스에 자동으로 추가되게했는데 조금 문제가...
본문
안녕하세요.
테스트삼아 소스 분석해 보고 있는데,
전문적인 지식이 없다보니 막히는게 있어서 문의 드립니다.
아래는 홈페이지 소스중 메뉴부분 일부입니다.
페이지에 .menu01이 있으면 .depth21에 active가 추가되고
.menu02이 있으면 .depth22에 active가 추가되는....
일단 이 소스로 모든게 원하는대로 정상적으로 작동되고 있습니다.
아래 그림처럼 active가 있으면 소메뉴 부분이 대메뉴에 맞게 변경이 되는건데...
문제는 페이지가 변경 될때 마다 저 소메뉴 부분만 한번 깜빡거리고 변경이 되네요.
스크립트를 쓰지 않고 각 페이지마다 수동으로 active를 적어 놓으면 깜빡거림이 전혀 없고요.
이거 혹시 해결할 수 있는 방법이 없을까요?
<script>
$(function(){
cnt = $(".menu01").size();
if(cnt>0){
$(".depth21").addClass("active");
}
cnt = $(".menu02").size();
if(cnt>0){
$(".depth22").addClass("active");
}
})
</script>
<ul class="gnb">
<li>
<a href="">대메뉴1</a>
<div class="depth2_Wrap depth21 ">
<div class="depth2">
<div class="depth2_mn pos1">
<a href="">소메뉴11</a>
<a href="">소메뉴12</a>
</div>
</div>
</div>
</li>
<li>
<a href="">대메뉴2</a>
<div class="depth2_Wrap depth22 ">
<div class="depth2">
<div class="depth2_mn pos2">
<a href="">소메뉴21</a>
<a href="">소메뉴22</a>
</div>
</div>
</div>
</li>
</ul>
답변 1
처음 기본적인 형태로 보이고 페이지 로딩이 끝나면 active로 변경되니 그렇게 되겠지요
자바스크립트를 메뉴 아래쪽으로 이동하고
$(function(){ <--- 이 부분을 삭제해보세요
친절하신 답변 감사합니다.
제가 이런쪽으로 전문지식이 아예 없어서요.
그런데... 스크립트를 메뉴 아래쪽으로 내려도 그대로고,
말씀하신 부분은 삭제하면 정상작동하지 않네요.(소메뉴가 나오질 않습니다.)
수정한 내용을 그대로 소스 올려보세요
자바스크립트 마지막 부분 }) <--- 이것도 삭제 했나요?
$(function(){ ~~~~ }); <---이게 한 묶음
네 당연히 그부분도 같이 삭제 하였습니다.
그 부분을 삭제하면 아예 소메뉴 부분이 나오질 않네요.
menu01, menu02라는 class가 나오는 부분 뒤에 넣으세요
스크립트를 menu01, menu02 뒤 최하단으로 빼도 동일하더라고요.
저는
menu01 대신 cnt = $(".menu01").size(); 부분을 그냥 cnt =1로해서
테스트 해보니 잘 됩니다
동일하다는 것이 깜빡임을 말하는 것인가요?
자바스크립트 이동으로 안된다면 depth21, depth22를 스타일 지정해서 숨김으로 해놓고
active를 추가한 후 보이게 하는 방법으로 해보세요
자바스크립트 원래대로 복구 한 후
<style>
.depth21, .depth22{visibility:hidden;}
</style>
<script>
$(function(){
cnt = $(".menu01").size();
if(cnt>0){
$(".depth21").addClass("active");
}
cnt = $(".menu02").size();
if(cnt>0){
$(".depth22").addClass("active");
}
$(".depth21, .depth22").css("visibility", "visible");
})
</script>
균이님 소중한 시간 할애해서 계속 답변 주셔서 정말 감사합니다.
그런데 알려주신대로 해봐도 여전히 소메뉴 부분이 깜짝 거립니다.
소스의 일부분만 있어서 제대로 파악이 안되는거 같아
아래 주소에 소스 정리해서 보여지게 올려봤습니다.
http://xn--2i0bu0foyc1um.kr/
대메뉴 1은 알려주신대로 한거고,
대메뉴 2도 알려주신대로 한건데, 스크립트를 하단으로 내렸습니다.
그런데 대메뉴1이나 2나 페이지가 새로 고침될때 페이지 이동시 소메뉴 부분이 처음에 한번 깜빡 거립니다.
대메뉴 3은 스크립트를 빼고 active를 수동으로 직접 입력 했습니다.
이곳은 아무리 새로고침을 하거나 페이지 이동을 해도 소메뉴 부분이 전혀 깜빡 거리지 않습니다.
아... 참고로 active부분 말고 on부분은 이미 구현한 스크립트 있는데,
혹시 이거랑 충돌되는거 때문에 깜빡 거리는건가 해서 이부분은 스크립트 빼고,
on도 수동으로 입력한 상태입니다.
=============================================================
그런데... 지금보니 크롬에서만 이런거 같고 파폭에서는 깜빡임이 없네요.
이전 제 소스로도요.
익스는 또 미세하게 모든 메뉴 깜빡임이 있는거 같고요.
