슬라이드 5가지 내용정리

김졍·2023년 2월 11일
JavaScriptjquery수업
0

수업내용정리

목록 보기
1/7

🤓슬라이드 sample 1

👻 닫기를 눌렀을 때 좌측에서 슬라이드가 나오는 액션

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{margin: 0;padding: 0;font: inherit;color: inherit;list-style: none;}

    .menu{
      position: fixed;
      top: 0;left: -100%;
      width: 100%;
      height: 100%;
      background: #ccc;
      transition: .3s;
    }
    .menu.on{
      left: 0;
    }
  </style>
</head>
<body>
  <a href="" class="btn1">메뉴버튼</a>
  <button class="btn2">메뉴버튼</button>

  <div class="menu">
    <a href="" class="close">닫기버튼</a>
  </div>



  <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  <script>
    $(function(){//문서 로드후 실행 최후실행 1번만,,
      
      // $(".btn2").click(function(){
      //   $('.menu').addClass('on');
      // })

      //a태그한테는 event를 줘야한다.
      $('.btn1').click(function(e){//e
        e.preventDefault();
        $('.menu').addClass('on');
      })

      $('.close').click(function(e){//e
        e.preventDefault();
        $('.menu').removeClass('on');
      })

    })//지우지 마세요.


  </script>

</body>
</html>

🤓슬라이드 sample 2-1/2-2

👻 전체슬라이드 + 개별슬라이드

  1. .stop()을 써줘야 슬라이드 한번만 된다
  2. 내가 선택한 대메뉴만 반응하게 하고싶다면 this 쓰기
    $(this).children('.sub-list').stop().slideDown();
  3. <main>안녕하세요</main>
  추가되었을때 대메뉴 누르면
  안녕하세요가 밀리면서 이상한 모양이 되기 때문에
  .sub-list를 position: absolute; 처리해준다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{margin: 0;padding: 0;font: inherit;color: inherit;list-style: none;}


    .nav-list{
      position: relative;
      display: flex;
      text-align: center;
    }
    .nav-item{
/*       position: relative; */
      flex: 1;
    }
    .nav-item a{
      background: #ccc;
      display: block;
      line-height: 50px;
    }
    .nav-item .nav{
      background: #000;
      color: #fff;
    }

    .sub-list{
      display: none;
      position: absolute;
      width: 100%;
      left: 0;
    }
    /* nav-list에 기준주고 sub-list left:0주면 전체슬라이드가 된다. */
  </style>
</head>
<body>

  <ul class="nav-list">
    <li class="nav-item">
      <a href="" class="nav">대메뉴</a>
      <ul class="sub-list">
        <li><a href="">서브1</a></li>
        <li><a href="">서브1</a></li>
        <li><a href="">서브1</a></li>
        <li><a href="">서브1</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="" class="nav">대메뉴</a>
      <ul class="sub-list">
        <li><a href="">서브2</a></li>
        <li><a href="">서브2</a></li>
        <li><a href="">서브2</a></li>
        <li><a href="">서브2</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="" class="nav">대메뉴</a>
      <ul class="sub-list">
        <li><a href="">서브3</a></li>
        <li><a href="">서브3</a></li>
        <li><a href="">서브3</a></li>
        <li><a href="">서브3</a></li>
      </ul>
    </li>
  </ul>

  <main>안녕하세요</main>

  <!--   <main>안녕하세요</main> 추가되었을때 대메뉴 누르면
  안녕하세요가 밀리면서 이상한 모양이 되기 때문에 .sub-list를 position: absolute; 처리해준다.-->



  <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  <script>
    $(function(){//문서 로드후 실행 최후실행 1번만,,
      //.stop()을 써줘야 슬라이드 한번만 된다
      
      
      $('.nav-item').hover(function(){

        //전체 대메뉴 슬라이드
        // $('.sub-list').stop().slideDown();

        //내가 선택한 대메뉴만 반응하게 하고싶다면 this 쓰기
        $(this).children('.sub-list').stop().slideDown();
      },function(){
        $('.sub-list').stop().slideUp();
      })


    })//지우지 마세요.


  </script>

</body>
</html>

🤓슬라이드 sample 3-1/3-2

👻

  1. a태그 링크이동 없애기 -event 사용, e.preventDefault();
  2. 나를 제외한 형제 작동 안하게 하기.
    $(this).addClass('active').siblings().removeClass('active');
    + 아무거나 눌러도 qna에 active는 들어가고 나머지 형제들은 빠지는 무조건 내용3만 나옴
    // $('#qna').addClass('active').siblings().removeClass('active')
  3. 내가 선택한 속성 가져오기 attr!
    target = $(this).attr('href'); $(target).addClass('active').siblings().removeClass('active') console.log(target); -확인용
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      font: inherit;
      color: inherit;
      list-style: none;
    }

    .tab-nav {
      display: flex;
    }

    .tab-nav a {
      flex: 1;
      text-align: center;
      line-height: 50px;
      background: #ccc;
    }

    .tab-nav .active {
      background: #000;
      color: #fff;
    }

    .tab-con {}

    .tab-con div {
      display: none;
    }

    .tab-con .active {
      display: block;
      font-size: 100px;
    }
  </style>
