I have a responsive navigation bar that I have added to a WordPress theme. But I would like a submenu drop-down to be added to my responsive navigation bar but im unsure how to do this. I am new to PHP and 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;
}
}
Javascript
<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>
additional CSS attempt
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 */
}
I have adjust some of your css and html, please check its working now.
the main problem is in the height of nav
also I have change the position of a#pull
to the top of the 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.