css 애니메인션 드롭다운

게시자: 대문 demun 카테고리: 퍼블리셔/css 2013.03.16 08:00

css 로만 구성된 에니메인션 드롭다운 입니다.

이전에 한번 소개한것 같은데요.....제가 이번에 에드센스 스킨을 만들면서 이걸 적용해보았습니다.

원본 -> http://www.red-team-design.com/css3-animated-dropdown-menu


현재 원작자의 홈페이지는 sass 로 제작되고, 모바일까지 적용되는것까지 나왔는데. 저는 그것까지는 필요없고 단순이 css 드롭다운이 필요했습니다.


이전것을 애드센스 스킨에 맞추어서 제작하려면 컬러셋을 변경해야만 햇습니다.

즉 재사용이 가능하게끔 여러 컬러셋을 가질수 있도록 해야했죠.


여기에 html5, css3 를 사용해서 미리보기를 하려면 웹표준 브라우져로 보아야만 제대로 보입니다.

크롬, 파이어폭스, 오페라, 사파리 등등.....


예제에 보시면 각 컬러를 하드코딩한 것을 볼 수 있습니다.





제가 수정한것은 대표색상 3가지만 선정하면 나머지는 비슷한 컬러셋으로 자동으로 변경되어서 적용되어 집니다.





위의 3가지 색상만 변경해주면 다른 컬러셋도 사용이 가능하지요.





또한 mixins.less 를 이용하여 gradient, box-shadow .... 등등 크로스브라우징 되게 작성되었습니다.





수정된 버젼입니다.





다운로드해서 크롬 같은 웹표준 브라우져로 보면 잘 보일겁니다.



index.html


mixins.less


style.css


style.less


다른 드롭다운 메뉴

수평 드롭다운 메뉴 =>  http://demun.tistory.com/2145
CSS 3 드롭다운 에니메이션 메뉴 =>  http://demun.tistory.com/2161
티스토리 카테고리 메뉴를 드롭다운으로 이용하는 방법 =>  http://demun.tistory.com/2175
수평 드롭다운 메뉴바 달기(jquery이용) Horizontal CSS Menus =>  http://demun.tistory.com/1672
이미지가 필요없는 css 드롭다운 메뉴 Vertical css menu =>  http://demun.tistory.com/1613
티스토리 블로그메뉴를 드롭다운으로 이용하는 방법 =>  http://demun.tistory.com/2174
css 애니메인션 드롭다운 =>  http://demun.tistory.com/2310


댓글