wordpress - wp_nav_menu 中用于幻灯片的按钮
问题描述
我目前在导航菜单中有一个单独的按钮,可以打开和关闭菜单,但我想将此按钮放在导航栏的末尾
所以这里是wordpress的html/php部分,就是header.php
<nav class="main-nav">
<button aria-expanded="false" aria-controls="main-menu" class="togle">Menu</button>
<?php
wp_nav_menu(
[
'theme_location'=>"menu-du-header",
'items_wrap' => '<ul id="main-menu" class="menu" hidden>%3$s</ul>'
]
);
?>
</nav>
这是允许您显示和分配菜单的 JS 部分
const toggleMenu = document.querySelector('.main-nav button');
const menu = document.querySelector('#main-menu');
toggleMenu.addEventListener('click', function() {
const open = JSON.parse(toggleMenu.getAttribute('aria-expanded'));
toggleMenu.setAttribute('aria-expanded', !open);
menu.hidden = !menu.hidden;
});
这是涉及导航栏和按钮的 CSS 部分
.main-nav button {
position: relative;
font: 0/0 a;
color: transparent;
border: 0;
text-shadow: none;
width: 4rem;
height: 2.4rem;
padding: 1rem 0;
background-color: #fff;
background-clip: content-box;
transition: .3s;
}
.main-nav button::before,
.main-nav button::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 0.4rem;
background-color: #fff;
transition: .3s;
transform-origin: left;
}
.main-nav button::before {
top: 0;
}
.main-nav button::after {
bottom: 0;
}
.main-nav button[aria-expanded=true] {
background-color: rgba(255, 255, 255, 0);
}
.main-nav button[aria-expanded=true]::before {
transform: translate(.5rem, -.375rem) rotate(45deg);
}
.main-nav button[aria-expanded=true]::after {
transform: translate(.5rem, .375rem) rotate(-45deg);
}
.main-nav .menu{
position: absolute;
z-index: 100;
width: 40%;
left: 0;
right: 0;
top: 5%;
display: flex;
flex-direction: row;
background-color: var(--primary);
transform: translateX(-90%);
transition: .3s;
}
.main-nav .menu:not([hidden]) {
transform: translateX(0)
}
.main-nav a {
display: block;
padding: 1rem 2rem;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
}
.main-menu a{
text-decoration: none;
color: #020504;
margin: 0.5rem;
padding: 0.5rem;
}
.main-nav{
display: flex;
flex-direction: row;
background-color: var(--primary);
解决方案
推荐阅读
- wordpress - 将 Leaky Paywall 设为模态弹出窗口
- xamarin - Xamarin Forms 自适应横幅广告不会横向加载
- php - Laravel 在来宾中间件路由中访问 Auth
- c++ - 从 HDF5 文件链接器问题读取
- java - 如何获取数据(属性)-以文本格式打开文件以逐行读取(OOP JAVA)
- php - ajax laravel 遇到一个非数值的值
- php - 为什么我的 api 路由在 Postman 上测试时不会返回任何内容?
- sockets - 使用 Kubernetes/Agones 的游戏网络
- c# - Firebase C# .net(如何上传 .pdf、.docs、.dwg 等任何类型的文件)?
- java - 是否改变了 Quarkus 1.13.7 和 Quarkus 2.0.0 之间处理 Vertx eventBus 多线程的方式?