모바일 스와이프 메뉴(가로 스크롤 메뉴) 도와주세요ㅠㅠ
본문
모바일 스와이프 메뉴 (가로 스크롤 메뉴)를 적용했습니다.
http://test.pushnews.io/?device=mobile
위 사이트에 적용했는데..
1번째에서 3번째 메뉴까지는 현재창에서 메뉴를 클릭 > 선택한 메뉴가 보이는데..
5번째, 6번째 메뉴 선택 시...
페이지 이동 및 메뉴 선택까지는 되는데...
화면에서 메뉴 부분이 보이질 않네요ㅠㅠㅠ
sir 모바일 사이트처럼 선택한 메뉴가 보여졌으면 좋겠는데..
이 부분은 어떻게 수정을 해줘야하는 걸까요...??
지금 있는 것도
코드펜 소스 응용해서 적용한 부분이라서
아시는 분 자세한 답변 좀 부탁드릴게요...!!!
head.php 파일 중 해당 부분
<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>
적용한 js 파일
var SETTINGS = {
navBarTravelling: false,
navBarTravelDirection: "",
navBarTravelDistance: 150
}
var colours = {
0: "#ce141c",
1: "#ce141c",
2: "#ce141c",
3: "#ce141c",
4: "#ce141c",
5: "#ce141c",
6: "#ce141c",
7: "#ce141c",
8: "#ce141c",
9: "#ce141c",
10: "#00B27A",
11: "#996B3D",
12: "#CC7014",
13: "#40FF8C",
14: "#FF3400",
15: "#ECBB5E",
16: "#ECBB0C",
17: "#B9D912",
18: "#253A93",
19: "#125FB9",
}
document.documentElement.classList.remove("no-js");
document.documentElement.classList.add("js");
// Out advancer buttons
var pnAdvancerLeft = document.getElementById("pnAdvancerLeft");
var pnAdvancerRight = document.getElementById("pnAdvancerRight");
// the indicator
var pnIndicator = document.getElementById("pnIndicator");
var pnProductNav = document.getElementById("pnProductNav");
var pnProductNavContents = document.getElementById("pnProductNavContents");
pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));
// Set the indicator
moveIndicator(pnProductNav.querySelector("[aria-selected=\"true\"]"), colours[0]);
// Handle the scroll of the horizontal container
var last_known_scroll_position = 0;
var ticking = false;
function doSomething(scroll_pos) {
pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));
}
pnProductNav.addEventListener("scroll", function() {
last_known_scroll_position = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(last_known_scroll_position);
ticking = false;
});
}
ticking = true;
});
pnAdvancerLeft.addEventListener("click", function() {
// If in the middle of a move return
if (SETTINGS.navBarTravelling === true) {
return;
}
// If we have content overflowing both sides or on the left
if (determineOverflow(pnProductNavContents, pnProductNav) === "left" || determineOverflow(pnProductNavContents, pnProductNav) === "both") {
// Find how far this panel has been scrolled
var availableScrollLeft = pnProductNav.scrollLeft;
// If the space available is less than two lots of our desired distance, just move the whole amount
// otherwise, move by the amount in the settings
if (availableScrollLeft < SETTINGS.navBarTravelDistance * 2) {
pnProductNavContents.style.transform = "translateX(" + availableScrollLeft + "px)";
} else {
pnProductNavContents.style.transform = "translateX(" + SETTINGS.navBarTravelDistance + "px)";
}
// We do want a transition (this is set in CSS) when moving so remove the class that would prevent that
pnProductNavContents.classList.remove("pn-ProductNav_Contents-no-transition");
// Update our settings
SETTINGS.navBarTravelDirection = "left";
SETTINGS.navBarTravelling = true;
}
// Now update the attribute in the DOM
pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));
});
pnAdvancerRight.addEventListener("click", function() {
// If in the middle of a move return
if (SETTINGS.navBarTravelling === true) {
return;
}
// If we have content overflowing both sides or on the right
if (determineOverflow(pnProductNavContents, pnProductNav) === "right" || determineOverflow(pnProductNavContents, pnProductNav) === "both") {
// Get the right edge of the container and content
var navBarRightEdge = pnProductNavContents.getBoundingClientRect().right;
var navBarScrollerRightEdge = pnProductNav.getBoundingClientRect().right;
// Now we know how much space we have available to scroll
var availableScrollRight = Math.floor(navBarRightEdge - navBarScrollerRightEdge);
// If the space available is less than two lots of our desired distance, just move the whole amount
// otherwise, move by the amount in the settings
if (availableScrollRight < SETTINGS.navBarTravelDistance * 2) {
pnProductNavContents.style.transform = "translateX(-" + availableScrollRight + "px)";
} else {
pnProductNavContents.style.transform = "translateX(-" + SETTINGS.navBarTravelDistance + "px)";
}
// We do want a transition (this is set in CSS) when moving so remove the class that would prevent that
pnProductNavContents.classList.remove("pn-ProductNav_Contents-no-transition");
// Update our settings
SETTINGS.navBarTravelDirection = "right";
SETTINGS.navBarTravelling = true;
}
// Now update the attribute in the DOM
pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));
});
pnProductNavContents.addEventListener(
"transitionend",
function() {
// get the value of the transform, apply that to the current scroll position (so get the scroll pos first) and then remove the transform
var styleOfTransform = window.getComputedStyle(pnProductNavContents, null);
var tr = styleOfTransform.getPropertyValue("-webkit-transform") || styleOfTransform.getPropertyValue("transform");
// If there is no transition we want to default to 0 and not null
var amount = Math.abs(parseInt(tr.split(",")[4]) || 0);
pnProductNavContents.style.transform = "none";
pnProductNavContents.classList.add("pn-ProductNav_Contents-no-transition");
// Now lets set the scroll position
if (SETTINGS.navBarTravelDirection === "left") {
pnProductNav.scrollLeft = pnProductNav.scrollLeft - amount;
} else {
pnProductNav.scrollLeft = pnProductNav.scrollLeft + amount;
}
SETTINGS.navBarTravelling = false;
},
false
);
// Handle setting the currently active link
pnProductNavContents.addEventListener("click", function(e) {
var links = [].slice.call(document.querySelectorAll(".pn-ProductNav_Link"));
links.forEach(function(item) {
item.setAttribute("aria-selected", "false");
})
e.target.setAttribute("aria-selected", "true");
// Pass the clicked item and it's colour to the move indicator function
moveIndicator(e.target, colours[links.indexOf(e.target)]);
});
// var count = 0;
function moveIndicator(item, color) {
var textPosition = item.getBoundingClientRect();
var container = pnProductNavContents.getBoundingClientRect().left;
var distance = textPosition.left - container;
var scroll = pnProductNavContents.scrollLeft;
pnIndicator.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";
// count = count += 100;
// pnIndicator.style.transform = "translateX(" + count + "px)";
if (color) {
pnIndicator.style.backgroundColor = color;
}
}
function determineOverflow(content, container) {
var containerMetrics = container.getBoundingClientRect();
var containerMetricsRight = Math.floor(containerMetrics.right);
var containerMetricsLeft = Math.floor(containerMetrics.left);
var contentMetrics = content.getBoundingClientRect();
var contentMetricsRight = Math.floor(contentMetrics.right);
var contentMetricsLeft = Math.floor(contentMetrics.left);
if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
return "both";
} else if (contentMetricsLeft < containerMetricsLeft) {
return "left";
} else if (contentMetricsRight > containerMetricsRight) {
return "right";
} else {
return "none";
}
}
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['exports'], factory);
} else if (typeof exports !== 'undefined') {
factory(exports);
} else {
factory((root.dragscroll = {}));
}
}(this, function (exports) {
var _window = window;
var _document = document;
var mousemove = 'mousemove';
var mouseup = 'mouseup';
var mousedown = 'mousedown';
var EventListener = 'EventListener';
var addEventListener = 'add'+EventListener;
var removeEventListener = 'remove'+EventListener;
var newScrollX, newScrollY;
var dragged = [];
var reset = function(i, el) {
for (i = 0; i < dragged.length;) {
el = dragged[i++];
el = el.container || el;
el[removeEventListener](mousedown, el.md, 0);
_window[removeEventListener](mouseup, el.mu, 0);
_window[removeEventListener](mousemove, el.mm, 0);
}
// cloning into array since HTMLCollection is updated dynamically
dragged = [].slice.call(_document.getElementsByClassName('dragscroll'));
for (i = 0; i < dragged.length;) {
(function(el, lastClientX, lastClientY, pushed, scroller, cont){
(cont = el.container || el)[addEventListener](
mousedown,
cont.md = function(e) {
if (!el.hasAttribute('nochilddrag') ||
_document.elementFromPoint(
e.pageX, e.pageY
) == cont
) {
pushed = 1;
lastClientX = e.clientX;
lastClientY = e.clientY;
e.preventDefault();
}
}, 0
);
_window[addEventListener](
mouseup, cont.mu = function() {pushed = 0;}, 0
);
_window[addEventListener](
mousemove,
cont.mm = function(e) {
if (pushed) {
(scroller = el.scroller||el).scrollLeft -=
newScrollX = (- lastClientX + (lastClientX=e.clientX));
scroller.scrollTop -=
newScrollY = (- lastClientY + (lastClientY=e.clientY));
if (el == _document.body) {
(scroller = _document.documentElement).scrollLeft -= newScrollX;
scroller.scrollTop -= newScrollY;
}
}
}, 0
);
})(dragged[i++]);
}
}
if (_document.readyState == 'complete') {
reset();
} else {
_window[addEventListener]('load', reset, 0);
}
exports.reset = reset;
}));
새로고침(페이지 이동)이 아닐 때에는
선택한 메뉴와 위치 그대로 보여지는데 ..
새로고침(페이지 이동)을 하니깐...
스크롤 포지션 값이 초기화가 되버려요ㅠㅠ
위 js 소스 중에서
if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
return "both";
} else if (contentMetricsLeft < containerMetricsLeft) {
return "left";
} else if (contentMetricsRight > containerMetricsRight) {
return "right";
} else {
return "none";
}
이 부분인 거 같아서 이것저것 해봤는데..
바뀌질 않네요ㅠㅠㅠ
아시는 분 계시면 꼭 좀 도와주세요ㅠㅠ
혹시나 다른 sir 모바일 사이트와 같은메뉴 형식 참고 소스가 있다면
공유 부탁드려요...!!
답변을 작성하시기 전에 로그인 해주세요.
