Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

moozi

4/6 layout11.html 본문

TIS_2018/응용sw2018_1기

4/6 layout11.html

moozi 2018. 4. 6. 14:30

<!DOCTYPE html >

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<title> ex3 step6 </title>

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<link rel="stylesheet" href="css/style.css" />

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

<script type="text/javascript" src="js/prefixfree.min.js"></script>

<script>

        $(document).ready(function(){

            //메뉴버튼(3선버튼)을 눌렀을 때

            $(".btnMenu").click(function(){

                //왼쪽메뉴 기울어지게

                $("nav").addClass("on");

                //오른쪽 컨텐츠 기울어지게

                $("section").addClass("on");

                

            });

            //왼쪽메뉴에서 Homme,Girl,Kids를 눌렀을 때

            $("#gnb li").click(function(){

                //왼쪽메뉴 원위치

                $("nav").removeClass("on");

                //오른쪽 컨텐츠 원위치

                $("section").removeClass("on");

                /* 오른쪽 컨테츠 박스 회전 */

                // 기존 on이 붙은 것 삭제

                $("section>div").removeClass("on");

                // 왼쪽메뉴에 해당하는 화면(div)에 on 추가

                var index=$(this).index();

                console.log(index);

                $("section>div").eq(index).addClass("on");

            });

        });

    </script>

</head>

<body>


<div class="wrap">


<!-- nav 영역을 호출할 버튼. 3선버튼  -->

<a class="btnMenu" href="#"><i class="fa fa-navicon"></i> </a>

<!-- 실제 카테고리 메뉴가 들어갈 nav 영역 -->

<nav>

<h1><img src="img/logo.png" /></h1>

<ul id="gnb">

<li><a href="#">Homme</a></li>

<li><a href="#">Girl</a></li>

<li><a href="#">Kids</a></li>

</ul>

</nav>

<!-- 3개의 컨텐츠 박스가 들어갈 section 영역 -->

<section>

<!-- 첫 번째 박스 -->

<div class="box1 on">

<p><strong>Vogue Homme</strong></p>

<p></p>

<p>

<em><a href="#"><i class="fa fa-twitter"></i></a></em>

<em><a href="#"><i class="fa fa-facebook"></i></a></em>

<em><a href="#"><i class="fa fa-envelope"></i></a></em>

</p>

<p></p>

<p></p>

<p><span>Travis Crown</span></p>

<p>

<video loop autoplay preload >

<source src="img/vid.mp4" type="video/mp4" />

</video>

</p>

<p></p>

<p><span>Best Qualified  Goods</span></p>

<p></p>

<p><span>Sports</span></p>

</div>

<!-- 두 번째 박스 -->

<div class="box2">

<p><span>tremendous</span></p>

<p></p>

<p><strong>Vogue Girl</strong></p>

<p></p>

<p></p>

<p></p>

<p><span>Accessories</span></p>

<p></p>

<p><span>Jewelry</span></p>

<p></p>

<p></p>

</div>

<!-- 세 번째 박스 -->

<div class="box3">

<p></p>

<p><span>Play & Dolls</span></p>

<p></p>

<p><strong>Vogue Kids</strong></p>

<p></p>

<p><span>Clothes</span></p>

<p></p>

<p></p>

<p></p>

<p></p>

</div>

</section>

</div>


</body>

</html>
















'TIS_2018 > 응용sw2018_1기' 카테고리의 다른 글

4/6 gallery01.html  (0) 2018.04.06
jQuery연습문제01  (0) 2018.04.06
javascript연습문제03  (0) 2018.04.05
4/5 DOM예제  (0) 2018.04.05
javascript연습문제02  (0) 2018.04.04
'TIS_2018/응용sw2018_1기' Related Articles more
Comments