테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

모바일 스와이프 메뉴(가로 스크롤 메뉴) 도와주세요ㅠㅠ 채택완료

광깔 5년 전 조회 5,198
답변 1
목록

모바일 스와이프 메뉴 (가로 스크롤 메뉴)를 적용했습니다.

http://test.pushnews.io/?device=mobile" rel="nofollow">http://test.pushnews.io/?device=mobile

위 사이트에 적용했는데..

1번째에서 3번째 메뉴까지는 현재창에서 메뉴를 클릭 > 선택한 메뉴가 보이는데..

5번째, 6번째 메뉴 선택 시...

페이지 이동 및 메뉴 선택까지는 되는데...

화면에서 메뉴 부분이 보이질 않네요ㅠㅠㅠ

sir 모바일 사이트처럼 선택한 메뉴가 보여졌으면 좋겠는데..

이 부분은 어떻게 수정을 해줘야하는 걸까요...??

 

지금 있는 것도 

코드펜 소스 응용해서 적용한 부분이라서 

아시는 분 자세한 답변 좀 부탁드릴게요...!!!

 

 

 

head.php 파일 중 해당 부분

</p>

<p><div class="pn-ProductNav_Wrapper">

    <?php

        $main_pg = $_SERVER['REQUEST_URI'];

        $aria = "aria-selected=";

        $a_t = "true";

        $a_f = "false";

        $aria_t = $aria.$a_t;

        $aria_f = $aria.$a_f;

        

    ?>

    <nav id="pnProductNav" class="pn-ProductNav">

        <div id="pnProductNavContents" class="pn-ProductNav_Contents">

            <a href="<?php echo $at_href['home']; ?>" <?php echo ($main_pg == '/' || $main_pg == '/?device=mobile')?$aria_t:$aria_f; ?>

                class="pn-ProductNav_Link">홈</a>

            <a href="/bbs/board.php?bo_table=board01" <?php echo ($bo_table == 'board01')?$aria_t:$aria_f; ?>

                class="pn-ProductNav_Link">증권속보</a>

            <a href="/bbs/board.php?bo_table=board04" <?php echo ($bo_table == 'board04')?$aria_t:$aria_f; ?>

                class="pn-ProductNav_Link">무료기사</a>

            <a href="/bbs/board.php?bo_table=board05" <?php echo ($bo_table == 'board05')?$aria_t:$aria_f; ?> 

                class="pn-ProductNav_Link">유료기사</a>

            <a href="/bbs/board.php?bo_table=board07" <?php echo ($bo_table == 'board07')?$aria_t:$aria_f; ?>

                class="pn-ProductNav_Link">투자정보</a>

            <a href="/bbs/board.php?bo_table=newsflash" <?php echo ($bo_table == 'newsflash')?$aria_t:$aria_f; ?>

                class="pn-ProductNav_Link">속보결과</a>

            <a href="/bbs/board.php?bo_table=board10" <?php echo ($bo_table == 'board10')?$aria_t:$aria_f; ?>

                class="pn-ProductNav_Link">종목진단</a>

            <span id="pnIndicator" class="pn-ProductNav_Indicator"></span>

        </div>

    </nav>

    <button id="pnAdvancerLeft" class="a11y-hidden" type="button">이전</button>

    <button id="pnAdvancerRight" class="a11y-hidden" type="button">다음</button>

</div>

<script src="<?php echo G5_URL ?>/thema/Miso-Company/assets/js/mobile-menu.js"></script></p>

<p>

 

적용한 js 파일

</p>

<p>var SETTINGS = {</p>

<p>    navBarTravelling: false,</p>

<p>    navBarTravelDirection: "",</p>

<p>     navBarTravelDistance: 150</p>

<p>}</p>

<p> </p>

<p>var colours = {</p>

<p>    0: "#ce141c",</p>

<p>    1: "#ce141c",</p>

<p>    2: "#ce141c",</p>

<p>    3: "#ce141c",</p>

<p>    4: "#ce141c",</p>

<p>    5: "#ce141c",</p>

<p>    6: "#ce141c",</p>

<p>    7: "#ce141c",</p>

<p>    8: "#ce141c",</p>

<p>    9: "#ce141c",</p>

<p>    10: "#00B27A",</p>

<p>    11: "#996B3D",</p>

<p>    12: "#CC7014",</p>

<p>    13: "#40FF8C",</p>

<p>    14: "#FF3400",</p>

<p>    15: "#ECBB5E",</p>

<p>    16: "#ECBB0C",</p>

<p>    17: "#B9D912",</p>

<p>    18: "#253A93",</p>

<p>    19: "#125FB9",</p>

<p>}</p>

