CSS에서 메뉴 탐색을 구현하는 방법-프런트엔드 Q&A-php.cn

CSS는 웹 요소의 스타일과 레이아웃을 아름답게 만드는 데 사용할 수 있는 강력한 디자인 언어입니다. 그 중 메뉴 탐색 구현은 CSS의 일반적인 응용 프로그램입니다. 이 글에서는 CSS를 사용하여 메뉴 탐색을 구현하는 방법을 자세히 설명합니다.

1. HTML 기본 구조

CSS 스타일 작성을 시작하기 전에 HTML의 기본 구조를 이해해야 합니다. 이 예에서는 메뉴 탐색을 만들고 기본 구조를 정의해야 합니다. 다음은 기본 HTML 코드입니다.

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

로그인 후 복사

이 HTML 구조에서는 <nav> 태그를 사용하여 메뉴 탐색을 정의합니다. <ul> 태그는 순서가 지정되지 않은 목록을 만드는 데 사용되며, 목록 항목은 <li> 태그를 사용합니다. 각 목록 항목에는 <a> 태그를 사용하는 링크가 포함되어 있습니다. 이제 메뉴 탐색의 기본 구조를 정의했으므로 CSS 스타일 작성을 시작하겠습니다 <nav>标签来定义菜单导航。<ul>标签用于创建一个无序列表，列表项使用<li>标签。每个列表项内包含一个链接，使用<a>标签。现在，我们已经定义好了菜单导航的基础结构，接下来将会开始编写CSS样式

二、基础样式

在开始样式设计之前，可以先为整个菜单添加一些基础样式，如下所示：

nav {
  background-color: #333;
  font-size: 18px;
  border-radius: 5px;
}

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

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

로그인 후 복사

在这些基础样式中，我们设置了菜单导航的背景颜色、字体大小、边框圆角等样式。对于无序列表，我们将其显示样式设置为无，将内外边距都设置为0，而每个列表项都是内联块级元素，并且有一定的外边距。链接样式的样式包括将文本颜色设置为白色、设置无下划线、内边距等。

三、鼠标悬停和选中样式

接下来，我们可以添加鼠标悬停和选中时的样式效果。例如，当鼠标移动到链接上，我们希望链接背景颜色发生变化，提示用户当前链接处于活动状态。该效果可以通过以下代码来实现：

a:hover {
  background-color: #555;
}

a:active {
  background-color: #777;
}

로그인 후 복사

当鼠标悬停在链接上时，链接的背景颜色将变成深灰色；当用户单击链接时，背景颜色将进一步变成浅灰色，以突出链接的活动状态。

四、下拉菜单

对于具有子菜单的主菜单项，我们可能需要实现下拉菜单的效果，以便用户更方便地访问子菜单项。下拉菜单可以使用CSS伪类及其属性来实现。可以通过以下代码将下拉菜单添加到主菜单项中：

li:hover ul {
  display: block;
}

ul ul {
  display: none;
  position: absolute;
  top: 40px;
  background-color: #555;
}

ul ul li {
  display: block;
  width: 200px;
}

ul ul li a {
  padding: 8px;
}

로그인 후 복사

在这段代码中，我们使用了li:hover伪类来检测鼠标是否悬停在主菜单项上。如果是，则在下面的子元素中显示下拉菜单。对于下拉菜单，由于其实在主菜单项下方，因此我们需要绝对定位，并将其置于主菜单项的下面。下拉菜单的文本颜色和背景颜色也可能略有不同，以便用户清楚地区分主菜单项和子菜单项。

五、响应式设计

在设计网站时，我们应该考虑到不同设备之间的差异。因此，为了确保菜单导航在移动设备上显示正常，我们需要添加一些响应式设计的样式。例如，我们可能需要在移动设备上隐藏下拉菜单，并在触摸屏设备上添加特定的样式。可以通过以下代码来实现：

@media screen and (max-width: 768px) {
  ul {
    display: none;
    position: absolute;
    top: 60px;
    width: 100%;
    background-color: #333;
  }

  li {
    display: block;
    margin: 0;
  }

  li:hover ul {
    display: none;
  }

  a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #fff;
  }
}

로그인 후 복사

在这段代码中，我们添加了一个@media

2. 기본 스타일

