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

megabox21

탭메뉴, 스킵메뉴

.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;
}

 

출력