웹솔루션개발 25년 노하우! 해피CGI의 모든것

모바일에서 사용하기 좋은 애니메이션 메뉴입니다.소스를 변경하여 다양하게 응용 가능합니다.HTML 구조 Mobile Menu Animation Push the button below to see the animation Home About me Services Portfolio Blog Contacts ..

Death Stranding 게임의 메뉴 디자인에 영감을 받아 제작된 메뉴 디자인 입니다.마우스 오버시 메뉴에 애니메이션 배경이 출력됩니다.자세한 내용은 데모를 확인해 주시기 바랍니다.HTML Menu 1 Menu 2 Menu 3 Menu 4 CSSmain { display: grid; place-items: center; height: 100svh; perspective: 90vw; background: #1b1b1b;} .overlay { position: absolute; inset: 0; back..

좌측 버튼 클릭시 사이드메뉴바 출력버튼 클릭시 효과와 관련된 css 소스 일부입니다.

Zebra  Accordion 은 가볍고, 여러 브라우저에서 사용 가능하며, 사용자 정의가 쉬운 jQuery 아코디언 플러그인으로, 대규모 콘텐츠 그룹을 효과적으로 구성하는 데 유용합니다.# 특징 CSS를 통해 높은 수준의 사용자 정의 가능모든 탭은 확장/축소될 수 있습니다마우스를 올리면 탭이 확장될 수 있습니다.브라우저 창 크기에 맞게 자동 스크롤ARIA 속성을 통해 접근 가능가볍고 사용하기 편리함 # 사용방법 1. Css2. HTML3. JavaScript# 옵션정보https://github.com/stefangabos/Zebra_Accordion 사이트에는 속성과 이벤트에 대한 안내가 되어 있습니다. 활용하여 사용하시려면 참고 바랍니다.

스크롤을 하면 버튼 이미지가 젤리처럼 움직이게 되는 디자인 입니다.자세한 내용은 데모사이트 주소에서 확인이 가능합니다.HTML                                                                                                                                                                                                                                               CSS  * {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: bord..

다운로드 받은 파일의 압축을 해제한 뒤, 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로만 구현된 탭메뉴입니다. 일반적인 탭소스가 아닌 탭을 인풋타입 라디오 박스로 구현하였습니다. 라디오 박스 체크유무로 현재 선택된 탭의 디자인을 변경할 수 있습니다. 브라우저 크기에 따라 탭의 디자인이 변경됩니다. 스크립트를 사용하지 않고 탭을 만드실때 사용이 가능합니다. 해당 사이트 또는 첨부파일을 다운로드 받아 소스확인이 가능합니다.