순수 CSS를 사용하여 보조 메뉴를 구현하는 방법을 설명하는 예

웹사이트가 더욱 복잡해짐에 따라 탐색 모음이 점점 더 중요해지고 있습니다. 보조 메뉴는 사용자에게 더 많은 선택권을 제공하고 웹 사이트의 유용성과 적응성을 높일 수 있는 일반적인 탐색 모음 디자인입니다. 따라서 웹사이트를 구축하는 과정에서는 간단하고 사용하기 쉬운 보조 메뉴를 구현하는 것이 필수적입니다. 이번 글에서는 CSS를 사용하여 보조 메뉴를 구현하는 방법을 알아봅니다.

1. HTML 구조 디자인

먼저 CSS 구현에 매우 중요한 HTML 내비게이션 바의 구조를 설정해야 합니다.

간단한 탐색 모음의 HTML 구조는 다음과 같습니다.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Services &#x25BC;</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

이 구조에는 nav 요소와 ul 요소가 포함되어 있습니다. nav 요소는 전체 탐색 모음을 감싸는 반면, ul 요소에는 탐색 모음의 각 개별 링크와 보조 메뉴가 포함된 링크가 포함되어 있습니다. nav元素和一个ul元素。nav元素包裹着完整的导航栏，而ul元素包含着导航栏的每个单独的链接，以及包含二级菜单的链接。

注意到第二个li元素包含一个ul元素，这个元素就是二级菜单的容器。我们将在下面的步骤中为这个容器添加样式。

2. CSS样式设计

接下来，我们需要为这个导航栏设置CSS样式，以实现二级菜单。在下面的代码中，我们将首先去掉默认样式，并给所有链接设置以下样式：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
}

nav ul ul li {
  float: none;
  width: 100%;
}

nav li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

这一块代码包含了以下几个部分：

• 我们首先去掉了默认的样式，并设置了所有链接的基本样式。
• 接下来，我们为所有的li元素设置position: relative;，以便相对于它的子元素定位。这意味着我们可以通过子元素来实现其定位。
• 每个二级菜单用一个单独的ul元素来包含，我们为这些ul元素设置了一些基本的样式，例如定位以及不可见。
• 最后，我们添加了鼠标悬浮的效果。当鼠标悬浮在一个li
두 번째 li 요소에는 보조 메뉴의 컨테이너인 ul 요소가 포함되어 있습니다. 다음 단계에서 이 컨테이너에 스타일을 추가하겠습니다.

CSS 스타일 디자인
다음으로, 보조 메뉴를 구현하기 위해 이 탐색 모음의 CSS 스타일을 설정해야 합니다. 아래 코드에서는 먼저 기본 스타일을 제거하고 모든 링크에 대해 다음 스타일을 설정합니다.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Services &#x25BC;</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

이 코드 블록에는 다음 부분이 포함되어 있습니다.

• 먼저 기본 스타일을 제거하고 기본 스타일을 설정합니다. 모든 링크.
다음으로 모든 li 요소에 대해 position:relative;를 설정하여 해당 요소가 하위 요소를 기준으로 배치되도록 합니다. 이는 하위 요소를 통해 위치를 지정할 수 있음을 의미합니다.
각 보조 메뉴는 별도의 ul 요소에 포함되어 있습니다. 이러한 ul 요소에 대해 위치 지정 및 숨김과 같은 몇 가지 기본 스타일을 설정했습니다. 🎜🎜마지막으로 마우스 호버 효과를 추가했습니다. li 요소 위로 마우스를 가져가면 해당 하위 요소의 가시성을 표시로 변경합니다. 마우스를 보조 메뉴 위로 가져가면 해당 메뉴 자체와 해당 하위 요소의 표시 여부가 표시되도록 변경됩니다. 즉, 마우스를 네비게이션 바 위로 가져갈 때마다 모든 보조 메뉴가 표시된 상태로 렌더링됩니다. 🎜🎜🎜🎜전체 코드 예제🎜🎜🎜마지막으로 전체 HTML 및 CSS 코드는 다음과 같습니다. 🎜

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
}

nav ul ul li {
  float: none;
  width: 100%;
}

nav li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

rrreee🎜🎜결론🎜🎜🎜이 게시물에서는 CSS를 사용하여 보조 메뉴를 구현하는 방법을 배웠습니다. 우리는 HTML 구조와 CSS 코드를 설명하고 독자가 이 기술을 더 잘 이해할 수 있도록 완전한 예를 제공합니다. 이 기사가 도움이 되기를 바랍니다! 🎜

위 내용은 순수 CSS를 사용하여 보조 메뉴를 구현하는 방법을 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!