일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- #image
- 해피CGI
- #이미지
- javascript
- php
- #동영상
- #뉴스
- #웹솔루션
- jquery
- #해피CGI
- #솔루션
- #홈페이지제작
- CSS
- 솔루션
- 쇼핑몰
- 사이트제작
- #jQuery
- happycgi
- CGIMALL
- #홈페이지
- 홈페이지
- #업종별
- 게시판
- 웹솔루션
- #cgimall
- #happycgi
- #쇼핑몰
- #CSS
- 해피씨지아이
- 홈페이지제작
- Today
- Total
목록#menu (30)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
css 로 구현되는 마우스 오버시 메뉴 애니메이션 효과입니다.
모바일용 부드러운 메뉴를 만드는 css + JAVASCRIPT 입니다. css + JAVASCRIPT 를 이용하여, 부드러운 액션이 적용된 모바일 메뉴 소스입니다. CSS 전환 속도를 이용하여, 속도 설정도 가능하며, SVG 아이콘을 사용하여 원하는 메뉴로 쉽게 변경 사용이 가능합니다.
Accordion 으로 이용할 수 있는 jQuery 플러그인 입니다. 다운로드 받은 파일의 압축을 해제하고 demo/index.html 파일을 웹브라우저로 열어보면 샘플확인이 가능합니다. 가벼운 프로그램이어서 지원되는 옵션은 몇가지는 안됩니다만, 딱 필요한것은 있네요. 기본 예제와, 아코디언으로 활용한 예제 펼쳐진 부분들을 픽스를 시켜버린 예제와, 약간의 애니메이션을 추가한 예제등등이 있네요. 어떤 항목이 열리고 닫히고 했었는지 이벤트를 얻어서 화면에 표시해주는것도 되긴 하네요. 하나의 예제에 대한 화면과, 예제를 위한 HTML와 스크립트 소스코드를 비교해서 보면, 많이 어렵다거나 복잡하진 않네요. 위 화면에 대한 소스코드 예제 가볍고, 쉽다보니 활용하기가 수월해보이네요.
우측 사이트 메뉴가 오픈되면 컨텐츠가 좌측으로 밀리는 인터페이스 입니다. 첨부파일을 다운로드 받거나 해당 사이트로 이동하시면 소스및 데모를 확인 할 수 있습니다.
css만을 이용한 사이드 메뉴 인터페이스입니다. 사이드 메뉴에 마우스 오버시 풀네임으로 메뉴가 출력됩니다. 사이트 메뉴내에서 마우스 스크롤이 됩니다. 첨부파일을 다운로드 받거나 해당 사이트로 이동해서 전체 소스를 확인 할 수 있습니다
반응형으로 제작된 jQuery 사이트 메뉴 플러그인 SIDR입니다. 여타 다른 플러그인과 같은 사용법으로 하시면 됩니다. 테마는 총 3개를 지원하며, CSS 파일로 구분됩니다. 메뉴의 구동 방식은 3가지 이며, 다양한 옵션을 통해 구동위치, 기준점, 속도 등등을 제어할 수 있습니다.
중앙 버튼 클릭시 꽃잎 형태로 펼쳐지는 네비게이션 css 만으로 제작되어 졌습니다.
jQuery 와 Bootstrap 을 이용한 목차를 만들 수 있습니다. 라이센스는 MIT Licence 입니다. selectors 를 이용하여 원하는 태그를 목차의 메뉴로 설정할 수 있습니다. 옵션은 다양하게 존재합니다.
html Brand Home page a page b page c page d css body background: #eee min-height: 3000px padding: 0 margin: 0 font-family: 'Open Sans', sans-serif .container width: 80% margin: 0 auto clear: both a display: inline-block color: #333 text-decoration: none nav background: #fff height: 80px line-height: 80px box-shadow: 1px 1px 1px rgba(0, 0,0, 0.2) position: fixed top: 0 left: 0 width: 100% z-index..
탭메뉴를 이용해서 Accordions 을 만드는 jquery 플러그인 스크립트입니다. 첨부된 파일을 다운로드 받아서, 압축을 해제하면 나오는 index.htm 파일을 웹브라우저로 열어서 보면 데모를 확인하는게 가능합니다. 브라우저로 열어보면 화면에 위 그림과 같이 표시가 되는데, 첫번째, 두번째, 세번째 탭을 클릭해보면 Accordions 으로 작동이 됩니다. 소스코드를 문서편집기로 열어서 보면, HTML태그 의 구조는 위와 같이 비교적 간단한 구조입니다. id 가 accordion 에 속해있는 div 태그를 accordion 으로 전환해주는 자바스크립트는 아래와 같습니다. 탭으로 사용할 태그와, 효과, 기본적으로 펼쳐져 있어야 할 탭 등을 지정할수 있는걸로 예상이 되네요.