jquery

JQUERY – 움직이는 메뉴바 만들기

RYUHA/ editor

  • 0 comments
  • 3,098 views
  • 2017년 3월 14일

간단한 제이쿼리 효과 중 하나인, 따라다니는 메뉴바를 만들어봅시다.

블로그나 사이트에서 많이 쓰이는 옆에 따라다니는 메뉴바를 만들어 봅니다.

굉장히 간단하면서도 꾸미는 것에 따라 멋진 효과도 낼 수 있는 움직이는 메뉴바를 간단히 구현해봅시다.

초보자분들에겐 스크롤과 애니메이션 이벤트를 접하기에 쉽고, 능력자분들은 구현할 때마다 직접하려면 귀찮으니.. 쉽게 가져다 쓰시면 됩니다! 흐흐

(애니메이션 이벤트는 다음 글을 참조하면 더 많은 설명을 볼 수 있습니다. animate 공부하기 )

 

#View

먼저 화면 구성을 간단하게 합니다.

<div class="main">
    <div class="content">
    </div>
    <div class="left">
        <div class="menu">
            <ul>
                <li>메뉴입니다</li>
                <li>스르륵스르륵</li>
                <li>따라가볼까요</li>
                <li>어디까지</li>
                <li>내려올거닝</li>
            </ul>
        </div>
    </div>
</div>

그리고, css는 다음과 같이 간단하게 해주었습니다.

.main {
    width: 100%;
    height: 2000px;
}
.main .content {
    float: left;
    width: 70%;
    height: 2000px;
    line-height: 30px;
    font-size: 18px;
    padding: 15px;
    background-color: #EEEEEE;
}

.main .left {
    float: right;
    width: 25%;
    height: 2000px;
}

.main .left .menu {
    width: 150px;
    height: 165px;
    background-color: #424242;
    padding: 15px;
}
.main .left .menu ul {
    list-style: none;
    color: #EEEEEE;
    padding-left: 0px;
}
.main .left .menu ul li {margin:10px;}

 

이렇게 하면 다음과 같이 간단하게 나옵니다.

 

이제 스크립트를 살펴봅시다.

 

#Script

정말 간단합니다.

우리가 신경써야할 부분들은, 화면의 현재 위치(스크롤 위치), 메뉴바의 css 상의 position top 값입니다.

먼저 화면의 현재 위치는 아래처럼 잡아옵니다.

var top = $(window).scrollTop(); // 윈도우 현재 위치 (스크롤 탑)

그리고, 메뉴 바의 위치를 css 상 포지션을 absolute를 시켜 절대적 위치를 가지게 합니다.

$('.menu').css({position:"absolute"});

이제, 스크롤할 때 이벤트를 발생 시킵니다!

$(window).scroll(function(){
    var pos = top + 10; //  메뉴바의 탑 위치를 정해줌.

    $('.menu').animate({"top":pos }, {duration:400, easing:'linear', queue:false});
});

 

메뉴바의 위치를 +10 부분으로 조절하면서 각자가 원하는 높이를 지정해줍니다.

이렇게 간단한 코드로 화면의 위치에 따라 계속 움직이는 메뉴바를 만들 수 있습니다.

RYUHA

만들어 보면서 하나씩 글 씁니당:)

Leave a Reply

avatar