슬라이딩 메뉴 탭

Question

누군가가 메뉴 탭을 가리킬 때마다 메뉴 탭이 슬라이드되도록 클라이언트의 요청을 받았습니다.

지금은 li.active 롤과 li : hover 롤이 있습니다.

활성 메뉴가 아닌 메뉴 탭에서 마우스를 가져갈 때 활성 메뉴가 스타일을 적절하게 변경한다는 롤 정의 방법을 모르겠습니다.

심지어 가능합니까?

Answer 1

이와 비슷한? HTML

@theguy

<ul class="menu"> 
    <li><a href="#" class="active">Option1</a></li> 
    <li><a href="#">Option2</a></li> 
    <li><a href="#">Option3</a></li> 
    <li><a href="#">Option4</a></li> 
    <li class="slider"></li> 
</ul> 

CSS

다음

@import url(http://fonts.googleapis.com/css?family=PT+Sans); 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
html, 
body { 
    margin: 0; 
    padding: 0; 
} 
body { 
    font-family: 'PT Sans', Arial, Verdana; 
    background-color: #eee; 
} 
h1 { 
    text-align: center; 
    font-size: 48px; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    color: #222; 
} 
.menu { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 120px; 
    margin: auto; 
    position: relative; 
    background-color: #2c3e50; 
    z-index: 7; 
} 
.menu li { 
    float: left; 
    width: 25%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.menu a { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    width: 100%; 
    height: 100%; 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    -webkit-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center; 
    color: #fff; 
    text-decoration: none; 
    position: relative; 
    font-size: 18px; 
    z-index: 9; 
} 
a.active { 
    background-color: #e74c3c; 
    pointer-events: none; 
} 
li.slider { 
    width: 25%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
    background-color: #e74c3c; 
    z-index: 8; 
    -webkit-transition: left 0.4s, background-color 0.4s; 
    transition: left 0.4s, background-color 0.4s; 
} 
.menu li:nth-child(1):hover ~ .slider, 
.menu li:nth-child(1):focus ~ .slider, 
.menu li:nth-child(1):active ~ .slider { 
    left: 0; 
    background-color: #3498db; 
} 
.menu li:nth-child(2):hover ~ .slider, 
.menu li:nth-child(2):focus ~ .slider, 
.menu li:nth-child(2):active ~ .slider { 
    left: 25%; 
    background-color: purple; 
} 
.menu li:nth-child(3):hover ~ .slider, 
.menu li:nth-child(3):focus ~ .slider, 
.menu li:nth-child(3):active ~ .slider { 
    left: 50%; 
    background-color: #e67e22; 
} 
.menu li:nth-child(4):hover ~ .slider, 
.menu li:nth-child(4):focus ~ .slider, 
.menu li:nth-child(4):active ~ .slider { 
    left: 75%; 
    background-color: #16a085; 
} 

당신이 JSfiddle 있습니다 http://jsfiddle.net/luiggi/Ugyh8/