JS 없이 메뉴 열기 및 닫기
- php中世界最好的语言원래의
- 2018-06-01 13:52:541651검색
이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
Vue를 사용하여 ID를 통해 목록 페이지에서 세부정보 페이지로 이동하는 방법Vue에서 슬롯을 사용하여 상위 구성 요소를 배포하는 방법위 내용은 JS 없이 메뉴 열기 및 닫기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.