CSS세로형 내비게이션
앞서 롤오버 효과에 대해 소개했다. 여기참조 http://siana.tistory.com/trackback/54
일단 사용할 이미지는 다음과 같다
이 이미지를 이용해 올렸으때 오른쪽이 나오도록 효과를 적용하고 세로형 내비게이션을 만들어 보자
html은 간편하다
css는 각기 설명을 참조
ul{
margin:0;
padding:0;
list-style-type:none;
/*초기화*/
}
ul li a{
display:block;
width:200px;/*이미지크그에 맞게 가로 세로 정한다*/
height:30px;
line-height:30px;
color:#000;/*글자색은 검정*/
text-decoration:none;
background: url(images/navigation.jpg) no-repeat 0 0;/*배경이미지를 정해놓고 일반위치에 놓는다*/
text-indent:50px;
}
ul li a:hover{
background: url(images/navigation.jpg) no-repeat right 0;
/*롤오버 효과, 마우스를 올리면 그림이 오른쪽으로 바뀐다*/
color:#ccc;/*글자는 회색으로*/
}
결과는 다음과 같다.두번째가 올렸을 경우이다
응용편 현재 선택된 페이지 표시
선택된 페이지를 표시한다는것은 위의 내비게이션에서 현재 페이지가 second라면 이때 다르게 표시해주자는것이다. 방법은 그페이지의 body에 아이디를 부여하고 적용하는 법이다.예제를 보자
html의 파일 이름은 second.html으로하고 소스는
#second .n-second{background: 어쩌고저쩌고;}
second.html이라는 페이지에서 바디에 아이디 second를 부여함으로서 #second .n-second 이런식으로 선택해주어 현재페이지에 상황을 적용해 줄수 있는것이다.물론 단순히 .n-second에 적용해도 되지만 일반적으로 코드를 짜다보면은 내비게이션의 클래스라던가 아이디를 다른목적으로 부여하게 될뗴가 많다. 요약하자면 body에 아이디를 주어 현재페이지가 선택되었다는 것을 보여준다느것 다음은 가로형 내비게이션을 보겠다.
댓글