고수님들 슬라이드 메뉴 관련 질문입니다.

고수님들 슬라이드 메뉴 관련 질문입니다.

QA

고수님들 슬라이드 메뉴 관련 질문입니다.

본문

모바일 상단에 아래 플러그인을 사용하려고 합니다.

 

 

https://darsa.in/sly/#!examples

 

제가 넣고 싶은 형태는 2번째(Centered) 입니다.

 

https://darsa.in/sly/examples/horizontal.html

 

헤매다가 결국 소스는 찾았습니다.

 

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sly/1.6.1/sly.min.js"></script>

 <style>
        .frame {
            height: 250px;
            line-height: 250px;
            overflow: hidden;
        }
        .frame ul {
            list-style: none;
            margin: 0;
            padding: 0;
            height: 100%;
            font-size: 50px;
        }
        .frame ul li {
            float: left;
            width: 227px;
            height: 100%;
            margin: 0 1px 0 0;
            padding: 0;
            background: #333;
            color: #ddd;
            text-align: center;
            cursor: pointer;
        }
    </style>

 

</head>

<body>

<div class="frame">
    <ul class="slidee">
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li> 
        <li>메뉴4</li> 
        <li>메뉴5</li>
 
    </ul>
</div>

<!-- 상단 스크롤메뉴 js -->
<script>
   var on = $('.slidee').find('.activetop').index();
    console.log(on);
    var options = {
       horizontal: 1,
       itemNav: 'centered', //basic , centered,
       speed: 300,
       smart: 1,
       activateOn: 'click',
       mouseDragging: 1,
       touchDragging: 1,
       activateMiddle: 1,
       releaseSwing: 1,
       activeClass:   'activetop',
       startAt: on
       // itemSelector:1
    };
    var frame = new Sly('.frame', options).init();
</script>
<!-- end -->

</body>

 

그런데 메뉴 부분에 a태그를 넣어서 링크를 걸면 메뉴를 누를 때마다 센터로 자연스럽게 이동하는 것이 작동은 안하네요. 몇 시간째 헤매고 있어 도움을 요청합니다. a태그가 원래 안 먹히는 소스인가요?

이 질문에 댓글 쓰기 :

답변 1

클릭 이벤트가 자바스크립트와 충돌하는 것으로 보입니다. a 태그를 직접 입력하지 말고 위의 스크립트에서 링크를 보내는 방식으로 소스코드를 수정하셔야 할 것 같습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 1,284
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT