사이드 네비게이션

 

view demo    download

 

 

CSS3와 jQuery를 이용한 사이드 네비게이션 메뉴를 만들어 보겠습니다. 기본적으로 화면 밖에 살짝 걸쳐 숨겨져 있으며, 마우스를 올리면 슬라이드 아웃으로 화면에 나오는 방식 입니다.

 

The HTML

 

우선 HTML은 각각에 링크가 걸린 li들로 구성된 간단한 unodered list가 전부 입니다. ul에 ID가 주어져 있는데, 나중에 제이쿼리로 네비의 어느 곳이든 마우스를 올렸을 경우 각각의 리스트들이 슬라이딩 하도록 하는데 필요합니다.

<ul id="navigation">
   <li class="paperplane">
   <li class="mapmarker">
   <li class="calendar">
   <li class="addressbook">
   <li class="mail">
   <li class="search">
</ul>
			  

 

The CSS

 

우선 list를 감싸고 있는 ul의 css 속성을 설정합니다.
position을 fixed로 설정해서 언제 어디서든 사용자가 네비게이션 메뉴를 접속할 수 있도록 합니다. 그리고 언제나 다른 요소들 위에 항상 있게끔 하기위해 z-index의 값을 최대한 많이 줍니다.

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
			  

 

list의 css 속성을 설정합니다.

ul#navigation li {
    width: 100px;
}
			 

 

list에 걸려있는 링크에 대한 css 속성을 설정합니다.
margin-left를 -85px로 주어 화면 밖으로 거의 나가 보이지 않도록 합니다. 그러면 남은 너비 15px의 메뉴가 화면 왼쪽에 걸쳐있는게 보입니다.

           
ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    -moz-box-shadow: 0px 2px 3px #333;
    -webkit-box-shadow: 0px 2px 3px #333;
    box-shadow: 0px 2px 3px #333;
}          
             

 

이제 특정 이미지를 가지고 메뉴 버튼에 배경이미지를 설정합니다.

ul#navigation .paperplane a{
    background-image: url(../images/img01.png);
}
ul#navigation .mapmarker a      {
    background-image: url(../images/img02.png);
}
ul#navigation .calendar a      {
    background-image: url(../images/img03.png);
}
ul#navigation .addressbook a      {
    background-image: url(../images/img04.png);
}
ul#navigation .mail a   {
    background-image: url(../images/img05.png);
}
ul#navigation .search a     {
    background-image: url(../images/img06.png);
}
			 

 

The JAVASCRIPT

 

이제 jQuery를 이용하여 네비게이션 메뉴에 마우스를 올렸을 경우 메뉴바가 나타나도록 합니다. 여기서 중요한 점은 화면 밖으로 숨겨져 있는 것은 li에 걸린 링크이지(a) li 자체가 아니라는 점입니다. 마우스를 메뉴바 끝부분에까지 가지 않더라도 100px 너비의 li안에 마우스가 올라가면 숨겨져있던 메뉴바가 나오게 됩니다.

$(function() {
 
 $('#navigation > li').hover(
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  },
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
  }
 );
});
			  

 

마우스를 올렸을 경우 '현재의 모든 애니메이션을 멈추고(.stop())' 네비게이션 메뉴를 '왼쪽으로 -2px' 위치이동 시킵니다. 속도는 200으로 너무 느리지 않을 정도의 적당한 값을 주었습니다. 그리고 마우스 커서에서 벗어난 메뉴는 다시 왼쪽으로 -85px 위치이동 하도록 합니다.

 

view demo    download