메뉴에서 .slideDown이거 질문이요~
관련링크
본문
우측에 햄버거 바 클릭하시면 메뉴들이 나오는데
대메뉴를 클릭하면 대메뉴가 올라가면서 아래 하위메뉴가 뜨거든요
그런데 대메뉴가 뚝뚝 끊기면서 올라가서 매끄럽지가 않아요~
CSS는 문제가 없는데 이거 스크립트로 조정될까요?
$(function() {
var $wrap = $('#wrap'),
$header = $('header'),
$navi = $('#navi'),
$gnb = $('#gnb > ul'),
$gnbHover = $('#navi #gnb > ul > li'),
$gnbHover_a = $('#navi #gnb > ul > li a'),
$gnbSub = $('#navi #gnb > ul > li > ul'),
$bnt_all = $('.rightbtn'),
$gnb_bg = $('header .gnb_bg'),
$btn_all = $('.btn_all'),
$lnb_p = $('#lnb p.sub_title'),
$lnbul = $('#lnb ul'),
$lnbli = $('#lnb li'),
$btn_top = $('.btn_top'),
$rightbtn = $('.rightbtn'),
$searchTop = $('.searchTop'),
$rightbtnBox = $('#rightbtnBox');
$(window).on('scroll', function() {
bodyScroll = $(document).scrollTop();
if (bodyScroll > 0) {
$header.addClass('fix');
$header.parent().parent().addClass('fix');
} else {
$header.removeClass('fix');
$header.parent().parent().removeClass('fix');
}
});
var menuCont = function() {
$searchTop.on('mouseenter', function() {
$(this).addClass('on');
});
$gnbHover.each(function() {
if ($wrap.is('.web')) {
$(this).on('mouseenter', function() {
$header.addClass('on');
$navi.addClass('over');
$('#navi #gnb > ul > li').removeClass('on');
$(this).addClass('on');
$gnb_bg.addClass('on');
});
} else {
$(this).off('mouseenter mouseleave');
}
});
$header.on('mouseleave', function() {
$header.removeClass('on');
$navi.removeClass('over');
$(this).removeClass('on');
$gnb_bg.removeClass('on');
});
}
var windowSize = function() {
var winWidth = $(window).width();
$bnt_all.off('click');
$bnt_all.click(function() {
$header.removeClass('on');
$navi.removeClass('over');
$('#navi #gnb > ul > li').removeClass('on');
$gnb_bg.removeClass('on');
$header.toggleClass('ov');
$rightbtn.toggleClass('on');
$rightbtnBox.toggleClass('on');
$searchTop.removeClass('on');
if ($(this).is('.on')) {
$('.menuTop').clone().appendTo('#rightbtnBox .menuBox');
$('#rightbtnBox #gnb > ul > li').each(function() {
$(this).not('.link').children("a").off("click").on("click", function(e) {
e.preventDefault(); //a 태그 막기
var depth2 = $(this).siblings('.depth2');
if (!depth2.is(':visible')) {
$('#gnb > ul').find('.depth2').stop().slideUp();
depth2.stop().slideDown();
$('#gnb > ul li').removeClass('hover');
$(this).parent().addClass('hover');
} else {
$('#gnb > ul').find('.depth2').stop().slideUp();
$('#gnb > ul li').removeClass('hover');
};
});
});
} else {
$('#rightbtnBox .menuBox').empty();
$('.rightbtn_bottom').empty();
$(this).removeClass('on');
$wrap.parent().removeClass('hidden');
$wrap.parent().parent().removeClass('hidden');
$header.removeClass('ov');
$rightbtn.removeClass('on');
}
});
$(document).on('click','#rightbtnBox #gnb > ul > li > ul > li a',function(){// 복제
$('#rightbtnBox .menuBox').empty();
$('.rightbtn_bottom').empty();
$wrap.parent().removeClass('hidden');
$wrap.parent().parent().removeClass('hidden');
$header.removeClass('ov');
$rightbtn.removeClass('on');
$rightbtnBox.removeClass('on');
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top - 100
}, 700);
}
}
});
menuCont();
}
var headerRe = function() {
if (!navigator.userAgent.match(/Android|Mobile|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/)) {
if ($bnt_all.is('.active')) {
$bnt_all.click();
}
}
}
$(window).load(function() {
windowSize();
headerRe();
menuCont;
});
$(window).resize(function() {
windowSize();
headerRe();
menuCont;
});
$(window).on("orientationchange", function(event) {
windowSize();
headerRe();
menuCont;
});
});
혹시 몰라 링크 첨부했어요~
답변 1
소스가 너무 난잡 합니다. 어떻게 이렇게 만들었대요. ㅠㅠ;
보통 스크롤을 제이쿼리로 만들때
jQuery('#TopNavi_sub').slideDown('slow').show();
jQuery('#TopNavi_sub').slideUp('fast').show();
을 많이 쓰시는데요
팁하나 드리자면은요
빠르게 작동 시키고자 함이 기본 전제한다고 가정하고요
style 에서 id 위치를 top:-100px 해놓고요
이벤트로 jQuery("id값").attr("style","top:100px"); 실행시키면 내려오는것처럼
브라우저에서 눈속임을 줍니다..