</head>

<body>

  <!-- 여중,여고 -->
  <div class="tab-nav">
    <a href="#detail" class="active">디테일</a>
    <a href="#review">리뷰(21)</a>
    <a href="#qna">문의(123)</a>
  </div>

  <!-- 남중,남고 -->
  <div class="tab-con">
    <div id="detail" class="active">내용1</div>
    <div id="review">내용2</div>
    <div id="qna">내용3</div>
  </div>


  <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  <script>
    $(function () { //문서 로드후 실행 최후실행 1번만,,
      //css에서 접점을 확실히 만들어 준 후 스크립트 작업
      //a태그 링크이동 없애기 -event 사용, e.preventDefault();
      $('.tab-nav a').click(function (e) {
        e.preventDefault();
        //3.내가 선택한 속성 가져오기 ****
        target = $(this).attr('href');
        $(target).addClass('active').siblings().removeClass('active')
        console.log(target);

        //1.나를 제외한 형제들은 active가 빠지게 된다
        $(this).addClass('active').siblings().removeClass('active');

        //2.아무거나 눌러도 qna에 active는 들어가고 나머지 형제들은 빠지는 무조건 내용3만 나옴
        // $('#qna').addClass('active').siblings().removeClass('active')

      })



    }) //지우지 마세요.
  </script>

</body>

</html>

👻3-2 target이라는 data 주입

chatGPT에 질문한 결과

$('.tab-nav a').click(function (e) {
  e.preventDefault();
  $(this).addClass('active').siblings().removeClass('active');
  $($(this).attr('href')).addClass('active').siblings().removeClass('active');
});

[es6]버전으로도 변경이 가능하다.

🤓슬라이드 sample 4

👻ToggleSlide

1. 대메뉴1 눌렀다 대메뉴 2 누르면 대메뉴1은 닫히는 버전
$('.nav').removeClass('on').siblings('.sub-list').slideUp();

  $('.nav').click(function (e) {
    e.preventDefault();
    if ($(this).hasClass('on')) {
      $(this).removeClass('on').siblings('.sub-list').slideUp();
    } else {
      //닫히는 소스
      `$('.nav').removeClass('on').siblings('.sub-list').slideUp();`
      $(this).addClass('on').siblings('.sub-list').slideDown();
    }
  })
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      font: inherit;
      color: inherit;
      list-style: none;
    }

    .nav-item a {
      display: block;
      background: pink;
      line-height: 50px;
      text-align: center;
    }

    .nav-item .nav {
      background: #000;
      color: pink;
    }

    .nav-item .nav.on {
      color: #f00;
    }

    .sub-list {
      display: none;
    }
  </style>
</head>

<body>

  <ul class="nav-list">
    <li class="nav-item">
      <a href="" class="nav">대메뉴</a>
      <ul class="sub-list">
        <li><a href="">서브1</a></li>
        <li><a href="">서브1</a></li>
        <li><a href="">서브1</a></li>
        <li><a href="">서브1</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="" class="nav">대메뉴</a>
      <ul class="sub-list">
        <li><a href="">서브2</a></li>
        <li><a href="">서브2</a></li>
        <li><a href="">서브2</a></li>
        <li><a href="">서브2</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="" class="nav">대메뉴</a>
      <ul class="sub-list">
        <li><a href="">서브3</a></li>
        <li><a href="">서브3</a></li>
        <li><a href="">서브3</a></li>
        <li><a href="">서브3</a></li>
      </ul>
    </li>
  </ul>


  <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  <script>
    $(function () { //문서 로드후 실행 최후실행 1번만,,

      //***이지모드

      // $('.nav').click(function(e){
      //   e.preventDefault();

      //   //열렸다 닫혔다 on넣었다 빠졌다
      //   $(this).toggleClass('on');

      //   //열리기만하게하는 안다르방식
      //   $(this).siblings('.sub-list').slideToggle();
      // })


      //***이지모드를 좀 더 풀어쓴 ver - 장점 -> 소스를 더 넣을 수 있음.


      // $('.nav').click(function (e) {
      //   e.preventDefault();

      //   if ($(this).hasClass('on')) {

      //     // $(this).removeClass('on');
      //     // $(this).siblings('.sub-list').slideUp(); 더 줄이면
      //     $(this).removeClass('on').siblings('.sub-list').slideUp();

      //   } else {
      //     // $(this).addClass('on');
      //     // $(this).siblings('.sub-list').slideDown(); 더 줄이면
      //     $(this).addClass('on').siblings('.sub-list').slideDown();
      //   }
      // })

      //대메뉴1 눌렀다 대메뉴 2 누르면 대메뉴1은 닫히는 버전
      $('.nav').click(function (e) {
        e.preventDefault();
        if ($(this).hasClass('on')) {
          $(this).removeClass('on').siblings('.sub-list').slideUp();
        } else {
          //닫히는 소스
          $('.nav').removeClass('on').siblings('.sub-list').slideUp();
          $(this).addClass('on').siblings('.sub-list').slideDown();
        }

      })


    }) //지우지 마세요.
  </script>

</body>

</html>
profile
김졍
다음 포스트

2week-flex

0개의 댓글