<p> </p>

<p>document.documentElement.classList.remove("no-js");</p>

<p>document.documentElement.classList.add("js");</p>

<p> </p>

<p>// Out advancer buttons</p>

<p>var pnAdvancerLeft = document.getElementById("pnAdvancerLeft");</p>

<p>var pnAdvancerRight = document.getElementById("pnAdvancerRight");</p>

<p>// the indicator</p>

<p>var pnIndicator = document.getElementById("pnIndicator");</p>

<p> </p>

<p>var pnProductNav = document.getElementById("pnProductNav");</p>

<p>var pnProductNavContents = document.getElementById("pnProductNavContents");</p>

<p> </p>

<p>pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));</p>

<p> </p>

<p>// Set the indicator</p>

<p>moveIndicator(pnProductNav.querySelector("[aria-selected=\"true\"]"), colours[0]);</p>

<p> </p>

<p>// Handle the scroll of the horizontal container</p>

<p>var last_known_scroll_position = 0;</p>

<p>var ticking = false;</p>

<p> </p>

<p>function doSomething(scroll_pos) {</p>

<p>    pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));</p>

<p>}</p>

<p> </p>

<p>pnProductNav.addEventListener("scroll", function() {</p>

<p>    last_known_scroll_position = window.scrollY;</p>

<p>    if (!ticking) {</p>

<p>        window.requestAnimationFrame(function() {</p>

<p>            doSomething(last_known_scroll_position);</p>

<p>            ticking = false;</p>

<p>        });</p>

<p>    }</p>

<p>    ticking = true;</p>

<p>});</p>

<p>

 </p>

<p>pnAdvancerLeft.addEventListener("click", function() {</p>

<p>    // If in the middle of a move return</p>

<p>    if (SETTINGS.navBarTravelling === true) {</p>

<p>        return;</p>

<p>    }</p>

<p>    // If we have content overflowing both sides or on the left</p>

<p>    if (determineOverflow(pnProductNavContents, pnProductNav) === "left" || determineOverflow(pnProductNavContents, pnProductNav) === "both") {</p>

<p>        // Find how far this panel has been scrolled</p>

<p>        var availableScrollLeft = pnProductNav.scrollLeft;</p>

<p>        // If the space available is less than two lots of our desired distance, just move the whole amount</p>

<p>        // otherwise, move by the amount in the settings</p>

<p>        if (availableScrollLeft < SETTINGS.navBarTravelDistance * 2) {</p>

<p>            pnProductNavContents.style.transform = "translateX(" + availableScrollLeft + "px)";</p>

<p>        } else {</p>

<p>            pnProductNavContents.style.transform = "translateX(" + SETTINGS.navBarTravelDistance + "px)";</p>

<p>        }</p>

<p>        // We do want a transition (this is set in CSS) when moving so remove the class that would prevent that</p>

<p>        pnProductNavContents.classList.remove("pn-ProductNav_Contents-no-transition");</p>

<p>        // Update our settings</p>

<p>        SETTINGS.navBarTravelDirection = "left";</p>

<p>        SETTINGS.navBarTravelling = true;</p>

<p>    }</p>

<p>    // Now update the attribute in the DOM</p>

<p>    pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));</p>

<p>});</p>

<p> </p>

<p>pnAdvancerRight.addEventListener("click", function() {</p>

<p>    // If in the middle of a move return</p>

<p>    if (SETTINGS.navBarTravelling === true) {</p>

<p>        return;</p>

<p>    }</p>

<p>    // If we have content overflowing both sides or on the right</p>

<p>    if (determineOverflow(pnProductNavContents, pnProductNav) === "right" || determineOverflow(pnProductNavContents, pnProductNav) === "both") {</p>

<p>        // Get the right edge of the container and content</p>

<p>        var navBarRightEdge = pnProductNavContents.getBoundingClientRect().right;</p>

<p>        var navBarScrollerRightEdge = pnProductNav.getBoundingClientRect().right;</p>

<p>        // Now we know how much space we have available to scroll</p>

<p>        var availableScrollRight = Math.floor(navBarRightEdge - navBarScrollerRightEdge);</p>

<p>        // If the space available is less than two lots of our desired distance, just move the whole amount</p>

<p>        // otherwise, move by the amount in the settings</p>

<p>        if (availableScrollRight < SETTINGS.navBarTravelDistance * 2) {</p>

<p>            pnProductNavContents.style.transform = "translateX(-" + availableScrollRight + "px)";</p>

<p>        } else {</p>

<p>            pnProductNavContents.style.transform = "translateX(-" + SETTINGS.navBarTravelDistance + "px)";</p>

<p>        }</p>

<p>        // We do want a transition (this is set in CSS) when moving so remove the class that would prevent that</p>

<p>        pnProductNavContents.classList.remove("pn-ProductNav_Contents-no-transition");</p>

<p>        // Update our settings</p>

<p>        SETTINGS.navBarTravelDirection = "right";</p>

<p>        SETTINGS.navBarTravelling = true;</p>

<p>    }</p>

<p>    // Now update the attribute in the DOM</p>

<p>    pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));</p>

