It's has been answered in several ways I've found on StackOverflow, but can't get it to work on my Wordpress theme. Very new to js/JQuery, beginning when I started troubleshooting this. Here is my website.
Right now, my submenu for "WORK" opens on hover, which is ok on desktop, but on mobile screens below 767px, my nav menu changes into a button operated by this jQuery function, and my whole "WORK" submenu is open, listing everything out and taking up a lot of space:
(function($){
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
});
;
And when I add this code from this post, the whole menu button disappears on mobile and nothing is clickable:
$(function() {
$('#cssmenu > li').click(function(e) { // limit click to children of mainmenu
var $el = $('ul',this); // element to toggle
$('#cssmenu > li > ul').not($el).slideUp(); // slide up other elements
$el.stop(true, true).slideToggle(400); // toggle element
return false;
});
$('#cssmenu > li > ul > li').click(function(e) {
e.stopPropagation(); // stop events from bubbling from sub menu clicks
});
});
I have tried a few different ones, like this one, which also made the button disappear and seem to clash with the jQuery button code.
This PHP seems to define the navigation classes:
<?php
wp_nav_menu(array(
'container_id' => 'cssmenu',
'theme_location' => 'menu-1',
'fallback_cb' => 'gusto_photography_Menu_Walker::fallback',
'walker' => new Gusto_Photography_Menu_Walker(),
));
?>
with the corresponding CSS here:
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#cssmenu {
background: transparent;
margin: 0;
width: auto;
padding: 0;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
#cssmenu ul {
list-style: none;
margin: 0 auto;
padding: 0;
float: none;
text-align: left;
padding-top: 15px;
}
#cssmenu ul:after,
#cssmenu:after {
content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu a {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#cssmenu ul li {
margin: 0;
padding: 0;
display: block;
position: relative;
}
#cssmenu ul li a {
text-decoration: none;
text-transform: uppercase;
display: block;
margin: 0;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li a {
display: inline-block;
}
#cssmenu ul li a:after {
content: '';
display: block;
height: 2px;
width: 0;
margin: 10px 0 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
#cssmenu ul li a:hover:after {
width: 100%;
background: #000;
}
#cssmenu ul li ul {
position: absolute;
left: -9999px;
top: auto;
z-index: 9999;
}
#cssmenu ul li ul li {
max-height: 0;
position: absolute;
-webkit-transition: max-height 0.4s ease-out;
-moz-transition: max-height 0.4s ease-out;
-ms-transition: max-height 0.4s ease-out;
-o-transition: max-height 0.4s ease-out;
transition: max-height 0.4s ease-out;
background: #ffffff;
}
#cssmenu ul li ul li.has-sub:after {
display: block;
position: absolute;
content: '';
height: 10px;
width: 10px;
border-radius: 5px;
background: #000000;
z-index: 1;
top: 13px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
right: auto;
left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
display: block;
position: absolute;
content: '';
height: 0;
width: 0;
border: 3px solid transparent;
border-left-color: #ffffff;
z-index: 2;
top: 15px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
right: auto;
left: 15px;
border-left-color: transparent;
border-right-color: #ffffff;
}
#cssmenu ul li ul li a {
font-size: 14px;
font-weight: 400;
text-transform: none;
color: #000000;
letter-spacing: 0;
display: block;
width: 170px;
padding: 7px 7px 7px 7px;
text-align: left;
}
#cssmenu ul li ul li:hover>a,
#cssmenu ul li ul li.active>a {
color: #777;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
background: #eee;
}
#cssmenu ul li ul li:hover>ul {
left: 100%;
top: 0;
}
#cssmenu ul li ul li:hover>ul>li {
max-height: 72px;
position: relative;
}
#cssmenu>ul>li {
display: block;
}
#cssmenu.align-center>ul>li {
float: none;
display: inline-block;
}
#cssmenu.align-center>ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right>ul {
float: right;
}
#cssmenu.align-right>ul>li:hover>ul {
left: auto;
right: 0;
}
#cssmenu.align-right ul ul li:hover>ul {
right: 100%;
left: auto;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu>ul>li:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 1px;
top: 0;
z-index: 0;
border-bottom: 0px solid #000;
background: transparent;
-webkit-transition: border-bottom .2s;
-moz-transition: border-bottom .2s;
-ms-transition: border-bottom .2s;
-o-transition: border-bottom .2s;
transition: border-bottom .2s;
}
#cssmenu>ul>li.has-sub>a {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 10px;
}
#cssmenu>ul>li.has-sub>a:after {
display: block;
content: '';
background: #ffffff;
height: 2px;
width: 12px;
margin: 10px 0 0;
position: absolute;
border-radius: 13px;
right: 0px;
left: 47px;
top: 18px;
}
#cssmenu>ul>li.has-sub>a:before {
display: block;
content: '';
border: 4px solid transparent;
border-top-color: #000;
z-index: 2;
height: 0;
width: 0;
position: absolute;
right: 0px;
left: 47px;
top: 18px;
}
#cssmenu>ul>li>a {
color: #000;
padding:15px 15px 0;
padding-left: 0;
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
z-index: 2;
position: relative;
}
#cssmenu>ul>li:hover:after,
#cssmenu>ul>li.active:after {
height: 100%;
}
#cssmenu>ul>li:hover>a {
color: #000;
}
#cssmenu>ul>li.active>a {
}
#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li.active>a:after {
}
#cssmenu>ul>li:hover>a:before,
#cssmenu>ul>li.active>a:before {
border-top-color: #eee;
}
#cssmenu>ul>li:hover>ul {
left: 0;
}
#cssmenu>ul>li:hover>ul>li {
max-height: 72px;
position: relative;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu>ul>li>a {
width: auto;
display: inline-block;
}
#cssmenu>ul>li {
width: auto;
}
#cssmenu>ul>li>ul {
width: 170px;
display: block;
}
#cssmenu>ul>li>ul>li {
width: 170px;
display: block;
}
.main-navigation {
margin-bottom: 0em;
}
#media all and (max-width: 767px),
{
#cssmenu>ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
#cssmenu>ul>li>ul {
width: 100%;
display: block;
}
#cssmenu.align-right ul li a {
text-align: left;
}
#cssmenu>ul>li>ul>li {
width: 100%;
display: block;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu>ul>li>ul>li>a {
width: 100%;
display: block;
}
#cssmenu ul li ul li a {
width: 100%;
}
#cssmenu.align-center>ul {
text-align: left;
}
#cssmenu.align-center>ul>li {
display: block;
}
#cssmenu>ul.open {
max-height: 1000px;
border-top: 0px solid rgba(110, 110, 110, 0.25);
}
#cssmenu ul {
width: 100%;
}
#cssmenu ul>li {
float: none;
width: 100%;
}
#cssmenu ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
margin-left: 40%;
margin-right: 40%;
padding: 6px;
text-align: center;
}
#cssmenu ul>li:after {
display: none;
}
#cssmenu ul li.has-sub>a:after,
#cssmenu ul li.has-sub>a:before,
#cssmenu ul li ul li.has-sub:after,
#cssmenu ul li ul li.has-sub:before {
display: none;
}
#cssmenu ul li ul,
#cssmenu ul li ul li ul,
#cssmenu ul li ul li:hover>ul,
#cssmenu.align-right ul li ul,
#cssmenu.align-right ul li ul li ul,
#cssmenu.align-right ul li ul li:hover>ul {
left: 0;
position: relative;
right: auto;
}
#cssmenu ul li ul li,
#cssmenu ul li:hover>ul>li {
max-height: 999px;
position: relative;
background: none;
}
#cssmenu ul li ul li a {
padding: 8px 20px 8px 35px;
color: #333;
}
#cssmenu ul li ul ul li a {
padding: 8px 20px 8px 50px;
}
#cssmenu ul li ul li:hover>a {
color: #000000;
}
#cssmenu #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 20%;
margin-left: 40%;
margin-right: 40%;
margin-top: 20px;
padding: 10px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #000;
cursor: pointer;
border: 2px solid #000;
}
#cssmenu #menu-button:after {
display: none;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #333;
border-bottom: 2px solid #000;
right: 20px;
top: 16px;
}
#cssmenu #menu-button:before {
display: none;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #333;
border-bottom: 2px solid #000;
right: 20px;
top: 26px;
}
}
I'm not sure why the jQuery I'm adding is not affecting it the submenu at all. Thank you for your help.
You can try to target the ul inside of the 'work' li item and use display:none to hide it. Then on click of the work li you can add and remove a class for example class="open" to close or open the submenu using jQuery.
<ul class="menu">
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li class="has-children">Click me!
<ul class="submenu">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</li>
<li>list item</li>
<li>list item</li>
</ul>
The CSS would be something like this:
.menu {
.has-children {
color: red;
cursor:pointer;
&.open {
.submenu {
display:block;
}
}
}
& :nth-child(4n) {
ul {
display:none;
}
}
}
and the jQuery something like this:
$( document ).ready(function() {
$('.has-children').on('click', function(){
if ($('.has-children').hasClass('open')) {
$(this).removeClass('open');
} else {
$(this).addClass('open');
}
});
});
It will make more sense if you see it working.
I've put together a working example in the following link: https://codepen.io/Angel-SG/pen/JwXRZo
Related
Here is my codepen or view below the code.
If you click on a tab, its content will show successfully, then click on another tab, that content will also show successfully, however after that, if you go back to the previous tab that you just clicked, then that previous tab's content won't show, instead, the second tab's content will simply remain there. Why is this the case?
JS:
$k('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//new tab
console.log(e.target);
//previous tab
console.log(e.relatedTarget);
})
CSS:
/*nice Menu*/
.rotate {
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
}
.rotate.down {
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
a {
text-decoration: none;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pad-15 {
padding: 15px;
}
.clear {
clear: both;
}
.clear:after, .clear:before{
content: " ";
display: table;
}
a.toggle-nav {
top: 12px;
right: 15px;
position: absolute;
color: #fff;
line-height: 25px;
font-size: 22px;
background: #DE5939;
padding: 3px 5px;
border-radius: 1px;
transform: rotate(90deg);
}
.nice-nav {
width: 250px;
height: 100%;
transition:all 0.4s ease-in-out 0s;
float:left;
font-size: 15px;
}
.nice-nav li.child-menu span.toggle-right {
bottom: 0;
display: inline-block;
float: right;
padding: 15px;
position: absolute;
right: 0;
text-align: right;
top: 3px;
}
.nice-nav ul li a {
background: #fff none repeat scroll 0 0;
border: 1px solid #f6f6f6;
color: #333;
display: block;
padding: 12px;
position: relative;
}
.nice-nav ul li.child-menu ul {
background: #fff;
display: none;
}
.nice-nav ul li.child-menu ul li a {
background: #f6f6f6;
padding: 10px 20px;
}
.nice-nav > ul {
margin: 0;
padding: 0;
}
.nice-nav > ul li{
list-style: none;
margin: 2px auto;
}
.nice-nav ul li ul {
padding: 0;
}
.modal-backdrop.fade.show{
display: none;
}
/*nice Menu*/
You forgot to add nav in your ul class.
From your code from this:
<!--nice menu-->
<div class="nice-nav">
<ul>
To this:
<!--nice menu-->
<div class="nice-nav">
<ul class="nav d-block" aria-orientation="vertical">
I am struggling to position my menu so that it always stays in the same position across different dimensions of monitors but is also responsive when the window is decreased and increased in size. I am by all means no expert in CSS and have had no training so I know my code is poor. I am also trying to make the menu ease in gradually but unsure where to enter this code. Any help would very much appreciated.
.HomeBottomMenu {
-webkit-font-smoothing:antialiased;
text-align: center;
text-align: justify;
position: absolute;
bottom: -3em;
}
.HomeBottomMenu ul {
list-style-type: none;
margin: 0;
padding: 0
}
.HomeBottomMenu ul li{
position: relative;
line-height: 21px;
min-width: 220px;
text-align: center;
background: #424242;
}
.HomeBottomMenu ul li a{
display: block;
padding: 8px 8px;
color: #fff;
text-decoration:none;
text-align: left;
font-family: 'BebasNeueRegular', Arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
.HomeBottomMenu ul li a:hover{
color: #fff;
background: #25a0da;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.HomeBottomMenu ul li ul.dropdown{
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: -0.01em;
}
.HomeBottomMenu ul li:hover ul.dropdown{
display: inline;
bottom: 100%;
position: absolute;
background: #939393;
min-height: 50px;
}
.HomeBottomMenu ul li ul.dropdowndropdown {
position: relative;
overflow:hidden;
z-index: 100;
height:0;
transition-property: height;
transition-duration: 0.5s;
transition-timing-function: linear;
transition-delay: 0.5s;
Opacity:1;
}
.HomeBottomMenu ul li ul :hover .dropdowndropdown{
position: relative;
display:inline;
bottom:100%;
height: 200px;
Opacity:1;
}
.HomeBottomMenu ul li ul.dropdowndropdown li{
display: block;
background-color: rgba(0, 90, 235, 0.33);
bottom: 100%;
}
.HomeBottomMenu ul li ul.dropdowndropdown li:hover{
position: relative;
}
.HomeBottomMenu ul li ul.dropdowndropdown li a{
color:#fff;
font-size:16px;
padding: 10px 10px;
text-align:center;
}
.HomeBottomMenu ul li ul .dropdowndropdown li a :hover{
color: #fff;
}
Got it working with:
<script type="text/javascript">
$(window).scroll(function() {
if ($(this).scrollTop() > 90) {
$('.HomeBottomMenu').fadeOut(100);
} else {
$('.HomeBottomMenu').fadeIn();
}
});
</script>
Many thanks for your help.
by Andy Thomson
I'm having some issues with my navbar menu for my site. I want to have the main menu, a sub menu and a sub menu to that. So 3 levels total.
So far I have gotten the 2 levels to work, but I cannot get the 3rd level to go under the 2nd with z-indexing. Currently they are only on the same index it appears.
Anything I've tried messes up with the jQuery script I did for displaying the select instead of the menu when on small screens.
So how can I do this?
Fiddle (Go Products > Oticon).
HTML
<header>
<select class="menu_mobile_top">
<option>Home</option>
<option>Services</option>
<option>Products</option>
<option>Shop</option>
<option>Prices</option>
<option>About</option>
<option>Contact</option>
</select>
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services
<ul class="subnav">
<li role="presentation">Service 1
<li role="presentation">Service 2
<li role="presentation">Service 3
</ul>
</li>
<li role="presentation">Products
<ul class="subnav">
<li role="presentation">Phonak</li>
<li role="presentation">ReSound</li>
<li role="presentation">Siemens</li>
<li role="presentation">Starkey</li>
<li role="presentation">Widex</li>
<li role="presentation">Oticon
<ul class="subnavoptions">
<li role="presentation">Test1</li>
<li role="presentation">Test 2</li>
</ul>
</li>
<li role="presentation">Unitron</li>
<li role="presentation">Bernafon</li>
</ul>
</li>
<li role="presentation">Shop</li>
<li role="presentation">Prices</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
</header>
CSS
body {
font-size: 0;
text-align: center;
background-image: url('../images/bg.png');
background-repeat: repeat;
font-family: 'Montserrat', sans-serif;
}
header {
width: 100%;
height: 50px;
background: #304770;
z-index: 10;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 34pt;
}
a {
text-decoration: none;
color: inherit;
}
nav {
position: relative;
width: 100%;
z-index: 10;
}
a:hover {
text-decoration: none;
color: inherit;
}
::-webkit-input-placeholder {
color: #99C2EC;
}
:-moz-placeholder { /* Firefox 18- */
color: #99C2EC;
}
::-moz-placeholder { /* Firefox 19+ */
color: #99C2EC;
}
:-ms-input-placeholder {
color: #99C2EC;
}
.bodyframe {
display: inline-block;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}
.div_container {
max-width: 1460px;
width: 100%;
display: inline-block;
margin: 0 auto;
}
.logo-div {
padding: 15px 0 10px;
}
.logo-div div {
display: inline-block;
width: 50%;
font-size: 14px;
color: #304770;
}
.center {
margin: 0 auto;
}
.nav-offset {
display: inline-block;
}
.nav {
height: 50px;
display: block;
position: relative;
list-style: none;
background: #304770;
}
.nav li {
display: inline-block;
background-color: #304770;
margin: 0 5px;
position: static;
}
.nav li a {
padding: 12px 15px;
font-size: 18px;
color: #EFEFEF;
display: block;
}
.nav li.active a {
color: orange;
}
.nav > li.active > a:before {
width: 100%;
}
.nav li:hover > a {
background-color: #304770;
color: orange;
transition: color 0.25s;
}
.nav > li > a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background-color: orange;
-webkit-transition: width 0.2s;
-moz-transition: width 0.2s;
-o-transition: width 0.2s;
transition: width 0.2s;
}
.nav > li:nth-last-of-type(1) > a:after {
display: none;
}
.nav li a:hover:before {
width: 100%;
}
.nav > li > a:after {
content: "";
display: block;
position: absolute;
right: -8px;
top: 21px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
.nav li:hover .subnav {
top: 49px;
}
.subnav {
border-bottom: 1px solid #304770;
width: 100%;
list-style-type: none;
display: block;
position: absolute;
top: 12px;
z-index: -1;
left: 0;
margin: 0;
padding: 0;
background-color: #ccc;
transition: top 0.2s;
-webkit-transition: top 0.2s;
-moz-transition: top 0.2s;
-o-transition: top 0.2s;
-webkit-transition-delay: 0.05s;
-moz-transition-delay: 0.05s;
-o-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.subnav > li {
display: inline-block;
background-color: #ccc;
margin: 0;
padding: 0 5px;
}
.subnav li a {
padding: 8px 10px;
font-size: 14px;
color: #304770;
display: block;
}
.subnav li:hover .subnavoptions {
top: 36px;
}
.subnavoptions {
border-bottom: 1px solid #304770;
width: 100%;
list-style-type: none;
display: block;
position: absolute;
top: 0px;
z-index: -2;
left: 0;
margin: 0;
padding: 0;
background-color: #EFEFEF;
transition: top 0.2s;
-webkit-transition: top 0.2s;
-moz-transition: top 0.2s;
-o-transition: top 0.2s;
-webkit-transition-delay: 0.05s;
-moz-transition-delay: 0.05s;
-o-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.subnavoptions li {
display: inline-block;
background-color: #ccc;
margin: 0 5px;
}
.subnavoptions li a {
padding: 8px 10px;
font-size: 14px;
color: #304770;
display: block;
}
.menu_mobile_top {
display: none;
position: relative;
font-size: 16px;
top: 5px;
background-color: #2A333F;
border: 1px solid transparent;
color: #EFEFEF;
width: 250px;
margin: 5px 0;
padding: 3px;
}
.menu_mobile_top:focus, option:focus {
outline: none !important;
border-color: orange;
}
I don't see the styles defined for third level menu. Add the following and try.
.subnavoptions li a li{
top:50px;
}
I'd like my Menu to be initially hidden on load and then clicking the text Menu reveals the Menu. Currently, the Menu is visible always. Why is this?
Demo: http://jsfiddle.net/eoxug3cz/
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
var menu = $(this).next('ul#menu-header');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
nav.columns ul {
padding-left: 0px;
}
nav.primary {
padding-top:0;
text-align:left;
float:left;
margin-top:0;
}
nav.primary > ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
nav.primary > ul > li > ul {
width: 100%;
display: block;
}
nav.primary.align-right ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li {
width: 100%;
display: block;
}
nav.primary.align-right ul ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li > a {
width: 100%;
display: block;
}
nav.primary ul li ul li a {
width: 100%;
}
nav.primary.align-center > ul {
text-align: left;
}
nav.primary.align-center > ul > li {
display: block;
}
nav.primary > ul.open {
max-height: 1000px;
border-top: 1px solid rgba(110, 110, 110, 0.25);
}
nav.primary ul {
width: 100%;
}
nav.primary ul > li {
float: none;
width: 100%;
}
nav.primary ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 12px 20px;
}
nav.primary ul > li:after {
display: none;
}
nav.primary ul li.has-sub > a:after,
nav.primary ul li.has-sub > a:before,
nav.primary ul li ul li.has-sub:after,
nav.primary ul li ul li.has-sub:before {
display: none;
}
nav.primary ul li ul,
nav.primary ul li ul li ul,
nav.primary ul li ul li:hover > ul,
nav.primary.align-right ul li ul,
nav.primary.align-right ul li ul li ul,
nav.primary.align-right ul li ul li:hover > ul {
left: 0;
position: relative;
right: auto;
}
nav.primary ul li ul li,
nav.primary ul li:hover > ul > li {
max-height: 999px;
position: relative;
background: none;
}
nav.primary ul li ul li a {
padding: 0px 20px 0px 35px;
}
nav.primary ul li ul ul li a {
padding: 0px 20px 0px 50px;
}
nav.primary ul li ul li:hover > a {
color: #000000;
}
nav.primary #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #111;
cursor: pointer;
}
nav.primary #menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
nav.primary #menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
#media screen and (max-width: 480px) {
.sticky-header {
padding-top:0px;
position:absolute;
}
nav.primary #menu-button {
text-transform:lowercase;
padding: 30px 20px 10px 20px;
}
footer ul li {
border: 0;
display: block;
width: 100%;
padding: 0 20px!important;
}
nav.primary #menu-button:after,
nav.primary #menu-button:before {
display:none;
}
.primary-item:hover .sub-menu, .primary-item .sub-menu {
margin:0;
}
.selected {
background:#748d1b;
color:#fff!important;
}
li.primary-item {
background:#ddd;
padding-top:0;
padding-bottom:0;
border-bottom:2px solid #ccc;
}
li.primary-item a {
display:block;
}
#menu-button {
margin-top: 20px;
}
nav.primary > ul {
margin-top:10px;
}
nav.primary #menu-button {
padding: 10px 20px 10px 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<nav class="primary menu right">
<div class="menu-header-container">
<ul id="menu-header" class="menu menu inline naked horizontal bold">
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 primary-item">About</li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78 primary-item">Team</li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77 primary-item">Work</li>
</ul>
</div>
</nav>
Thank you.
There is a problem with your css. Use nav.primary > div > ul instead of nav.primary > ul. Use > only for immediate children.
You can use JQuery toggle - JQuery toggle
JSFiddle example:
A working toggle exaple
JS
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
var menuItems = $(".menu-header-container");
menuItems.toggle();
});
CSS
.menu-header-container {
display:none;
}
If I understand correct :)
hope it's what you want
example
js
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
if(!$(".menu-header-container").hasClass("opened")) {
$(".menu-header-container").show();
$(".menu-header-container").addClass("opened");
}else {
$(".menu-header-container").hide();
$(".menu-header-container").removeClass("opened");
}
});
nav.columns ul {
padding-left: 0px;
}
nav.primary {
padding-top:0;
text-align:left;
float:left;
margin-top:0;
}
nav.primary > ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
nav.primary > ul > li > ul {
width: 100%;
display: block;
}
nav.primary.align-right ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li {
width: 100%;
display: block;
}
nav.primary.align-right ul ul li a {
text-align: left;
}
nav.primary > ul > li > ul > li > a {
width: 100%;
display: block;
}
nav.primary ul li ul li a {
width: 100%;
}
nav.primary.align-center > ul {
text-align: left;
}
nav.primary.align-center > ul > li {
display: block;
}
nav.primary > ul.open {
max-height: 1000px;
border-top: 1px solid rgba(110, 110, 110, 0.25);
}
nav.primary ul {
width: 100%;
}
nav.primary ul > li {
float: none;
width: 100%;
}
nav.primary ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 12px 20px;
}
nav.primary ul > li:after {
display: none;
}
nav.primary ul li.has-sub > a:after,
nav.primary ul li.has-sub > a:before,
nav.primary ul li ul li.has-sub:after,
nav.primary ul li ul li.has-sub:before {
display: none;
}
nav.primary ul li ul,
nav.primary ul li ul li ul,
nav.primary ul li ul li:hover > ul,
nav.primary.align-right ul li ul,
nav.primary.align-right ul li ul li ul,
nav.primary.align-right ul li ul li:hover > ul {
left: 0;
position: relative;
right: auto;
}
nav.primary ul li ul li,
nav.primary ul li:hover > ul > li {
max-height: 999px;
position: relative;
background: none;
}
nav.primary ul li ul li a {
padding: 0px 20px 0px 35px;
}
nav.primary ul li ul ul li a {
padding: 0px 20px 0px 50px;
}
nav.primary ul li ul li:hover > a {
color: #000000;
}
nav.primary #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #111;
cursor: pointer;
}
nav.primary #menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
nav.primary #menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
#media screen and (max-width: 480px) {
.sticky-header {
padding-top:0px;
position:absolute;
}
nav.primary #menu-button {
text-transform:lowercase;
padding: 30px 20px 10px 20px;
}
footer ul li {
border: 0;
display: block;
width: 100%;
padding: 0 20px!important;
}
nav.primary #menu-button:after,
nav.primary #menu-button:before {
display:none;
}
.primary-item:hover .sub-menu, .primary-item .sub-menu {
margin:0;
}
.selected {
background:#748d1b;
color:#fff!important;
}
li.primary-item {
background:#ddd;
padding-top:0;
padding-bottom:0;
border-bottom:2px solid #ccc;
}
li.primary-item a {
display:block;
}
#menu-button {
margin-top: 20px;
}
nav.primary > ul {
margin-top:10px;
}
nav.primary #menu-button {
padding: 10px 20px 10px 20px;
}
}
div.menu-header-container{
display:none;
}
div.menu-header-container.open{
display:block;
}
<nav class="primary menu right">
<div class="menu-header-container">
<ul id="menu-header" class="menu menu inline naked horizontal bold">
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 primary-item">About</li>
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78 primary-item">Team</li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77 primary-item">Work</li>
</ul>
</div>
</nav>
$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
var menu = $(this).next('div.menu-header-container');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
see demo
When I go to a sub menu on my Parent Link when I try and go to the grand child link the menu goes away to quick and does not allow me some times to click on the grand child link.
How can I make it so that can stay open until I click on a sub menu link or grand child link.
Codepen Example Here: http://codepen.io/riwakawebsitedesigns/pen/PwaemX
a.menu-link {
float: right;
display: block;
padding: 1em;
}
.menu, .menu > ul ul {
clear: both;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.js .menu, .js .menu > ul ul {
overflow: hidden;
max-height: 0;
background: rgba(0,0,0,0.1);
}
.menu.active, .js .menu > ul ul.active {
max-height: 55em;
}
.menu > ul {
border-top: 1px solid #808080;
}
.menu li a {
color: #000;
display: block;
padding: 0.8em;
border-bottom: 1px solid #808080;
position: relative;
}
.menu li.has-subnav > a:after {
content: '+';
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.25em 0.5em;
}
.menu li.has-subnav > a.active:after {
content: "-";
}
/* Start Mobile */
#media screen and (min-width: 48.25em) {
.pattern {
overflow: visible;
}
a.menu-link {
display: none;
}
.js .menu, .js .menu > ul ul {
max-height: none;
overflow: visible;
background: none;
}
.js .menu > ul ul {
background: #808080;
display: none;
}
.js .menu > ul li:hover > ul {
display: block;
}
.menu ul {
margin: 0 0 0 -0.25em;
border: 0;
}
.menu li a {
border: 0;
}
.menu li.has-subnav > a {
padding-right: 2em;
}
.menu li.has-subnav > a:after {
content: ">";
font-size: 1em;
padding: 0.8em 0.5em;
}
.menu .level-1 > li.has-subnav > a:after {
content: "▼";
}
.menu > ul li {
margin: 0 0.25em;
}
.menu > ul > li {
display: inline-block;
position: relative;
}
.menu > ul ul {
position: absolute;
top: 0;
left: 12em;
width: 12em;
}
.menu > ul ul li {
position: relative;
}
.menu > ul ul.level-2 {
top: 3em;
left: 0;
}
}
/* End Mobile */
This style causes the problem, because it creates a gap between the levels:
.menu > ul li {
margin: 0 0.25em;
}
Change it to this:
.menu > ul li {
padding: 0 0.25em;
}
Updated Codepen
you used left:12emto .menu > ul ul. For this, third ul is going so far. Use maximum 11.5em to .menu > ul ul below the example is ...
.menu > ul ul{
position: absolute;
top: 0;
left: 11.5em;
width: 12em;
}