css 애니메인션 드롭다운

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

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

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

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

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

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

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

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

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

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

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

수정된 버젼입니다.

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

수평 드롭다운 메뉴 => 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

demun(대문블로그)