<p>});</p>

<p> </p>

<p>pnProductNavContents.addEventListener(</p>

<p>    "transitionend",</p>

<p>    function() {</p>

<p>        // get the value of the transform, apply that to the current scroll position (so get the scroll pos first) and then remove the transform</p>

<p>        var styleOfTransform = window.getComputedStyle(pnProductNavContents, null);</p>

<p>        var tr = styleOfTransform.getPropertyValue("-webkit-transform") || styleOfTransform.getPropertyValue("transform");</p>

<p>        // If there is no transition we want to default to 0 and not null</p>

<p>        var amount = Math.abs(parseInt(tr.split(",")[4]) || 0);</p>

<p>        pnProductNavContents.style.transform = "none";</p>

<p>        pnProductNavContents.classList.add("pn-ProductNav_Contents-no-transition");</p>

<p>        // Now lets set the scroll position</p>

<p>        if (SETTINGS.navBarTravelDirection === "left") {</p>

<p>            pnProductNav.scrollLeft = pnProductNav.scrollLeft - amount;</p>

<p>        } else {</p>

<p>            pnProductNav.scrollLeft = pnProductNav.scrollLeft + amount;</p>

<p>        }</p>

<p>        SETTINGS.navBarTravelling = false;</p>

<p>    },</p>

<p>    false</p>

<p>);</p>

<p> </p>

<p>// Handle setting the currently active link</p>

<p>pnProductNavContents.addEventListener("click", function(e) {</p>

<p>    var links = [].slice.call(document.querySelectorAll(".pn-ProductNav_Link"));</p>

<p>    links.forEach(function(item) {</p>

<p>        item.setAttribute("aria-selected", "false");</p>

<p>    })</p>

<p>    e.target.setAttribute("aria-selected", "true");</p>

<p>    // Pass the clicked item and it's colour to the move indicator function</p>

<p>    moveIndicator(e.target, colours[links.indexOf(e.target)]);</p>

<p>});</p>

<p> </p>

<p>// var count = 0;</p>

<p>function moveIndicator(item, color) {</p>

<p>    var textPosition = item.getBoundingClientRect();</p>

<p>    var container = pnProductNavContents.getBoundingClientRect().left;</p>

<p>    var distance = textPosition.left - container;</p>

<p>    var scroll = pnProductNavContents.scrollLeft;</p>

<p>    pnIndicator.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";</p>

<p>    // count = count += 100;</p>

<p>    // pnIndicator.style.transform = "translateX(" + count + "px)";</p>

<p>    </p>

<p>    if (color) {</p>

<p>        pnIndicator.style.backgroundColor = color;</p>

<p>    }</p>

<p>}</p>

<p> </p>

<p>function determineOverflow(content, container) {</p>

<p>    var containerMetrics = container.getBoundingClientRect();</p>

<p>    var containerMetricsRight = Math.floor(containerMetrics.right);</p>

<p>    var containerMetricsLeft = Math.floor(containerMetrics.left);</p>

<p>    var contentMetrics = content.getBoundingClientRect();</p>

<p>    var contentMetricsRight = Math.floor(contentMetrics.right);</p>

<p>    var contentMetricsLeft = Math.floor(contentMetrics.left);</p>

<p>    if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {</p>

<p>        return "both";</p>

<p>    } else if (contentMetricsLeft < containerMetricsLeft) {</p>

<p>        return "left";</p>

<p>    } else if (contentMetricsRight > containerMetricsRight) {</p>

<p>        return "right";</p>

<p>    } else {</p>

<p>        return "none";</p>

<p>    }</p>

<p>}</p>

<p> </p>

