JS 없이 메뉴 열기 및 닫기-JS 튜토리얼-php.cn

JS 없이 메뉴 열기 및 닫기

php中世界最好的语言

풀어 주다： 2018-06-01 13:52:54

원래의

1604명이 탐색했습니다.

이번에는 JS를 사용하지 않고 메뉴를 열고 닫는 방법에 대한 노트를 가져오겠습니다.

메뉴바가 있는 웹페이지를 작성할 때, 저는 기본적으로 모바일 단말기에 적응하기 위해 중요하지 않은 메뉴 옵션을 숨기거나 메뉴 버튼을 만들어 메뉴 열기와 닫기를 제어하는 등 반응형 디자인을 사용합니다. 이전에는 항상 JavaScript를 사용하여 메뉴를 열고 닫았지만 최근 인터넷에서 CSS와 HTML을 사용하여 이 기능을 구현하는 사람을 보았는데, 손에 망치만 있으면 무엇이든 할 수 있다는 느낌이 들었습니다. .손톱을 만드세요. 구현하기 전에

HTML 태그

와 입력 유형을 살펴보겠습니다.

label

라벨은 입력 요소에 대한 라벨(마커)을 정의합니다.

label 요소는 사용자에게 특별한 효과를 제공하지 않습니다. 그러나 마우스 사용자의 유용성은 향상됩니다. 이 컨트롤은 레이블 요소 내부의 텍스트를 클릭하면 트리거됩니다. 즉, 사용자가 레이블을 선택하면 브라우저는 자동으로 레이블과 관련된 양식 컨트롤로 초점을 돌립니다.

라벨의 for 속성은 관련 요소의 id 속성과 동일해야 합니다.

입력 유형: 체크박스

체크박스를 정의하세요.

<input type="checkbox"> 체크박스를 사용하면 사용자는 제한된 수의 옵션 중에서 0개 이상의 옵션을 선택할 수 있습니다.

다음은 데모 코드입니다:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>menu demo</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
  <style>
    .demo {
      text-align: center;
    }
    /* 点击checkbox时，菜单打开或显示 */
    #menu-checkbox:checked ~ .nav {
      display: none;
    }
    /* 隐藏checkbox的复选框 */
    #menu-checkbox {
      display: none;
    }
    .nav ul{
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 20px;
    }
    .glyphicon-menu-hamburger {
      font-size: 30px;
      margin-top: 50px;
    }
  </style>
</head>
<body>  
  <p class="demo">
    <!-- label绑定checkbox -->
    <label for="menu-checkbox"><span class="glyphicon glyphicon-menu-hamburger"></label> 
    <input id="menu-checkbox" type="checkbox">
    <p class="nav">
      <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
      </ul>
    </p>
  </p>
</body>
</html>

로그인 후 복사

효과:

위의 햄버거 아이콘을 클릭하면 메뉴가 표시되거나 숨겨집니다.