[해피CGI][cgimall] 14가지 스타일의 도트 네비게이션

 

Dot Navigation Styles에서는 다양한 효과를 지닌 14가지의 도트네비게이션 스타일을 확인하실 수 있습니다.

사이트에서 파일을 다운 받으시면 사용된 html, css, js 소스를 확인하실 수 있습니다.

 

 

도트 네비게이션 기본 소스는 위와 같이 구성되어 있으며

네비게이션 스타일 명칭인 "dotstyle-fillup" 클래스를
각 명칭에 맞게 수정하므로 스타일을 변경할수 있습니다.

dotstyle-fillup
dotstyle-scaleup
dotstyle-stroke
dotstyle-fillin
dotstyle-circlegrow
dotstyle-dotstroke
dotstyle-drawcircle
dotstyle-smalldotstroke
dotstyle-puff
dotstyle-flip
dotstyle-tooltip
dotstyle-dotmove
dotstyle-hop
dotstyle-fall

위 클래스 명칭으로 적용할 수 있으며,
그 중 "dotstyle-drawcircle" 스타일은 svg이미지가 사용되어
아래의 이미지 처럼 소스가 사용되는 것을 확인하실 수 있습니다.

 

데모 사이트에서 작동되는 도트 네비게이션들을 확인하시고 사이트에서 소스를 다운받아 사용해보세요.

​

​

​