메가박스 사이트 만들기 20 - 탭메뉴/스킵메뉴

메가박스 사이트 만들기

강의번호 20 - 탭메뉴/스킵메뉴

 

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

 

index.html

<!--스킵 메뉴-->
    <div id="skip">
        <a rel="bookmark" href="#movie">최신 영화 소식</a>
        <a rel="bookmark" href="#event">새로운 이벤트</a>
        <a rel="bookmark" href="#new">새로운 영화</a>
    </div>
    <!--//스킵 메뉴-->
    
    <script>
    //공지사항 탭 메뉴
        let tabMenu = $ (".notice")
        
        //컨텐츠 내용을 숨겨주세요!
        tabMenu.find("ul > li > ul").hide()
        tabMenu.find("li.active > ul").show()
        
        function tabList(e){
            e.preventDefault()
            let 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)
     </script>