집 > 기사 > 웹 프론트엔드 > JS 없이 메뉴 열기 및 닫기 만들기

JS 없이 메뉴 열기 및 닫기 만들기

php中世界最好的语言원래의: 2018-05-14 14:20:331106검색

이번에는 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>

효과:

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어의 다른 관련 기사를 주목하세요. 웹사이트!