WordPress에서 메가 메뉴를 만드는 과정을 단순화합니다.

이전 글에서는 메가 메뉴가 귀하의 웹사이트에 적합한 시기를 결정하는 방법과 플러그인을 사용하여 메가 메뉴를 만드는 방법을 살펴보았습니다.

하지만 좀 더 야망이 있다면 자신만의 메가 메뉴를 테마에 코딩하는 것이 더 나을 수도 있습니다. 이를 통해 원하는 방식으로 메뉴를 디자인하고 테마와 잘 어울리는지 확인할 수 있다는 이점이 있습니다.

이 튜토리얼에서는 메가 메뉴를 작성하고 테마에 추가하는 방법을 보여 드리겠습니다.

무엇이 필요하세요?

이 튜토리얼을 따르려면 다음이 필요합니다:

• WordPress 개발 설치(모든 것이 제대로 실행될 때까지 라이브 사이트에 추가하지 마세요).
• 직접 편집할 수 있는 테마 또는 타사 테마를 사용하는 경우 해당 테마의 하위 테마입니다.
• 코드 편집기.

타사 테마(ColorMag)를 사용하고 있으므로 해당 테마에 대한 하위 테마를 만들고 내 스타일을 추가하겠습니다.

메가 메뉴 작동 방식

메가 메뉴는 WordPress의 메뉴 시스템에서 출력된 코드를 가져와서 메가 메뉴로 표시합니다. 나는 사이트에 추가 메뉴를 추가하지 않을 것입니다. 원한다면 그렇게 할 수 있지만 이 큰 메뉴는 작은 화면에서는 작동하지 않기 때문에 동일한 메뉴를 고수하는 것을 선호합니다. 이는 모바일 사용자와 데스크톱 사용자에게 동일한 탐색에 대한 액세스 권한을 제공하고 싶기 때문입니다.

메가 메뉴 스타일은 더 큰 화면에서만 작동합니다. 작은 화면의 경우 사용자가 햄버거(가로선 3개) 아이콘을 클릭할 때까지 보이지 않는 햄버거 메뉴를 사용하는 것이 좋습니다. 햄버거 메뉴 코딩 튜토리얼에서 햄버거 메뉴를 코딩하는 방법을 배울 수 있습니다.

시작하기

첫 번째 단계는 메뉴에 여러 메뉴 항목을 추가하는 것입니다. 즉, 메가 메뉴를 채울 만큼 많은 콘텐츠가 있다는 의미입니다.

메뉴에 많은 링크를 추가했고 세 가지 수준의 탐색 기능을 제공합니다. 사용자가 최상위 메뉴 항목 위로 마우스를 가져가면 해당 메뉴 항목 아래의 항목이 메가 메뉴에 나타납니다. 이제 표준 레이아웃으로 나타납니다:

먼저 홈페이지 프론트엔드에 있는 이 메뉴에서 출력되는 코드를 알아보겠습니다. 내 메뉴의 (편집된) 코드는 다음과 같습니다. HTML의 구조를 볼 수 있도록 일부 li 요소를 제거하고 대부분의 CSS 클래스를 제거했습니다.

으아악

코드가 많지만, 메가 메뉴를 만들기 위해 CSS를 사용하여 배치해야 하는 클래스와 요소(및 하위 요소)를 식별하는 데 도움이 되므로 시간을 내어 공부해 보는 것이 좋습니다.

WordPress에서 생성된 CSS 클래스를 사용하여 메가 메뉴를 디자인하고 올바르게 배치되었는지 확인할 수 있습니다. 메뉴가 충분히 큰 화면에만 나타나는지 확인하기 위해 미디어 쿼리를 사용할 것입니다.

우리가 목표로 삼을 구체적인 요소는 다음과 같습니다:

• .main-navigation
• ul 元素（包括 ul ul 和 ul ul ul)
• li 和 a 및 a 요소는 ul 요소 안에 있습니다.

작은 화면에서는 기본 메뉴가 보이는 상태로 두지만, 매우 작은 화면에서는 햄버거 메뉴와 같은 모바일 대체 메뉴를 사용하는 것이 좋습니다. 내 테마에는 이미 작은 화면용으로 코딩된 햄버거 메뉴가 있으므로 걱정할 필요가 없습니다.

