jquery

JQUERY – 간단한 navigation bar 만들기

RYUHA/ editor

  • 0 comments
  • 1,638 views
  • 2017년 3월 14일

jquery를 이용해 간단한 내비게이션 바를 만들어 봅니다.

간단한 웹사이트나 블로그를 만들 때 많이 사용하는 navigation bar를 만들어보았습니다.
잠깐 쉬어가는 타임처럼 정말 간단하게 만들었어요!

상단 바가 있고 스크롤이 내리면 왼쪽에 fix된 내비바가 생성되면서 현재 위치가 표시 됩니다!
다음과 같은 모습을 가지고 있어요.

  1. 기본 상단바

2. 스크롤 시 나타나는 왼쪽 내비 바

 

그럼 시작해볼까요!

 

#html 과 css

간단하게 내비만 지정해주었습니다.

<body>
<div class="main">
    <div class="nav_bar">
        <ul>
            <li><a href="#first" class="first">첫번째</a></li>
            <li><a href="#second" class="second">두번째</a></li>
            <li><a href="#third" class="third">세번째</a></li>
        </ul>
    </div>

    <div class="left_bar">
        <ul>
            <li><a href="#first" class="first">첫번째</a></li>
            <li><a href="#second" class="second">두번째</a></li>
            <li><a href="#third" class="third">세번째</a></li>
        </ul>
    </div>

    <div class="content">
        <div class="section" id="first">여기가 첫번째</div>
        <div class="section" id="second">여기가 두번째</div>
        <div class="section" id="third">여기가 세번째</div>
    </div>
</div>
</body>

css는 대충 모양만 구성되도록 짠 것이므로 참조만 해주세요! css는 저도 열심히 익히는 중입니다..

.main {
    width: 100%;
    height: 100%;
    position: relative;
}

.main .nav_bar {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 50px;
    background-color: #EEEEEE;
}
.main .nav_bar a {color: #424242; text-decoration: none;}
.main .nav_bar a:hover {color: #FF9800;}
.main .nav_bar ul {margin: 0; padding: 16px;}
.main .nav_bar ul li {
    display: inline;
    border-left: 1px solid #999;
    padding: 0 10px;
}
.main .nav_bar li:first-child {border-left: none;}


.main .left_bar {
    position: fixed;
    top: 50px;
    left: 0px;
    width: 100px;
    heght: 200px;
    background-color: #424242;
    color: #eee;
    display: none;
    z-index: 100;
}
.main .left_bar a {color: #EEEEEE; text-decoration: none;}
.main .left_bar a:hover {color: #FF9800;}
.main .left_bar ul {padding-left:20px;}
.main .left_bar ul li {
    list-style: none;
    margin: 5px;
    font-weight: 200;
}


.main .content {
    width: 100%;
    height: 950px;
    position: absolute;
    top: 50px;
}

.main .content .section {
    width: 100%;
    border-bottom: solid 2px #FF9800;
    text-align: center;
    padding: 50px 0;
}

 

이렇게 화면 구성이 되었으면 jquery로 넘어가보아요.

 

#jquery

jquery로 해주어야 할 부분을 미리 생각해보면,

  • 풀 페이지로 구성할 것이므로, 화면을 윈도우 크기에 맞춰야함.
  • 스크롤의 높이가 일정 위치가 되면 왼쪽에 내비 바가 생겨야함.
  • 스크롤의 높이가 한 섹션에 위치하면 그 섹션을 표시해줘야함.

이정도가 되겠습니다. 이것을 바탕으로 코드를 짜보았습니다.

전체 코드를 보고 세부적으로 이야기 해보아요.

$(function(){
            var windowHeight = $(window).innerHeight();
            $('.section').css('min-height', windowHeight);

            $(window).scroll(function(){
                var top = $(window).scrollTop();

                if(top >= 50) {
                    $('.left_bar').slideDown(200);
                } else {
                    $('.left_bar').slideUp(200);
                }

                if (top >= 0) {
                    $('.main .section').each(function() {
                        var id = $(this).attr('id');
                        if ($(this).position().top <= top) {
                            $('.main .left_bar ul li').each(function(){
                                if($(this).find("a").attr('class') ==  id) {
                                    $('.main .left_bar .' + id).css("color", "#FF5722");
                                } else {
                                    $(this).find("a").css("color","#eee");
                                }
                            });
                        }
                    });
                }
            });
        });

 

var windowHeight = $(window).innerHeight();
$('.section').css('min-height', windowHeight);

이부분이 화면 크기 설정 부분입니다.

우선 창의 크기를 잡아와서 그걸로 section의 높이를 줍니다.

 

그다음 스크롤에 따라 달라지는 경우입니다.

스크롤을 하는 경우 움직이게 하기 위해 .scroll 메소드를 사용하였고, 그 안에서 이것저것 기능을 합니다.

var top = $(window).scrollTop();
if(top >= 50) {
    $('.left_bar').slideDown(200);
} else {
    $('.left_bar').slideUp(200);
}

윈도우 스크롤의 탑 위치가 50px 이상으로 내려갈 경우에 보여주고 그 외의 경우는 다시 슬라이드 업 시키는 코드입니다.

그리고 섹션 별 위치를 파악하여 메뉴를 내비 바에 표시해주는 부분입니다.

if (top >= 0) {
    $('.main .section').each(function() {
        var id = $(this).attr('id');
        if ($(this).position().top <= top) {
            $('.main .left_bar ul li').each(function(){
                if($(this).find("a").attr('class') ==  id) {
                    $('.main .left_bar .' + id).css("color", "#FF5722");
                } else {
                    $(this).find("a").css("color","#eee");
                }
            });
        }
    });
}

 

이렇게 구현하였습니다.

section을 클래스로 가진 요소들을 each로 하나씩 돌립니다.

이때, 섹션의 아이디를 잡아오기 위해 .attr로 ‘id’값을 체크합니다. (.attr은 속성 제어를 할 때 쓰이는 메소드 입니다. 인자가 하나일 경우 그 속성값을 가져오지요.)

그래서 그 아이디 값과 같은 leftbar의 a 클래스 값을 찾아서, 폰트의 색을 바꿔주고 같지 않는 a에게는 색을 원래대로 바꿉니다.

 

이렇게 하면 간단하게 내비 바를 구현할 수 있습니다!

 

다음 번엔 좀더 재미있는 글로 돌아올게요!

RYUHA

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

Leave a Reply

avatar