CSS를 사용하여 메뉴 표시줄을 숨기고 표시하는 방법을 설명하는 예
- PHPz원래의
- 2023-04-21 11:26:051805검색
웹사이트 개발에서 메뉴바는 웹사이트의 중요한 부분인 경우가 많아 사용자가 탐색하고 운영하기 더 쉽게 만듭니다. 그러나 때로는 모바일에 최적화할 때 페이지 공간을 줄이기 위해 또는 반응형 웹 사이트를 만들 때와 같은 특정 상황에서 메뉴 표시줄을 숨기고 싶을 때가 있습니다. 작은 화면 장치에서는 메뉴 표시줄을 숨겨야 하고, 햄버거 버튼이 표시될 때 클릭하면 방금 표시되었습니다. 이 기사에서는 메뉴 표시줄을 숨기고 표시하는 몇 가지 기본적인 CSS 기술을 소개합니다.
- 디스플레이 속성을 사용하여 메뉴 표시줄의 표시 및 숨기기를 제어하세요.
디스플레이 속성은 CSS의 매우 기본적인 속성으로 HTML 요소의 표시 모드를 제어하는 데 사용됩니다. 이 속성에는 block(블록 수준 요소), inline(인라인 요소), none(표시되지 않음) 등 여러 공통 값을 포함한 여러 매개변수가 있습니다.
메뉴 표시줄을 숨기려면 스타일 시트에 다음 CSS 코드를 추가하면 됩니다.
.menu {
display: none;
}
이렇게 하면 페이지가 로드될 때 메뉴 표시줄이 숨겨집니다. 햄버거 버튼을 클릭할 때 메뉴바를 표시하려면 메뉴바 요소의 표시 속성을 클릭 시 차단하도록 수정하여 버튼에 이벤트를 바인딩하고 표시할 수 있습니다. 코드 예는 다음과 같습니다.
HTML 코드:
<div class="menu-toggle"> <button>Toggle Menu</button> </div> <nav class="menu"> <ul> <li><a href="#">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li><a href="#">Menu Item 3</a></li> </ul> </nav>
CSS 코드:
.menu {
display: none;
}
/* 在移动端，菜单展现后将其置为 fixed 定位 */
@media screen and (max-width: 600px) {
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
padding: 2em;
box-sizing: border-box;
z-index: 9999;
}
}
/* 汉堡按钮样式 */
.menu-toggle button {
background-color: #000;
color: #fff;
padding: 0.6em;
border: none;
}
/* 展开菜单时的样式 */
.menu-toggle.active + .menu {
display: block;
}
JavaScript 코드:
const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');
toggleBtn.addEventListener('click', function() {
this.parentElement.classList.toggle('active');
menu.classList.toggle('active');
});
위에 표시된 것처럼 의사 클래스 선택기 :active를 사용합니다. CSS 및 JavaScript classList 속성에 햄버거 버튼 클릭시 .active 클래스를 추가하고, 메뉴바 요소의 표시 속성을 수정하여 메뉴 확장 시 차단되도록 수정하여 디스플레이 및 메뉴바 숨기기. :active 和 JavaScript 中的 classList 属性，在点击汉堡按钮时为其添加 .active 类，展开菜单时修改菜单栏元素的 display 属性为 block，实现菜单栏的展现与隐藏。
- 通过 CSS 动画控制菜单栏的滑动展现
除了利用 display 属性控制元素的显示和隐藏外，CSS 中还有许多有趣的动画技巧，可以帮助我们实现更为流畅的展现效果。其中，利用 CSS 中的 transition 属性，可以实现一些简单的元素过渡效果。
具体来说，在菜单栏的展现中，可以为菜单栏元素添加过渡效果，将其从隐藏状态转化为展现状态。
添加如下 CSS 代码：
.menu {
position: fixed;
top: 0;
left: -100%;
width: 80%;
height: 100%;
background-color: #fff;
padding: 2em;
box-sizing: border-box;
transition: left 0.3s ease-in-out;
}
/* 展开菜单时加上移动效果 */
.menu.active {
left: 0;
}
在菜单栏元素 .menu 上设置 position 为 fixed，使其保持固定位置，然后将 left 属性设置为 -100%。这样一来，菜单栏就会被隐藏在页面左侧，位于用户屏幕外。同时，我们为菜单栏元素设置了一个过渡效果：当其 left 属性发生变化时，通过 ease-in-out 的缓动效果进行过渡，以实现更为平滑的展现效果。
当点击汉堡按钮时，我们利用 JavaScript 代码使菜单栏元素的 left 属性从 -100% 变为 0，同时将其对应的类 .active 添加至菜单栏元素上。代码示例如下：
const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');
toggleBtn.addEventListener('click', function() {
this.parentElement.classList.toggle('active');
menu.classList.toggle('active');
});
在汉堡按钮的点击事件中，我们使用了 JavaScript 中的 classList 属性，通过切换 .active 类，控制菜单栏的展现和隐藏。同时，在 .menu 元素上添加了 .active
- CSS 애니메이션을 통해 메뉴 막대의 슬라이딩 표시 제어
display 속성을 사용하여 요소 표시 및 숨기기를 제어하는 것 외에도 CSS에는 다음과 같은 작업을 수행할 수 있는 흥미로운 애니메이션 기술이 많이 있습니다. 더 부드러운 디스플레이 효과를 얻을 수 있도록 도와주세요. 그 중 CSS의 전환 속성을 사용하면 몇 가지 간단한 요소 전환 효과를 얻을 수 있습니다.
🎜구체적으로 메뉴바 표시에서 메뉴바 요소에 전환 효과를 추가하여 숨겨진 상태에서 표시된 상태로 변환할 수 있습니다. 🎜🎜다음 CSS 코드를 추가하세요: 🎜rrreee🎜메뉴 막대 요소.menu에서 위치를 고정으로 설정하여 고정된 위치를 유지한 다음 left 속성을 -100%로 설정하세요. 이렇게 하면 메뉴 표시줄이 페이지 왼쪽, 사용자 화면에서 숨겨집니다. 동시에 메뉴 막대 요소에 대한 전환 효과를 설정합니다. 왼쪽 속성이 변경되면 더 부드러운 표시 효과를 얻기 위해 Ease-In-Out 여유 효과를 통해 전환이 수행됩니다. 🎜🎜햄버거 버튼을 클릭하면 JavaScript 코드를 사용하여 메뉴 막대 요소의 왼쪽 속성을 -100%에서 0으로 변경하는 동시에 해당 클래스 .active를 메뉴바 요소. 코드 예시는 다음과 같습니다. 🎜rrreee🎜햄버거 버튼의 클릭 이벤트에서 JavaScript의 classList 속성을 사용하여 .active 클래스를 전환하여 메뉴 표시줄 표시 및 숨기기를 제어합니다. 동시에 .active 클래스가 .menu 요소에 추가되면 메뉴 막대 요소의 왼쪽 속성이 -100%에서 0으로 변경되어 설정을 통한 부드러운 전환 효과. 🎜🎜요약🎜🎜웹사이트 개발 과정에서 메뉴바의 표현 방식은 종종 고려해야 할 문제입니다. CSS 속성의 다양한 기술을 사용하면 메뉴 표시줄 숨기기 및 슬라이딩 표시와 같은 다양한 표시 방법을 실현하여 사용자에게 보다 편리한 작업 경험을 제공할 수 있습니다. 이 기사가 웹 사이트 개발에 영감을 주고 더 나은 웹 디자인을 달성하는 데 도움이 되기를 바랍니다. 🎜위 내용은 CSS를 사용하여 메뉴 표시줄을 숨기고 표시하는 방법을 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!