smarti,스마트아이

fixedNavigation2 예제

FixedNavigation 2 Tutorial

예제보기

 

다운로드

FixedNavigationTu2.zip

0.07MB

 

 

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

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

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

 

CSS

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

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}

페이지의 오른쪽 상단에 목록을 배치한다.

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

다른 요소 위에 있어야 하므로 z-index를 높게 정의하였다. 창 크기를 조정할 때 플로팅 요소가 아래로 이동하는 것을 방지하려면 항상 너비가 고정 된 컨테이너(721px는 모든 li 요소의 합)에 둔다.

목록 요소 속성

ul#navigation li {
    width: 103px;
    display:inline;
    float:left;
}

목록을 가로로 표시하려면 요소 표시를 인라인으로 설정한다.

목록 요소의 링크

ul#navigation li a {
    display: block;
    float: left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color: #E7F2F9;
    background-repeat: no-repeat;
    background-position: 50% 10px;
    border: 1px solid #BDDCEF;
    text-decoration: none;
    text-align: center;
    padding-top: 80px;
}

둥근 테두리를 추가한다.

ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

 

 

목록의 링크에 대한 배경 이미지를 정의한다.

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

요소 위로 마우스를 가져가면 배경색을 변경하여 돋보이게 한다.

ul#navigation li a:hover{
     background-color:#CAE3F2;
}

span에 몇가지 스타일을 추가한다.

ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;
}

 

Javascript

jQuery를 사용하여 피아노와 같은 방식으로 모든 항목을 먼저 사라지게 할 것이다. 항목 위로 마우스를 가져가면 요소가 위에서 아래로 미끄러져 나오게 된다.

$(function() {
    var d=300;
    $('#navigation a').each(function(){
        $(this).stop().animate({
            'marginTop':'-80px'
        },d+=150);
    });

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

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

 

 

 

[세상살이] - 입동, 겨울 배경 이미지 무료 다운로드 받기

입동, 겨울 배경 이미지 무료 다운로드 받기

[코딩공부] - Sublime Text 3 다운로드 설치 및 플러그인, 윈도우10

Sublime Text 3 다운로드 설치 및 플러그인, 윈도우10

[디자인공부] - nPDF 다운로드 및 설치, 64비트 사용, 윈도우10

nPDF 다운로드 및 설치, 64비트 사용, 윈도우10

 

[세상살이] - 디데이계산기, The Day Before 앱 휴대폰에 설치하기

디데이계산기, The Day Before 앱 휴대폰에 설치하기

 

[세상살이] - 스마트폰으로 내 PC를 원격 제어 하기

스마트폰으로 내 PC를 원격 제어 하기