이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
