前面的章节中,我们介绍了wordpress网站模板开发中,使用wp_list_pages()和wp_list_categories()这2个函数来创建基于page页面的导航菜单和基于分类目录的导航菜单。但是,这2种方式创建出来的菜单不够灵活,基于页面的导航菜单就添加不了分类目录,基于分类目录的导航菜单也添加不了page页面作为菜单。那么,wordpress有没有提供灵活一点的创建导航菜单的方法,能包含page页面、分类目录,甚至其它的选项。答案是肯定的。通过wordpress提供的方法,我们可以为wordpress网站模板创建自定义导航菜单。下面,就随我一起来看看吧。
wordpress网站后台默认情况下,没有提供菜单选项,需要我们在wordpress主题模板中来添加这个功能。这个,我们可以进入到wordpress后台的外观去看看,如下图:
所以,我们要先在wordpress主题的functions.php文件中注册菜单,代码如下:
//菜单register_nav_menus( array('menu_top' => '头部导航','menu_bottom' => '底部导航',) );
添加完上面的代码,我们再到wordpress网站后台的外观中看一下,这时,我们会发现多了一个“菜单”,这就是我们需要的自定义菜单。如下图:
给wordpress网站后台添加了菜单功能后,我们就可以在wordpress后台的菜单中创建前台网页的自定义导航菜单了。点击“外观”中的“菜单”,右侧内容栏进入到菜单界面,如下图:
点击上图中的“创建新菜单”,进入到创建界面,如下图:
填写菜单名,点击“创建菜单”,进入到菜单结构界面,如下图:
在这个菜单结构界面,我们可以选择左侧的“添加菜单项”中的页面、分类目录、文章、自定义链接这几个选项中的子项,然后点击“添加到菜单”,就添加到右侧的菜单结构中,想在wordpress网站前台导航菜单中显示什么,就选择什么。如下图:
然后,勾选“显示位置”,再点击保存菜单按钮,就可以了。
wordpress后台创建好了菜单后,我们要想在wordpress网站前台显示,还需要我们在wordpress网站模板中调用它。在给functions.php文件添加菜单功能时,我们设置了2个菜单位置:头部菜单和底部菜单。这里,我们以头部菜单为例,在wordpress网站模板的头部模板header.php中添加如下代码:
$menu = array( 'container' => false, //最外层标签名 'theme_location' => 'menu_top', //菜单类名 'depth' => 0, //菜单深度);wp_nav_menu( $menu );
这样,我们就可以在wordpress网站的前台头部看到我们添加的导航菜单,如下图:
有点难看,是吧,我们可以给这个菜单添加CSS样式,来让它好看一点,这里就不演示了。上面的代码中,我们用到了wordpress的一个函数——wp_nav_menu(),这个函数的功能,就是把后台创建好的菜单在前台打印出来。这个函数的参数跟wp_list_pages()和wp_list_categories()这2个函数的参数类似,可以是字符串类型,也可以是数组类型。
wp_nav_menu()函数的参数如下:
wp_nav_menu( array('theme_location' => '',//导航别名'menu' => '', //期望显示的菜单'container' => 'div', //容器外层标签'container_class' => '',//ul父节点class类名'container_id' => '', //ul父节点id名'menu_class' => 'menu', //ul节点class类名'menu_id' => '', //ul节点id名'echo' => true,//是否输出菜单,默认为真,true或1时,打印输出;false或0时,不输出。'fallback_cb' => 'wp_page_menu', //菜单不存在时,返回默认菜单,设为false则不返回'before' => '', //链接前文本'after' => '', //链接后文本'link_before' => '', //链接文本前'link_after' => '',//链接文本后'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', //如何包装列表'depth' => 0, //菜单深度,默认0'walker' => '' //自定义walker) );
可见,wp_nav_menu()函数的参数还是挺多的,但实际使用中,不需要全部设置,往往我们只需要使用其它的几个常规参数就可以了,如上例中,我们就只用了3个参数,就打印出了wordpress网站的头部导航菜单。
通过以上这几步,我们就为wordpress网站模板添加好了自定义导航菜单的功能,看起来有点复杂,是吧。的确,跟wp_list_pages()和wp_list_categories()这2导航菜单相比,是要复杂一点。但是,多做几次后,你会发现,这种自定义导航菜单使用起来更加灵活多变。不管怎样,这3种添加导航菜单的方式我们都要掌握,可以在不同的需求中使用不同的方式。
5自适应是现在主流的技术,导航栏菜单是最常见的一种,今天我们一起来学习一下它是如何使用HTML,CSS和JavaScript来构建响应式导航栏和汉堡菜单的。
这就是它的样子,是不是很熟悉呢?
H5导航菜单
好的,那就先从HTML开始:
<header class=”header”>
<nav class=”navbar”>
<a href=”#” class=”nav-logo”>WebDev.</a>
<ul class=”nav-menu”>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Services</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Blog</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>About</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Contact</a>
</li>
</ul>
<div class=”hamburger”>
<span class=”bar”></span>
<span class=”bar”></span>
<span class=”bar”></span>
</div>
</nav>
</header>
通过这些代码,我们实现了:
以上就是我们需要的HTML代码。
现在让我们添加CSS样式重置代码
(此外,我们将导入所需的字体,并添加一些基本的CSS来重置所有的默认样式。)
@import url(‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap’);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: ‘Roboto’, sans-serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
现在让我们给每个元素逐个添加样式:
header和navbar:
.header{
border-bottom: 1px solid #E2E8F0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
}
hamburger样式:
.hamburger {
display: none;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}
其他元素的基本样式:
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-item {
margin-left: 5rem;
}
.nav-link{
font-size: 1.6rem;
font-weight: 400;
color: #475569;
}
.nav-link:hover{
color: #482ff7;
}
.nav-logo {
font-size: 2.1rem;
font-weight: 500;
color: #482ff7;
}
完成这些之后,看起来应该是这样的:
但是它不是响应式的,所以我们还需要添加媒体查询css代码。
@media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 5rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow:
0 10px 27px rgba(0, 0, 0, 0.05);
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 2.5rem 0;
}
.hamburger {
display: block;
cursor: pointer;
}
}
这里媒体查询就是通过设置position: fixed; left: -100%;来隐藏nav-menu。
此外,我们将hamburger设置为display: block;,所以现在可见。
我们还添加了一个额外的类.nav-menu.active,它在nav-menu上设置left: 0;。现在,到了添加javascript的时候了,以便在我们单击汉堡菜单时,会在nav-menu上添加此active类。
添加JavaScript
const hamburger = document.querySelector(“.hamburger”);
const navMenu = document.querySelector(“.nav-menu”);
hamburger.addEventListener(“click”, mobileMenu);
function mobileMenu() {
hamburger.classList.toggle(“active”);
navMenu.classList.toggle(“active”);
}
此处的函数mobileMenu()在hamburger和nav-menu上也添加了一个active类,从而打开mobile menu。单击hamburger时,我们可以使用hamburger上的active类来创建X动画。现在就开始做吧。
// Inside the Media Query.
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
现在看起来应该是这样的:
但是有一个问题,当我们单击链接时,汉堡菜单不会关闭。现在让我们解决一下这个问题。
const navLink = document.querySelectorAll(“.nav-link”);
navLink.forEach(n => n.addEventListener(“click”, closeMenu));
function closeMenu() {
hamburger.classList.remove(“active”);
navMenu.classList.remove(“active”);
}
closeMenu()函数从nav-menu和hamburger中删除active类,从而关闭mobile menu。
H5导航菜单就是这样,实现了用HTML,CSS和javascript构建一个响应式的导航栏菜单。希望你喜欢并分享这篇文章。感谢大家的阅读。
更多干货等着你~ 点赞、分享,关注哦
果你曾经在浏览网页时看到三条线堆叠在一起,那么你就遇到了汉堡菜单。它是移动和响应式网页设计中使用的一种流行设计元素,用于创建干净、简约的界面。
单击时,这个小菜单会从屏幕的任一侧滑出,显示导航项或选项列表。当菜单打开时,汉堡菜单也会变成“X”或其他形状。
在这篇文章中,我们将向您展示如何在 CSS 中创建不同的汉堡菜单动画。让我们开始吧!
要创建汉堡菜单,我们首先需要创建 HTML 。由一个按钮元素和三个嵌套的 div 元素组成,每个元素代表汉堡图标的一行。
<button class="hamburger">
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
</button>
接下来,我们将为元素添加一些基本样式。我们将从按钮元素中删除任何默认样式,包括背景和边框颜色。
.hamburger {
background: transparent;
border: transparent;
cursor: pointer;
padding: 0;
}
然后,对于每个线元素,我们将设置背景颜色、高度、宽度和每个直线之间的间距。
.hamburger__line {
background: rgb(203 213 225);
margin: 0.25rem 0;
height: 0.25rem;
width: 2rem;
}
是时候使用 CSS 创建一个很酷的汉堡菜单动画了。当用户将鼠标悬停在按钮上时,我们希望线条转换为“X”形。
为了实现这一点,我们将使用 :hover 伪类和 nth-child 选择器来访问每一行。我们将使用 translate() 和 rotate() 函数将线条转换为 X 形状。
第一条线将在 y 轴上向下移动并旋转 45 度以创建一条 X 形状的线。第二行将通过将其不透明度设置为零而消失。最后一条线将在 y 轴上向上移动,并逆时针方向旋转 45 度以完成 X 形状。我们将通过在 translate() 和 rotate() 函数中使用负值,将其转换为与第一行相反的方向。
.hamburger:hover .hamburger__line:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.hamburger:hover .hamburger__line:nth-child(2) {
opacity: 0;
}
.hamburger:hover .hamburger__line:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
若要应用转换,我们将使用该 transition 属性。动画将使用 ease-out 计时功能运行 300 毫秒 (0.3s)。该 all 值表示将对样式更改进行动画处理,包括 transform 和 opacity 属性。
.hamburger__line {
transition: all 0.3s ease-out;
}
通过将鼠标悬停在按钮上来尝试一下。
<button class="hamburger">
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
</button>
在这种方法中,当按钮悬停在按钮上时,我们会将其变成减号。我们将使用与上一种方法相同的转换,但我们不会旋转第一行和最后一行。
相反,我们将在 y 轴上向下移动第一行,直到它到达第二行。第三条线将向上移动,直到到达第一行。然后,第二行将关闭可见性,就像在前面的方法中一样。
第一行和最后一行的 `transform` 属性将与前面的方法相同,只是我们将不再使用该 `rotate()` 函数。
.hamburger:hover .hamburger__line:nth-child(1) {
transform: translateY(9px);
}
.hamburger:hover .hamburger__line:nth-child(2) {
opacity: 0;
}
.hamburger:hover .hamburger__line:nth-child(3) {
transform: translateY(-9px);
}
看看它是什么样子的!
<button class="hamburger">
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
</button>
要将按钮变成减号,我们可以使用另一种效果,将第一行和最后一行水平移出按钮。我们将使用该 translateX() 函数来指示位置仅在 x 轴上发生了变化。使用 translateX(-100%) ,可以将目标从左向右移出容器,而使用translateX(100%) ,我们可以做相反的事情。
这两种转换都将 opacity 属性设置为零,使第一行和最后一行不可见。因此,动画完成后,只有第二行仍然可见。
.hamburger:hover .hamburger__line:nth-child(1) {
opacity: 0;
transform: translateX(-100%);
}
.hamburger:hover .hamburger__line:nth-child(3) {
opacity: 0;
transform: translateX(100%);
}
看看这如何重现减号。
<button class="hamburger">
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
</button>
在本节中,我们将向您展示另一种类型的转换。当用户将鼠标悬停在按钮上时,它会变成一个加号。为了达到这种效果,我们将第一条线向下移动,直到它与第二条线相遇,从而形成一条水平线。
然后,我们移动 y 轴上的最后一条线并将其逆时针旋转 90 度,形成加号的垂直线。最后,我们调整 opacity 第二行,使其在动画后不可见。
.hamburger:hover .hamburger__line:nth-child(1) {
transform: translateY(9px);
}
.hamburger:hover .hamburger__line:nth-child(2) {
opacity: 0;
}
.hamburger:hover .hamburger__line:nth-child(3) {
transform: translateY(-9px) rotate(-90deg);
}
查看下面的演示,了解这种方法的实际应用。
<button class="hamburger">
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
</button>
为了在按钮上创建箭头,我们使用简单的转换技术。第一条线旋转 45 度并沿 x 轴和 y 轴移动,直到它与第二条线的第一个点相交,形成箭头的顶线。然后,我们减小第一行的宽度,使其看起来更时尚。将相同的转换应用于最后一行,以创建箭头的底线。
如果需要调整箭头的位置,请随意调整传递给 translate() 函数的值。
.hamburger:hover .hamburger__line:nth-child(1) {
transform: translate(-2px, 4px) rotate(-45deg);
width: 16px;
}
.hamburger:hover .hamburger__line:nth-child(3) {
transform: translate(-2px, -4px) rotate(45deg);
width: 16px;
}
当您将鼠标悬停在按钮上时,箭头的样子如下:
<button class="hamburger">
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
</button>
要更改箭头的方向,请调整 translate() 函数的参数。这将确保第一行和最后一行到达第二行的末尾,并且箭头将沿相反方向旋转。
*请认真填写需求信息,我们会在24小时内与您取得联系。