메뉴에서 .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"); 실행시키면 내려오는것처럼
브라우저에서 눈속임을 줍니다..
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인