일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- #동영상
- jquery
- 웹솔루션
- 게시판
- CGIMALL
- php
- CSS
- #업종별
- 쇼핑몰
- #솔루션
- #happycgi
- #쇼핑몰
- #jQuery
- #홈페이지제작
- #해피CGI
- 홈페이지
- 해피씨지아이
- #image
- 해피CGI
- 사이트제작
- javascript
- #홈페이지
- happycgi
- 솔루션
- #cgimall
- #뉴스
- 홈페이지제작
- #CSS
- #이미지
- #웹솔루션
- Today
- Total
목록Menu (10)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
다운로드 받은 파일의 압축을 해제한 뒤, example/index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 화면에 보라색으로 표시되는 동그라미가 표시가 되고, 보라색 버튼을 클릭하면 위 그림 처럼 클릭했던 동그라미 주변에 방사형으로 메뉴가 펼쳐지게 됩니다. 펼쳐진 메뉴에 버튼을 선택해서 클릭시에는 위 그림 처럼 어떤 메뉴를 클릭했는지를 경고창이 뜨네요. 사용방법은 아래와 같습니다.
사이트 제작시 많이 사용되는 풀메뉴 소스를 공유합니다. HTML 소스 .plus-btn-pos .plus-btn .r1 .r2 .content div h1 Fullscreen Menu h2 Flexbox Style .menu-container - for i in (1..3) .menu-sliders .menu ul li a Home li a About li a Work li a Contact CSS 소스 @import url(https://fonts.googleapis.com/css?family=Roboto:300,100); .content { display:flex; justify-content: center; align-items: center; position: absolute; height: 10..
* flxMenu - flxMenu 플러그인은 데스크톱 및 모바일 장치에 드롭 다운 탐색을 만드는 데 도움이되는 반응 형 jQuery 플러그인입니다. * License - MIT License * 적용방법 - 첨부된 압축파일을 해제하여 디렉터리에 업로드한후 적용할 html 문서에 아래와 같은 코드들을 삽입합니다 배포된 js , css 를 호출합니다 드랍다운될 요소 html 을 작성합니다 브라우저로 출력시 아래와 같은 드랍다운이 작동되는 화면을 확인할 수 있습니다 첨부된 파일에 fixMenu-master/fixMenu_Examples 폴더안에 html 샘플파일이 있으니 참고하면 좋을듯 합니다
wheel 형태로 출력되는 JQuery 메뉴로 색다른 구성 시 좋아요. 최대 10개 까지 사용 가능하며, 색상, 텍스트 등 css로 설정이 가능합니다. [메뉴 오픈전] [메뉴 오픈 시]
css로만 구현된 탭메뉴입니다. 일반적인 탭소스가 아닌 탭을 인풋타입 라디오 박스로 구현하였습니다. 라디오 박스 체크유무로 현재 선택된 탭의 디자인을 변경할 수 있습니다. 브라우저 크기에 따라 탭의 디자인이 변경됩니다. 스크립트를 사용하지 않고 탭을 만드실때 사용이 가능합니다. 해당 사이트 또는 첨부파일을 다운로드 받아 소스확인이 가능합니다.
SVG로 구성한 특이한 JQuery 메뉴 SVG로 구성한 특이한 JQuery 메뉴로 색다른 구성시 좋아요 출력되는 방식, 배경색상, 내용 색상을 선택 사용 가능합니다.
자바스크립트를 이용한 심플한 아코디언 메뉴입니다. 첨부된 파일내에 index.html 파일과 css파일에서 관련 코드를 확인하실 수 있습니다. 아래의 링크를 통해서도 확인이 가능하니 참고하세요~ https://codepen.io/SoufianeAbid/pen/eZVzBL
데모사이트 : http://www.htmldrive.net/items/demo/1809/-jQuery-full-screen-menu-and-navigation (전체메뉴보기 jQuery 소스 입니다.)
제이쿼리로 작동하는 다섯가지 타입의 멀티 레벨 메뉴입니다. 1차메뉴를 클릭하면 1차메뉴는 페이드아웃되면서 2차메뉴로 전환됩니다. 멀티메뉴면서 레벨이 많은 경우 사용하시면 작은 공간에서도 활용이 가능합니다. 슬라이드되면서 페이드아웃 되는 형태가 총 5가지가 있습니다. 사이트에서 소스를 다운로드 받으실수 있습니다.
클릭하면 해당 메뉴의 레이어가 열리고 열려있던 레이어는 닫히는 아코디언 메뉴입니다. 레이어가 레디자인 컨텐츠를 포함이 가능합니다. 사이트에서 로그인하시면 해당 메뉴 소스를 다운로드 받으실수 있습니다. 열려있던 메뉴를 한번더 클릭하면 완전히 닫혀있는 메뉴가 됩니다. 간단한 소스로 부드럽게 작동하는 아코디언 메뉴를 만들고 응용하기 쉽습니다. 익스플로어 10버전 이상 브라우저, 크롬 브라우저에서 작동합니다.