CSS3 Nav 링크 배경

Question

사용자가 현재 어떤 페이지에 있는지 알 수 있도록 활성 상태를 유지하려고합니다. 아래에 표시된 것처럼 "nav-active"div 클래스와 anchor 태그를 만들었습니다.

<li><div class="nav-active"><a href="index.html">Blog</a></div></li> 

나는 이것을 수행하여 nav 링크가 몇 자인지에 따라 배경을 동적으로 만들 수 있습니다.

.nav-active { 
background: #ff4b33; /* Old browsers */ 
background: -moz-linear-gradient(top, #ff4b33 0%, #ca2913 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4b33), color-stop(100%,#ca2913)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* IE10+ */ 
background: linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4b33', endColorstr='#ca2913',GradientType=0); /* IE6-9 */ 

height:70px; 
margin-top: -30px; 
padding: 0 15px; 

패딩 때문에 링크 이동 페이지에 따라 다릅니다.

이렇게하는 것이 더 좋은 방법 일 것이라고 확신합니다. 질문은 어떻게됩니까?

도움을 주시면 감사하겠습니다.

Answer 1

은 다음과 같이 직접 링크 스타일에 배경을 적용합니다

<li><a class="nav-active" href="index.html">Blog</a></li> 

는 당신이에 대한 모든 링크에 대한의 스타일 위치 어떤 페이지에 따라 크기 변경에서 링크를 방지하기 위해 만 배경에 대한에 대한 .navactive :

#nav li { 
    position: float; 
} 

#nav li a { 
    display: block; 
    padding: 0 15px; 
    ... 
} 
#nav li a.nav-active { 
    -webkit-linear-gradient(top, #ff4b33 0%,#ca2913 100%); 
    ... 
}