참고: 테마의 HTML 출력은 WordPress에서 생성되므로 내 것과 유사합니다. 그러나 기본 탐색 요소의 클래스나 ID와 같은 차이점도 있을 수 있습니다. 확실히 하려면 먼저 확인해 보는 것이 가장 좋습니다.

미디어 쿼리 설정

첫 번째 단계는 메가 메뉴 스타일에 대한 미디어 쿼리를 추가하는 것입니다(필요한 경우). 테마의 스타일시트에 다음을 추가하세요:

으아악

min-width 값을 테마에 적합하고 햄버거 메뉴에 대한 기존 미디어 쿼리에 해당하는 값으로 변경할 수 있습니다.

레이아웃 스타일 설정

내 기존 메뉴는 바로 위의 두 번째 수준 항목 위로 마우스를 가져갈 때만 세 번째 수준 항목이 표시되도록 스타일이 지정되어 있습니다. 모든 메뉴 항목이 표시되도록 이것을 변경하고 싶습니다. 그런 다음 올바르게 배치되도록 스타일을 지정하겠습니다.

먼저 사용자가 최상위 메뉴 항목 위로 마우스를 가져갈 때 두 번째 및 세 번째 수준 메뉴 항목이 표시되도록 만들어 보겠습니다.

미디어 쿼리 내부의 스타일시트에 다음을 추가하세요.

으아악

이제 페이지를 새로 고치고 메뉴 항목 위로 마우스를 가져가면 다음과 같이 표시됩니다.

第二层和第三层的项目是可见的，但说得客气一点，它们看起来很乱。让我们解决这个问题。

我们首先将每个顶级项目下的 li 元素设置为全宽。为了实现这一点，我们必须通过将其设置为静态来删除上面元素的任何相对或绝对定位。我们还将添加 display:inherit 以确保当顶级菜单项悬停在上方时，下级菜单项可见。

将其添加到您的样式表中：

.main-navigation {
    position: relative;
}
.main-navigation li {
    position: static;
}
.main-navigation ul li:hover ul {
    display: inherit;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}
.main-navigation ul li:hover ul li ul {
    display: inherit;
    position: relative;
    left: 0;
}

菜单现在看起来像这样：

它是全宽的，但我们需要做一些改进布局。让我们向二级列表添加一个浮动，以便它们彼此相邻显示。

将其添加到您的样式表中：

.main-navigation ul li:hover ul li {
    float: left;
    position: static;
    display: block;
    padding-top: 1em;
}
.main-navigation ul li:hover ul li ul li {
    float: none;
    padding-top: 0;
}

现在菜单看起来更好了：

浮动正在工作，但背景颜色已关闭。编辑 .main-navigation ul li:hover ul 元素的样式以添加背景样式。您使用的具体颜色取决于您使用的主题。

.main-navigation ul li:hover ul {
    display: inherit;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #bababa;
}

现在菜单看起来更好了：

让我们为各个列表添加一些颜色和布局样式，以使第二级项目更加突出。将其添加到您的样式表中：

.main-navigation ul:hover ul li a:link,
.main-navigation ul:hover ul li a:visited {
    color: #b01b1b;
    text-decoration: underline;
}
.main-navigation ul:hover ul li ul li a:link,
.main-navigation ul:hover ul li ul li a:visited {
    color: #fff;
    text-decoration: none;
}

这使得列表看起来更好，第二级项目带有下划线和红色。请随意修改这些颜色以适合您的主题。

最后，让我们删除第三级项目的上边距，以便它们更紧密地聚集在一起。编辑它们的代码如下：

.main-navigation ul:hover ul li ul li a {
    padding-left: 1em;
    padding-top: 0;
}

现在菜单看起来更加整洁：

我们现在有了一个功能强大的大型菜单，使用我们主题中的主导航菜单。

您不需要插件来创建简单的超级菜单

如果您想使用 WordPress 导航菜单的内容创建一个简单的大型菜单，这种技术可以让您将一个菜单添加到您的主题中，而无需太多额外的代码。

但是，如果您想添加额外的功能，例如自定义样式和图像，使用插件可能会更快。您一定会在我们的顶级大型菜单插件列表中找到满足您需求的一款。

위 내용은 WordPress에서 메가 메뉴를 만드는 과정을 단순화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!