언어 선택을위한 수평 DIV 확장하기

www.arsenal.com의 검색 상자를 사용하여 애니메이션 div를 만들고 싶습니다. 언어 선택을 위해. 이 CSS 측면에 접근하는 방법에 대한 도움을받을 수 있습니까? 기본적으로 깃발 모양의 아이콘 만 있으면 클릭 할 때 초점이 맞지 않으면 가로 메뉴가 밖으로 밀려 축소됩니다.언어 선택을위한 수평 DIV 확장하기

여기 기본 구조

<div class="flags"> 
    <ul> 
     <li>flag 1 with image</li> 
     <li>flag 2 with image</li> 
     <li>flag 3 with image</li> 
    </ul> 
</div>

당신을 감사에게있다!

출처

2013-06-24 Joe

CSS3 전환을 사용하지 않고이를 달성하기 위해 자바 스크립트를 사용하고 싶을 것입니다. jQuery 및 animate() 기능을 사용하는 것이 좋습니다. width 속성에 애니메이션을 적용 할만큼 간단합니다.

mousein 및 mouseout 이벤트를 대상으로합니다.

당신은 CSS3와 함께 할 싶었다면 그것은 것 같은 뭔가 :

HTML

<div class="flags"> 
    <a href="#menu">current flag image</a> 
    <ul id="menu"> 
     <li>flag 1 with image</li> 
     <li>flag 2 with image</li> 
     <li>flag 3 with image</li> 
    </ul> 
</div>

CSS

#menu { 
    opacity: 0; 
    height: 0; 
} 
#menu:target { 
    opacity: 1; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
    height: auto; 
}

이가와 CSS를 전용에만 가능합니다 유의하시기 바랍니다 :target 가상 클래스. 내가 아는 한 뭔가를 가리키고 다른 요소로 전환을 적용 할 수 없습니다. 이 경우 CSS 전환을 적용하기 위해 클래스를 추가 및 제거하려면 Javascript가 필요합니다.

숙제로 위의 내용을 수정하여 .flags을 '슬라이드 아웃'동작으로 변환 할 수 있습니다.

출처

2013-06-24 19:53:32

나는 본다. 일반적으로 애니메이션에 CSS 대신 jQuery를 사용하는 것이 좋습니다? 미안하지만, 나는 이것에 상당히 새로운이야! – Joe

CSS 애니메이션은 대부분의 웹 브라우저에서 새로운 기능입니다. 대부분은 Firefox, Chrome 및 IE10에서 작동하지만 이전 버전의 사용자는 해당 애니메이션을 볼 수 없습니다. jQuery 애니메이션은 자바 스크립트가 활성화 된 거의 모든 브라우저에서 작동합니다. –

언어 선택을위한 수평 DIV 확장하기

답변

관련 문제