<p>(function (root, factory) {</p>

<p>    if (typeof define === 'function' && define.amd) {</p>

<p>        define(['exports'], factory);</p>

<p>    } else if (typeof exports !== 'undefined') {</p>

<p>        factory(exports);</p>

<p>    } else {</p>

<p>        factory((root.dragscroll = {}));</p>

<p>    }</p>

<p>}(this, function (exports) {</p>

<p>    var _window = window;</p>

<p>    var _document = document;</p>

<p>    var mousemove = 'mousemove';</p>

<p>    var mouseup = 'mouseup';</p>

<p>    var mousedown = 'mousedown';</p>

<p>    var EventListener = 'EventListener';</p>

<p>    var addEventListener = 'add'+EventListener;</p>

<p>    var removeEventListener = 'remove'+EventListener;</p>

<p>    var newScrollX, newScrollY;</p>

<p> </p>

<p>    var dragged = [];</p>

<p>    var reset = function(i, el) {</p>

<p>        for (i = 0; i < dragged.length;) {</p>

<p>            el = dragged[i++];</p>

<p>            el = el.container || el;</p>

<p>            el[removeEventListener](mousedown, el.md, 0);</p>

<p>            _window[removeEventListener](mouseup, el.mu, 0);</p>

<p>            _window[removeEventListener](mousemove, el.mm, 0);</p>

<p>        }</p>

<p> </p>

<p>        // cloning into array since HTMLCollection is updated dynamically</p>

<p>        dragged = [].slice.call(_document.getElementsByClassName('dragscroll'));</p>

<p>        for (i = 0; i < dragged.length;) {</p>

<p>            (function(el, lastClientX, lastClientY, pushed, scroller, cont){</p>

<p>                (cont = el.container || el)[addEventListener](</p>

<p>                    mousedown,</p>

<p>                    cont.md = function(e) {</p>

<p>                        if (!el.hasAttribute('nochilddrag') ||</p>

<p>                            _document.elementFromPoint(</p>

<p>                                e.pageX, e.pageY</p>

<p>                            ) == cont</p>

<p>                        ) {</p>

<p>                            pushed = 1;</p>

<p>                            lastClientX = e.clientX;</p>

<p>                            lastClientY = e.clientY;</p>

<p> </p>

<p>                            e.preventDefault();</p>

<p>                        }</p>

<p>                    }, 0</p>

<p>                );</p>

<p> </p>

<p>                _window[addEventListener](</p>

<p>                    mouseup, cont.mu = function() {pushed = 0;}, 0</p>

<p>                );</p>

<p> </p>

<p>                _window[addEventListener](</p>

<p>                    mousemove,</p>

<p>                    cont.mm = function(e) {</p>

<p>                        if (pushed) {</p>

<p>                            (scroller = el.scroller||el).scrollLeft -=</p>

<p>                                newScrollX = (- lastClientX + (lastClientX=e.clientX));</p>

<p>                            scroller.scrollTop -=</p>

<p>                                newScrollY = (- lastClientY + (lastClientY=e.clientY));</p>

<p>                            if (el == _document.body) {</p>

<p>                                (scroller = _document.documentElement).scrollLeft -= newScrollX;</p>

<p>                                scroller.scrollTop -= newScrollY;</p>

<p>                            }</p>

<p>                        }</p>

<p>                    }, 0</p>

<p>                );</p>

<p>             })(dragged[i++]);</p>

<p>        }</p>

<p>    }</p>

<p> </p>

<p>      </p>

<p>    if (_document.readyState == 'complete') {</p>

<p>        reset();</p>

<p>    } else {</p>

<p>        _window[addEventListener]('load', reset, 0);</p>

<p>    }</p>

<p> </p>

<p>    exports.reset = reset;</p>

<p>}));</p>

<p>

 

새로고침(페이지 이동)이 아닐 때에는

선택한 메뉴와 위치 그대로 보여지는데 ..

새로고침(페이지 이동)을 하니깐...

스크롤 포지션 값이 초기화가 되버려요ㅠㅠ

위 js 소스 중에서

</p>

<p>if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {</p>

<p>        return "both";</p>

<p>    } else if (contentMetricsLeft < containerMetricsLeft) {</p>

<p>        return "left";</p>

<p>    } else if (contentMetricsRight > containerMetricsRight) {</p>

<p>        return "right";</p>

<p>    } else {</p>

<p>        return "none";</p>

<p>    }</p>

<p>

이 부분인 거 같아서 이것저것 해봤는데..

바뀌질 않네요ㅠㅠㅠ

아시는 분 계시면 꼭 좀 도와주세요ㅠㅠ

 

혹시나 다른 sir 모바일 사이트와 같은메뉴 형식 참고 소스가 있다면

공유 부탁드려요...!!

 

#그누보드5 #모바일메뉴 #스와이프메뉴 #가로스크롤메뉴
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

toqurk
toqurk
5년 전

실제 사이트 접속시 캡쳐 이미지와 다른 내용이네요...

 

해결하신건가봐요~

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

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

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

로그인