메뉴에서 .slideDown이거 질문이요~

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
메뉴에서 .slideDown이거 질문이요~

QA

메뉴에서 .slideDown이거 질문이요~

답변 1

본문

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

987808342_1638491990.9565.png

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

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

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"); 실행시키면 내려오는것처럼

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

 

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 20
© SIRSOFT
현재 페이지 제일 처음으로