일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 해피CGI
- javascript
- #해피CGI
- happycgi
- 게시판
- 웹솔루션
- CGIMALL
- #동영상
- #쇼핑몰
- 해피씨지아이
- php
- #솔루션
- jquery
- #업종별
- #happycgi
- CSS
- #홈페이지제작
- #웹솔루션
- 홈페이지제작
- #cgimall
- #이미지
- #홈페이지
- 쇼핑몰
- #CSS
- #뉴스
- 사이트제작
- #jQuery
- 홈페이지
- #image
- 솔루션
- Today
- Total
목록#menu (30)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
jQuery UI Menu 입니다. 간단하고 쉽게 2~3차 메뉴를 만들수 있습니다. 위와 같이 간단하게 메뉴를 만들수 있습니다. 소스는 첨부 파일의 소스를 참고하시면 됩니다.
jquery를 이용한 탭메뉴와 요소레이어 연결 Tabs 소스 탭메뉴를 클릭시 분리된 레이어 요소 콘텐츠가 서로 바뀌어서 출력됩니다. jquery UI를 연결하고 손쉽게 레이어 추가하여 탭개수를 늘릴 수 있습니다. 탭메뉴는 다양한 페이지에 사용되는 기본 소스인데, 손쉽게 사용이 가능하네요. 관련 소스는 해당 페이지내 "view source" 버튼을 클릭해서 나오는 소스를 긁어서 사용하시면 됩니다.
하이라이트 되는 애니메이션 메뉴 CSS3 입니다. 익스플로러 10 이상, 크롬, 파폭에서 실행이 가능한 소스입니다. 첨부파일에 해당 html 파일과 css 파일이 첨부되어있습니다.
* Jquery Drop down Menu 소개 - 크로스 브라우저 호환성 - CSS 메뉴로 액세스 할 수 있습니다. - 최적화 된 검색 엔진 - jQuery 드롭 다운 메뉴의 정렬되지 않은 목록 (LI 및 UL HTML 태그) 구조 지우기 - 설치 및 업데이트가 쉽습니다. - 환상적인 애니메이션 및 전환 효과 - 여러 가지 미리 색칠 된 색 구성표 - CSS로 완전히 사용자 정의 할 수있는 스타일링 * 설치방법 및 사용방법 - jquery 버전은 최소 1.3.2 버전 이상이면 되며 첨부된 파일을 다운로드 하여 원하시는 웹루트 디렉터리에 업로드하고 압축을 해제합니다 작업해야될 html 문서안에 jquery.js 와 menu.js 를 호출합니다 샘플소스의 태그 class들은 menu.css 에 선언되어있으..
우측의 오픈메뉴 버튼을 클릭하면 좌측에 사이드메뉴 출력 3단꼐의 사이드 메뉴이고 하부메뉴로 갈시 레이어가 이전메뉴의 레이어를 밀어내면서 출력이됩니다. 모바일 웹이나 앱에 사용될수 있는 메뉴형태입니다. 총 3가지 타입이 있습니다. 상위레벨의 메뉴가 밀려나는 형태 상위메뉴를 덮고 백링크가 출력되는 형태 위의 두가지를 합친 형태가 있습니다.
클릭하면 아래 이미지로 변경이 됩니다. 해당 사이트에서 html, css, js 소스를 확인할 수 있습니다.
복잡한 자바스크립트 소스 대신 간단하게 bootstrap을 활용한 드롭다운 메뉴 소스입니다. 기본 적인 1차 메뉴 구성 및 1차 메뉴 마우스 오버 효과는 물론이고 클래스 지정을 통해 간단하게 2차 드롭다운 메뉴 구성도 가능합니다. 다른 클래스(.nav-stacked) 지정으로 상하 메뉴 구성도 손쉽게 가능합니다.
사이트이동후 원하는 메뉴를 선택합니다. 선택한 메뉴페이지 입니다. 하단의 다운로드 소스를 클릭하신 후 압축파일을 다운받습니다. 다운받은 압축파일을 풀면 해당 메뉴의 html/css/js파일을 확인 하실 수 있습니다. 다운받은 메뉴를 확인하실 수 있습니다.
위와같은 vertical 형태의 메뉴를 구현할 수 있는 스크립트 소스입니다. 사이트에 소개된 stylesheet 와 js 소스의 조합으로 비교적 간단하게 구현이 가능한 스크립트 소스로 vertical menu horizontal menu folder view 등 다양한 모양을 구현할 수 있는 js 소스를 적용할 수 있습니다.