ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • (HTML/CSS/JS) Jquery를 이용한 반응형 메뉴판 만들기
      HTML CSS JS 2021. 8. 17. 10:59

      - 상위 메뉴가 보이고 메뉴를 눌렀을 때, 하위 메뉴가 출력되게끔 하는 메뉴판을 만들어보자.

      - display:none 옵션으로 메뉴 구조를 숨겨놓고 클릭 시 display: block 옵션을 켜주게 끔 Jquery의 

      toggleClass 함수를 사용했다.

       

      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
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
      <script src="jquery-3.6.0.min.js"></script>
      <style>
      *{
          margin: 0;
          padding: 0;
      }
      li{
          list-style: none;
      }
      a{
          text-decoration: none;
          color: black;
          font-weight: bold;
      }
      #menu{
          position: absolute;
          width: 30%;
          height: 100%;
          background: green;    
      }
      #menu a{
          background:lightgreen;
          display:block;
          border-top: 2px solid orange;
          border-bottom: 2px solid orange;
      }
      #menu a.on{
          color: red;
      }
      #menu li ul{
          display:none;
      }
      #menu li ul.on{
          display: block;
      }
      #menu ul a{
          background: lightblue;
          font-size: 10px;
      }
       
      </style>
      </head>
      <body>
       
      <ul id="menu">
          <li><a href="#" class="m">상의</a>
              <ul>
              <li><a href="#">긴팔티</a><li>
              <li><a href="#">반팔티</a><li>
              <li><a href="#">가디건</a><li>
              </ul>
          </li>
          <li><a href="#" class="m">하의</a>
              <ul>
              <li><a href="#">청바지</a><li>
              <li><a href="#">반바지</a><li>
              <li><a href="#">수면바지</a><li>
              </ul>
          </li>
          <li><a href="#" class="m">신발</a>
              <ul>
              <li><a href="#">운동화</a><li>
              <li><a href="#">구두</a><li>
              <li><a href="#">나막신</a><li>
              </ul>
          </li>
      </ul>
       
      <script>
          $(document).ready(function(){
              $("#menu a.m").click(function(){
                  $(this).next().addBack().toggleClass("on");
              });
          });
      </script>
       
      </body>
      </html>
      		 cs
      처음에는 상위 메뉴만 보인다.

      상의를 누르면 빨간색으로 표시되고 하위 메뉴 출력

      저작자표시

      'HTML CSS JS' 카테고리의 다른 글

      (HTML/CSS/JS) Google Map API를 사용해보자!  (1) 2021.08.20
      (HTML/CSS/JS) 사진 갤러리 만들기  (1) 2021.08.17
      (HTML/CSS/JS) 간단한 이벤트 처리 해보기!  (0) 2021.08.11

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바