我有一个响应式导航栏，我已经添加到WordPress主题中。但是我想将子菜单下拉菜单添加到我的响应式导航栏中，但我不确定如何做到这一点。我是PHP和WordPress的新手。
.HTML
<?php
$args = array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu( $args ); ?>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
.CSS
nav {
height: 40px;
width: 100%;
color: #fff;
background: #86c024;
font-size: 11pt;
position: relative;
}
nav ul {
padding: 0;
margin: 0 auto;
max-width:1000px;
width: 100%;
height: 40px;
}
nav li {
display: inline;
float: left;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #fff;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li a {
padding: 0 10px;
border-right: 1px solid #fff;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li a:link, a:visited {
color: white
}
nav li:last-child a {
border-right: 0;
}
nav a:hover {
background: #2098d1;
}
nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited,
.site-header nav ul li.current-page-ancestor a:link,
.site-header nav ul li.current-page-ancestor a:visited {
font-weight: bold;
background: #2098d1;
}
nav a#pull {
display: none;
}
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 100%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
@media only screen and (max-width : 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background: #86c024;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('img/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
爪哇语
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
其他 CSS 尝试
ul.sub-menu { /* this targets all sub menus */
display: none; /* hide all sub menus from view */
position: absolute;
z-index: 10;
top: 40px; /* this should be the same height as the top level menu -- height + padding + borders */
}
ul.sub-menu li { /* this targets all submenu items */
width: 100px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
}
ul.sub-menu li a { /* target all sub menu item links */
padding: 5px 10px; /* give our sub menu links a nice button feel */
}
ul.sub-menu li:hover {
display: block; /* show sub menus when hovering over a parent */
}
我已经调整了一些你的css和html，请检查它现在的工作。
主要问题是在nav的高度上，我也将a#pull的位置更改为ul的顶部。
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});nav {
width: 100%;
color: #fff;
background: #86c024;
font-size: 11pt;
position: relative;
height: 100%;
overflow: hidden;
}
nav ul {
padding: 0;
margin: 0 auto;
max-width: 1000px;
width: 100%;
}
nav li {
display: inline;
float: left;
height: 40px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #fff;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li a {
padding: 0 10px;
border-right: 1px solid #fff;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li a:link,
a:visited {
color: white
}
nav li:last-child a {
border-right: 0;
}
nav a:hover {
background: #2098d1;
}
nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited,
.site-header nav ul li.current-page-ancestor a:link,
.site-header nav ul li.current-page-ancestor a:visited {
font-weight: bold;
background: #2098d1;
}
nav a#pull {
display: none;
}
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 100%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
@media only screen and (max-width: 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background: #86c024;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('img/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
@media only screen and (max-width: 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
}<nav>
<a href="#" id="pull">Menu</a>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Home</a>
</li>
<li><a href="#">Home</a>
</li>
<li><a href="#">Home</a>
</li>
<li><a href="#">Home</a>
</li>
</ul>
</nav>