CSS 웹 탐색 메뉴: 다양한 대화형 탐색 메뉴 만들기

CSS 웹 탐색 메뉴: 다양한 대화형 탐색 메뉴를 만들려면 특정 코드 예제가 필요합니다.

탐색 메뉴는 웹 페이지의 중요한 구성 요소 중 하나이며 사용자가 웹 사이트의 다양한 페이지를 빠르게 탐색하는 데 도움이 될 수 있습니다. CSS의 유연한 사용을 통해 다양한 대화형 탐색 메뉴를 만들어 사용자 경험과 웹사이트 유용성을 향상시킬 수 있습니다. 이 기사에서는 몇 가지 일반적인 탐색 메뉴 유형을 소개하고 참조용으로 해당 코드 예제를 제공합니다.

<li>가로 탐색 메뉴

가로 탐색 메뉴는 가장 일반적인 유형의 탐색 메뉴입니다. 일반적으로 다른 페이지로 이동하는 데 사용되는 가로로 배열된 링크 행으로 표시됩니다. 다음은 간단한 가로 탐색 메뉴에 대한 코드 예입니다.

<ul class="horizontal-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

.horizontal-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.horizontal-menu li {
  display: inline-block;
}

.horizontal-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.horizontal-menu li a:hover {
  background-color: #f1f1f1;
}

위 코드는 순서가 지정되지 않은 목록 <ul></ul>과 목록 항목 <li>을 사용하여 생성합니다. 탐색 메뉴. display: inline-block;을 설정하면 메뉴 항목이 가로로 정렬됩니다. 마우스를 올리면 메뉴 항목의 배경색이 변경되어 시각적 피드백을 제공합니다. <ul></ul> 和列表项 <li> 来创建导航菜单。通过设置 display: inline-block;，使得菜单项水平排列。鼠标悬停时，菜单项的背景色会发生变化，以提供视觉反馈。

<li>垂直导航菜单

垂直导航菜单是另一种常见的导航菜单类型。它通常呈现为一列垂直排列的链接，用于导航到不同页面。以下是一个简单的垂直导航菜单的代码示例：

<ul class="vertical-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

.vertical-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.vertical-menu li {
  margin-bottom: 10px;
}

.vertical-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.vertical-menu li a:hover {
  background-color: #f1f1f1;
}

以上代码同样使用了无序列表和列表项来创建导航菜单。通过设置 margin-bottom: 10px;，使得菜单项垂直排列，之间有一定的间距。鼠标悬停时，菜单项的背景色也会发生变化。

<li>下拉菜单

下拉菜单是一种常见的交互式导航菜单，它可以展示更多的菜单选项，并且在鼠标悬停时显示隐藏的选项。以下是一个简单的下拉菜单的代码示例：

<ul class="dropdown-menu">
  <li><a href="#">产品</a>
    <ul>
      <li><a href="#">产品一</a></li>
      <li><a href="#">产品二</a></li>
      <li><a href="#">产品三</a></li>
    </ul>
  </li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

.dropdown-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.dropdown-menu li {
  display: inline-block;
  position: relative;
}

.dropdown-menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.dropdown-menu li:hover ul {
  display: block;
}

.dropdown-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.dropdown-menu li a:hover {
  background-color: #f1f1f1;
}

以上代码中，通过设置 position: relative; 和 position: absolute;，使得隐藏的下拉菜单在鼠标悬停时显示在父菜单下方。另外，通过设置 display: none; 和 display: block;

세로 탐색 메뉴
🎜세로 탐색 메뉴는 또 다른 일반적인 유형의 탐색 메뉴입니다. 일반적으로 다른 페이지로 이동하는 데 사용되는 링크가 수직으로 배열된 열로 표시됩니다. 다음은 간단한 수직 탐색 메뉴에 대한 코드 예제입니다. 🎜rrreeerrreee🎜위 코드도 순서가 지정되지 않은 목록과 목록 항목을 사용하여 탐색 메뉴를 만듭니다. margin-bottom: 10px;를 설정하면 메뉴 항목이 특정 간격을 두고 수직으로 배열됩니다. 마우스를 올리면 메뉴 항목의 배경색도 변경됩니다. 🎜
🎜드롭다운 메뉴🎜🎜🎜드롭다운 메뉴는 더 많은 메뉴 옵션을 표시하고 마우스를 올리면 숨겨진 옵션을 표시할 수 있는 일반적인 대화형 탐색 메뉴입니다. 다음은 간단한 드롭다운 메뉴의 코드 예입니다. 🎜rrreeerrreee🎜위 코드에서 position:relative; 및 position:absolute;를 설정하면 숨겨진 드롭다운 메뉴는 마우스 오버 시 상위 메뉴 아래에 나타납니다. 또한 display: none; 및 display: block;을 설정하면 메뉴를 표시하거나 숨길 수 있습니다. 🎜🎜위의 코드 예제를 사용하면 다양한 유형의 대화형 탐색 메뉴를 만들 수 있습니다. 물론, 이는 귀하의 웹 사이트에 맞는 보다 독특한 탐색 메뉴를 만들기 위해 필요에 따라 확장하고 수정할 수 있는 몇 가지 기본적인 예일 뿐입니다. 아름답고 기능적인 탐색 메뉴를 만들어 보세요! 🎜

위 내용은 CSS 웹 탐색 메뉴: 다양한 대화형 탐색 메뉴 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!