스타일 디자인을 시작하기 전에 아래와 같이 전체 메뉴에 몇 가지 기본 스타일을 추가할 수 있습니다. 🎜 rrreee🎜In 이러한 기본 스타일을 바탕으로 배경색, 글꼴 크기, 둥근 모서리 테두리 및 기타 메뉴 탐색 스타일을 설정합니다. 정렬되지 않은 목록의 경우 표시 스타일을 없음으로 설정하고 내부 및 외부 여백을 모두 0으로 설정하며 각 목록 항목은 특정 여백이 있는 인라인 블록 수준 요소입니다. 링크 스타일의 스타일에는 텍스트 색상을 흰색으로 설정, 밑줄 없음, 패딩 설정 등이 포함됩니다. 🎜🎜3. 마우스 오버 및 선택 스타일🎜🎜다음으로 마우스 오버 및 선택 시 스타일 효과를 추가할 수 있습니다. 예를 들어 마우스가 링크 위로 이동하면 링크 배경색이 변경되어 링크가 현재 활성화되어 있음을 사용자에게 나타내기를 원합니다. 이 효과는 다음 코드로 얻을 수 있습니다: 🎜rrreee🎜 마우스를 링크 위로 가져가면 링크의 배경색이 사용자가 링크를 클릭할 때 어두운 회색으로 변경되고, 배경색은 더욱 밝은 회색으로 변경됩니다. 링크 활동 상태를 강조 표시합니다. 🎜🎜4. 드롭다운 메뉴🎜🎜하위 메뉴가 있는 메인 메뉴 항목의 경우, 사용자가 하위 메뉴 항목에 더 편리하게 접근할 수 있도록 드롭다운 메뉴 효과를 구현해야 할 수도 있습니다. 드롭다운 메뉴는 CSS 의사 클래스와 해당 속성을 사용하여 구현할 수 있습니다. 다음 코드를 사용하여 기본 메뉴 항목에 드롭다운 메뉴를 추가할 수 있습니다: 🎜rrreee🎜 이 코드에서는 li:hover 의사 클래스를 사용하여 마우스가 기본 메뉴 항목 위로 이동하는지 감지했습니다. 메뉴 아이템. 그렇다면 아래 하위 요소에 드롭다운 메뉴를 표시하세요. 드롭다운 메뉴의 경우 실제로는 기본 메뉴 항목 아래에 있으므로 절대적으로 위치를 잡아서 기본 메뉴 항목 아래에 배치해야 합니다. 사용자가 메인 메뉴 항목과 하위 메뉴 항목을 명확하게 구분할 수 있도록 드롭다운 메뉴의 텍스트 색상과 배경색도 약간 다를 수 있습니다. 🎜🎜5. 반응형 디자인🎜🎜웹사이트를 디자인할 때 다양한 기기 간의 차이점을 고려해야 합니다. 따라서 메뉴 탐색이 모바일 장치에서 제대로 표시되도록 하려면 몇 가지 반응형 디자인 스타일을 추가해야 합니다. 예를 들어 모바일 장치에서는 드롭다운 메뉴를 숨기고 터치스크린 장치에서는 특정 스타일을 추가해야 할 수도 있습니다. 이는 다음 코드를 사용하여 달성할 수 있습니다. 🎜rrreee🎜 이 코드에서는 장치의 화면 크기를 감지하기 위해 @media 미디어 쿼리를 추가했습니다. 화면 너비가 768픽셀보다 작거나 같으면 일부 스타일이 변경됩니다. 예를 들어, 드롭다운 메뉴를 비활성화하고 메뉴 항목을 서로의 위에 쌓으면서 각 메뉴 항목을 구별하기 위해 아래쪽 테두리를 추가합니다. 또한 터치 스크린 장치에서 메뉴를 더 쉽게 사용할 수 있도록 절대 위치 지정을 사용하여 전체 메뉴를 페이지 상단으로 이동했습니다. 🎜🎜위는 메뉴 네비게이션 구현에 필요한 스타일 디자인입니다. CSS 스타일 코드를 복사하여 웹페이지에 추가하세요. 물론 실제 개발에서는 웹 사이트의 특정 요구 사항에 따라 일부 변경이 필요하지만 이는 웹 사이트에 아름다운 메뉴 탐색을 추가하기 위한 좋은 시작점을 제공합니다. 🎜

위 내용은 CSS에서 메뉴 탐색을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!