menu 검색 결과

해당 글 5건

스크롤 메뉴(Scroll Menu) 구현해보기

Scroll Menu 주로 프로모션용 웹페이지나 사이트의 메인페이지에 많은 내용의 콘텐츠를 보여줄 때 사용합니다. 대개 메뉴를 클릭하면 해당 메뉴 섹션으로 스크롤이 이동하여 섹션의 내용이 화면에 보이도록 UI를 구성합니다. Temp Mark-up html header 메뉴 1 메뉴 2 메뉴 3 상단으로 섹션 1 섹션 2 섹션 3 푸터단 Temp CSS css .header { position: relative; height: 200px; background-color: #ffccec;} /* contents */ .section-01,.section-02,.section-03 { position: relative; height: 600px; } .section-01 { background-color: #..
Code Lab 9년 전

Accordion Pattern Collection(아코디언 메뉴)

아코디언 메뉴 타입 모음 아코디언 메뉴에 대한 다양한 자바스크립트 코드 패턴을 알아봅니다. 아코디언 메뉴 JS 패턴 #1 See the Pen 아코디언 메뉴 패턴 #1 by jaeheekim (@jaehee) on CodePen. 아코디언 메뉴 JS 패턴 #2 클릭했던 메뉴를 다시 클릭하면 닫히지 않고 다른 메뉴를 클릭해야만 닫히도록 구현한 경우입니다. See the Pen 아코디언 패턴 #2 by jaeheekim (@jaehee) on CodePen. 아코디언 메뉴 JS 패턴 #3 삼항 연산자를 이용한 패턴입니다. See the Pen 아코디언 패턴 #3 by jaeheekim (@jaehee) on CodePen. 아코디언 메뉴 JS 패턴 #4 객체 리터럴 방식으로 싱글톤 패턴입니다. See the..
Code Lab 9년 전

tab menu - 함수 단위 Vs 프로토타입의 클래스 단위

함수단위와 프로토타입의 탭 메뉴 만들기 함수단위의 탭 메뉴 기본 마크업 구성 html Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. 함수단위 탭 메뉴 로직 javascript $(function() { tabMenu("#t..
Code Lab 10년 전