테스트 사이트 - 개발 중인 베타 버전입니다

메뉴에서 .slideDown이거 질문이요~ 채택완료

홀로그램웹 3년 전 조회 2,340

우측에 햄버거 바 클릭하시면 메뉴들이 나오는데 

대메뉴를 클릭하면 대메뉴가 올라가면서 아래 하위메뉴가 뜨거든요

그런데 대메뉴가 뚝뚝 끊기면서 올라가서 매끄럽지가 않아요~

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개

채택된 답변
+20 포인트

소스가 너무 난잡 합니다. 어떻게 이렇게 만들었대요. ㅠㅠ;

 

보통 스크롤을 제이쿼리로 만들때

jQuery('#TopNavi_sub').slideDown('slow').show();  

jQuery('#TopNavi_sub').slideUp('fast').show(); 

을 많이 쓰시는데요

 

팁하나 드리자면은요

빠르게 작동 시키고자 함이 기본 전제한다고 가정하고요

style 에서 id 위치를 top:-100px 해놓고요

 

이벤트로 jQuery("id값").attr("style","top:100px"); 실행시키면 내려오는것처럼

브라우저에서 눈속임을 줍니다.. 

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인