탭메뉴, 스킵메뉴

메가박스 사이트 만들기

동영상 보며 코딩하기 -메가박스 사이트 만들기 

web's 동영상 바로가기

스무번째 강의 :탭메뉴, 스킵메뉴

 

탭메뉴

//공지사항 탭 메뉴
        var tabMenu = $(".notice");
        
        //컨텐츠 내용을 숨겨주세요
        tabMenu.find("ul > li > ul").hide();
        tabMenu.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 태그를 숨겨줌
        }
        
        tabMenu.find("ul > li >a").click(tabList).focus(tabList);
        

 

스킵 메뉴

<!-- 스킵 메뉴-->
    <div id="skip">
        <a rel="bookmark" href="#movie">최신 영화 소식</a>
        <a rel="bookmark" href="#event">새로운 이벤트</a>
        <a rel="bookmark" href="#new">새로운 영화</a>
    </div>    
    <!-- //스킵 메뉴-->

 

/*스킵 메뉴*/
#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;}