CSS를 사용하여 반응형 탐색 메뉴 구현-CSS 튜토리얼-php.cn

CSS를 사용하여 반응형 탐색 메뉴 구현

WBOY

풀어 주다： 2023-11-21 10:56:05

원래의

705명이 탐색했습니다.

CSS를 사용하여 반응형 탐색 메뉴 구현

모바일 장치의 인기로 인해 점점 더 많은 웹사이트가 더 나은 사용자 경험을 제공하기 위해 다양한 화면 크기에 적응해야 합니다. 모바일 장치에서는 제한된 화면 공간으로 인해 기존 가로 탐색 메뉴가 작은 화면에 완전히 표시되지 않거나 사용자가 전체 메뉴 항목을 보기 위해 화면을 계속 스와이프해야 할 수 있습니다. 따라서 반응형 탐색 메뉴가 점점 더 대중화되고 있습니다.

이 글에서는 CSS를 사용하여 간단한 반응형 탐색 메뉴를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

먼저 HTML 파일에 기본 탐색 메뉴 구조를 만듭니다. 다음은 간단한 예입니다.

<nav class="navbar">
  <a href="#" class="navbar-brand">Logo</a>
  <ul class="navbar-menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">About</a></li>
    <li class="menu-item"><a href="#">Products</a></li>
    <li class="menu-item"><a href="#">Contact</a></li>
  </ul>
</nav>

로그인 후 복사

CSS 파일에서 탐색 메뉴를 반응형으로 만들기 위해 몇 가지 스타일을 추가해야 합니다.

먼저 탐색 메뉴에 기본 스타일을 추가하여 가로 탐색 막대처럼 보이도록 합니다.

.navbar {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.navbar-brand {
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}

.navbar-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  margin-left: 10px;
}

.menu-item a {
  color: #fff;
  text-decoration: none;
}

로그인 후 복사

그런 다음 작은 화면 크기에 적합한 반응형 스타일을 추가해야 합니다.

작은 화면에서는 탐색 메뉴가 수직 드롭다운 메뉴가 되기를 원합니다. CSS 미디어 쿼리를 사용하여 이 효과를 얻을 수 있습니다.

@media (max-width: 600px) {
  .navbar-menu {
    display: none;
  }

  .menu-item {
    display: block;
    margin: 10px 0;
  }

  .menu-item a {
    display: block;
    padding: 10px;
    background-color: #333;
  }

  .navbar-toggle {
    display: block;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
  }

  .navbar-collapse {
    display: none;
    background-color: #333;
    padding: 10px;
  }

  .navbar-collapse.active {
    display: block;
  }
}

로그인 후 복사

위 코드에서 @media (max-width: 600px)는 화면 너비가 600px 이하일 때 이러한 스타일이 적용된다는 의미입니다. @media (max-width: 600px) 表示当屏幕宽度小于等于 600px 时应用这些样式。

我们将隐藏原始的导航菜单 .navbar-menu，并将每个菜单项 .menu-item 显示为块级元素，并添加一些样式以使其看起来像一个下拉菜单。

另外，我们还添加了一个 .navbar-toggle 元素作为触发菜单的按钮，并创建了一个 .navbar-collapse 元素来容纳下拉菜单。通过给 .navbar-collapse 添加 .active 类，我们可以控制它的显示和隐藏。

最后，在JavaScript中添加一些交互效果。我们将使用简单的事件处理函数来切换 .navbar-collapse 的显示和隐藏。

document.querySelector('.navbar-toggle').addEventListener('click', function() {
  document.querySelector('.navbar-collapse').classList.toggle('active');
});

로그인 후 복사

现在，当点击 .navbar-toggle 时，我们可以切换 .navbar-collapse

원래 탐색 메뉴 .navbar-menu를 숨기고 각 메뉴 항목 .menu-item을 블록 수준 요소로 표시하고 몇 가지 스타일을 추가하여 만들어 보겠습니다. 드롭다운 메뉴처럼 보입니다.

또한 메뉴를 실행하는 버튼으로 .navbar-toggle 요소를 추가하고 드롭다운 메뉴를 수용하기 위해 .navbar-collapse 요소를 만들었습니다. .navbar-collapse에 .active 클래스를 추가하면 표시 및 숨기기를 제어할 수 있습니다. 🎜🎜마지막으로 JavaScript에 대화형 효과를 추가하세요. 간단한 이벤트 핸들러를 사용하여 .navbar-collapse 표시와 숨기기를 전환합니다. 🎜rrreee🎜이제 .navbar-toggle을 클릭하면 .navbar-collapse 표시 및 숨기기를 전환할 수 있습니다. 🎜🎜위는 CSS를 사용하여 반응형 탐색 메뉴를 구현하기 위한 기본 단계와 샘플 코드입니다. 이러한 샘플 코드를 자신의 웹사이트에 적용하고 필요에 따라 조정 및 확장할 수 있습니다. 이 기사가 도움이 되기를 바랍니다! 🎜

위 내용은 CSS를 사용하여 반응형 탐색 메뉴 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!