FE 개발/JavaScript3 [반응형 UI] PC Mobile 한번에 사용가능 한 제이쿼리(jQuery) 햄버거 GNB 메뉴 반응형 웹에서 사용하면 좋을 제이쿼리(jQuery) GNB 들어가기에 앞서 반응형 웹사이트를 구축하기위해서 기존에 사용하던 PC GNB(Global Navigation Bar)와 모바일 햄버거 메뉴(mobile burger menu)를 각각 만들어 CSS show/hide로 기능을 구현했었습니다. 그러던 중 지난 프로젝트에서 사용했던 유용한 코드가 있어서 이웃님들께 소개해 드려봅니다. 아래 코드는 HTML5, CSS3, jQuery를 원할하게 이해하고 수정할 수 있는 능력이 필요합니다. 난이도 (중급 / ★★★☆ ☆) 제이쿼리 버전은 1.8.21.이며, 최신버전에서도 정상적으로 동작합니다. HTML5 메뉴열기 메뉴닫기 상단 메인메뉴 영역 대메뉴 depth2 depth3 depth3 depth3 CSS3 .. 2024. 1. 4. 제이쿼리 모바일 햄버거 메뉴 jQeury mobile burger menu 제이쿼리 모바일 햄버거 메뉴 jQeury mobile burger menu 모바일 환경에서 기본으로 제공되는 햄버거 메뉴를 제이쿼리를 통해 구현해 놓았던 소스 이번 프로젝트에서는 보안 이슈도 있고 기술 블로그 하나쯤은 운영하고 싶어서 이번 기회에 끄적여 본다. 들어가기에 앞서 제이쿼리는 요즘은 많이 쓰이지 않는 자바스크립트 라이브러리 중 하나지만 유지관리나 신규 기능 같은 프로젝트를 진행하기 위해서는 알아두어야 하기 때문에 아니 잊지 않으려고 저장해 두고 있다. 많이들 알고 있듯이 개발 환경에 따라 CDN방식을 사용해도 되며, 로컬에 설치하고 사용해도 된다. ... 이번 프로젝트는 아무래도 로컬에 설치하여 진행하는 프로젝트가 될듯하다. HTML 이번 프로젝트는 아무래도 로컬에 설치하여 진행하는 프로젝트가.. 2023. 6. 24. 제이쿼리 jQuery 햄버거 메뉴 만들기 제이쿼리로 만드는 모바일 햄버거 메뉴 당연한 얘기지만 제이쿼리를 기본적으로 불러와야한다. CDN방식으로 사용하면 펜하겠지만 로딩 이슈가 있어서 서버에 올린 상태를 기반으로 코드를 작성하였다. 햄버거 메뉴란? 햄버거 메뉴(drawer menu)란 주로 앱(app) 또는 모바일 웹 상단에 네비게이션으로 사용되는 메뉴로, 여러가지 다양한 기능들을 하나의 네비게이션 안에 담을 수 있기 때문에 흔하게 사용되어왔던 방식입니다. HTML 사원 홍길동 로그아웃 메뉴01 서브메뉴01 서브메뉴02 서브메뉴03 서브메뉴04 서브메뉴05 서브메뉴06 서브메뉴07 서브메뉴08 서브메뉴09 메뉴02 휴게관리 메뉴03 정규직전환평가 메뉴04 교육정보 메뉴05 의료비지원신청 경조금 신청 예상퇴직금계산 연차현황 재증명 신청 급여명세서.. 2023. 6. 24. 이전 1 다음
