메가박스 사이트 따라 만들기 - 탭 메뉴, SKIP 메뉴

탭메뉴, 스킵메뉴
.siblings()
선택한 요소의 형제 요소를 선택합니다.
.parent()
선택한 요소의 부모 요소를 선택합니다.
결과
HTML, js
<!-- 스킵 메뉴 --> <div id="skip"> <a rel="bookmark" href="#movie">최신 영화 소식</a> <a rel="bookmark" href="#event">새로운 이벤트</a> <a rel="bookmark" href="#new">새로운 영화</a> </div> <!-- //스킵 메뉴 --> <script> //공지사항 탭 메뉴 var tebMenu = $(".notice"); //컨텐츠 내용 숨겨주기 tebMenu.find("ul > li > ul").hide(); tebMenu.find("li.active > ul").show(); function tabList(e) { e.preventDefault(); //#의 기능을 차단 var target = $(this); target.next().show().parent("li").addClass("active").siblings("li").removeClass("active").find("ul").hide(); //버튼을 클릭하면 ~ul을 보여주고 //부모의 li태그에 클래스를 추가하고 //형제의 li태그에 클래스를 제거하고 //제거한 자식의 ul 태그를 숨겨줌 } tebMenu.find("ul > li > a").click(tabList).focus(tabList); </script>
style.css
/* 스킵 메뉴 */ #skip { position: relative; } #skip a { position: absolute; left: 0; top: -40px; width: 140px; line-height: 30px; border: 1px solid #fff; color: #fff; text-align: center; background: #333; } #skip a:active, #skip a:focus { top: 0; }
출력



'공부 > 메가박스 사이트 따라만들기' 카테고리의 다른 글
메가박스 사이트 따라 만들기 - Youtube API - 끝 (0) | 2022.02.13 |
---|---|
메가박스 사이트 따라 만들기 - 푸터영역 (0) | 2022.02.13 |
메가박스 사이트 따라 만들기 - Help 영역 반응형 (0) | 2022.02.13 |
메가박스 사이트 따라 만들기 - 고객센터 / SVG (0) | 2022.02.13 |
메가박스 사이트 따라 만들기 - 메가박스 할인카드 (0) | 2022.02.13 |
댓글
이 글 공유하기
다른 글
-
메가박스 사이트 따라 만들기 - Youtube API - 끝
메가박스 사이트 따라 만들기 - Youtube API - 끝
2022.02.13 -
메가박스 사이트 따라 만들기 - 푸터영역
메가박스 사이트 따라 만들기 - 푸터영역
2022.02.13 -
메가박스 사이트 따라 만들기 - Help 영역 반응형
메가박스 사이트 따라 만들기 - Help 영역 반응형
2022.02.13 -
메가박스 사이트 따라 만들기 - 고객센터 / SVG
메가박스 사이트 따라 만들기 - 고객센터 / SVG
2022.02.13
댓글을 사용할 수 없습니다.