이번에는 JS를 사용하지 않고 메뉴를 열고 닫는 방법에 대한 몇 가지 노트를 가져오겠습니다. 다음과 같은 실제 사례를 살펴보겠습니다.
메뉴바가 있는 웹페이지를 작성할 때, 저는 기본적으로 모바일 단말기에 적응하기 위해 중요하지 않은 메뉴 옵션을 숨기거나 메뉴 버튼을 만들어 메뉴 열기와 닫기를 제어하는 등 반응형 디자인을 사용합니다. 이전에는 항상 JavaScript를 사용하여 메뉴를 열고 닫았지만 최근 인터넷에서 CSS와 HTML을 사용하여 이 기능을 구현하는 사람을 보았는데, 손에 망치만 있으면 무엇이든 할 수 있다는 느낌이 들었습니다. .손톱을 만드세요. 구현하기 전에
HTML 태그label
label 요소는 사용자에게 특별한 효과를 제공하지 않습니다. 그러나 마우스 사용자의 유용성은 향상됩니다. 이 컨트롤은 레이블 요소 내부의 텍스트를 클릭하면 트리거됩니다. 즉, 사용자가 레이블을 선택하면 브라우저는 자동으로 레이블과 관련된 양식 컨트롤로 초점을 돌립니다.
입력 유형: 체크박스체크박스를 정의하세요.
<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 중국어의 다른 관련 기사를 주목하세요. 웹사이트!
추천 도서:
nodejs 로그 모듈 winston 사용 방법 요약ES6에서 전체 화면 스크롤 플러그인을 구현하는 단계에 대한 자세한 설명위 내용은 JS 없이 메뉴 열기 및 닫기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!