smarti,스마트아이

고정네비게이션 예제

FixedNavigation Tutorial

예제보기

다운로드

FixedNavigationTu.zip

0.06MB

 

네비게이션에 필요한 목록 요소는 내부에 링크가 있는 간단한 순서없는 목록이다.

목록은 나중에 JavaScript에서 참조하기 위해 아이디를 가져온다. jQuery를 사용하면 목록의 'li' 요소 위로 마우스를 가져갈 때마다 링크 항목이 슬라이드 밖으로 나온다.

<ul id="navigation">
 <li class="home"><a title="Home"></a></li>
 <li class="about"><a title="About"></a></li>
 <li class="search"><a title="Search"></a></li>
 <li class="photos"><a title="Photos"></a></li>
 <li class="rssfeed"><a title="Rss Feed"></a></li>
 <li class="podcasts"><a title="Podcasts"></a></li>
 <li class="contact"><a title="Contact"></a></li>
</ul>

 

CSS

먼저 목록의 CSS 속성을 정의한다.

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

사용자가 페이지를 아래로 스클롤하여도 항상 엑세스 할 수 있어야 하므로 위치는 고정되어야 한다.

순서가 지정되지 않은 목록에는 기본값이 있으므로 여백과 안쪽 여백은 0으로 설정된다. 네비게이션은 항상 모든 요소 위에 있어야 한다. 따라서 z-index를 높게 설정 하였다.

목록 요소 속성

ul#navigation li {
    width: 100px;
}

목록 요소의 링크에 다음 CSS 속성을 정의

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;
}

여백 왼쪽은 대부분의 아이콘을 숨기고 목록 항목 위로 마우스를 가져갈 때만 표시하기 위해 음수값으로 설정된다.

기본적으로 링크 요소를 페이지의 시각적 영역 외부의 왼쪽으로 밀고 있다.

JavaScript 부분에서는 요소를 밀어내는 함수를 정의한다. 먼저 둥근 테두리를 추가해보자.

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;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
}

불투명도를 추가한다.

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;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

이제 목록 항목의 배경 이미지를 정의한다.

ul#navigation .home a{
    background-image: url(/cssTemp/images/home.png);
}
ul#navigation .about a      {
    background-image: url(/cssTemp/images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(/cssTemp/images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(/cssTemp/images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(/cssTemp/images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(/cssTemp/images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(/cssTemp/images/mail.png);
}

JavaScript

li 위로 마우스를 가져갈 때마다 실행되는 함수 정의

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

Quotation : 메리 루 (웹디자이너 겸 개발자)

 

[코딩공부] - CSS jQuery를 이용한 펼침 메뉴 예제 다운로드

CSS jQuery를 이용한 펼침 메뉴 예제 다운로드

[세상살이] - SQ3R 독서법 & KWL 독서법

SQ3R 독서법 & KWL 독서법

[디자인공부] - 포토샵으로 치즈 텍스트 효과 만들기 (다운로드 포함)

포토샵으로 치즈 텍스트 효과 만들기 (다운로드 포함)

[세상살이] - 구글 메시지를 이용, PC에서 문자 보내기

구글 메시지를 이용, PC에서 문자 보내기

[디자인공부] - 포토샵으로 자신만의 세계, 판타지 맵 만들기

포토샵으로 자신만의 세계, 판타지 맵 만들기