CSS 가로형 내비게이션 float

CSS 2009.09.09 13:18

CSS 가로형 내비게이션

가로형 내비게이션을 만드는 방법은 두가지가 있다 하나는 float를 이용하는 것이고 하나는 display:inline;을 이용하는 것이다,float 부터 보자

배경그림을 다음과 같이 할것이다 단 이미지 크기가 크니 작게 자르고 가로로 반복되도록 할것이다.

아래그림은 작게자른 그림


ul{
	margin:0;
	padding:0;
	list-style-type:none;
	/*여기까지가 초기화*/
	width:520px;/*가로길이는 520px로 정해줬다*/
	background:url(images/mainbg_re.jpg) repeat-x;
	/*위같은 그림을 하기위해 일부분을 잘라 작은파일로 하고 가로로 반복해 줬다*/
	float:left;/*왼족으로 플롯*/
}
ul li{ float:left;/*왼족으로 플롯*/}
ul a{
	display:block;
	padding:0 2em;
	line-height:2.1em;
	text-decoration:none;
	color:#fff;
}

결과는 다음과 같다

주요시 할점은 ul li{} ul{} 여기 모두 플롯을 주엇다는 점이다. 플롯으로 지정하면 기존문서내에서는 차지않는다 따라서 ul li{}에만 주면 납작해지는 결과로 아무것도 보이지않게된다 따라서 먼서 상위 엘레먼트ul{}에 플롯을 주는것이다

저작자 표시
신고

설정

트랙백

댓글

CSS 세로형 내비게이션

CSS 2009.09.09 12:40

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에 아이디를 주어 현재페이지가 선택되었다는 것을 보여준다느것 다음은 가로형 내비게이션을 보겠다.

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바