I am designing a vertical menu for my website and trying to change the background colour of the navigation item when it is clicked and the page loaded using jQuery. It changes the background until the pages is not loaded. When the page is loaded, the background change is not present. I am following this fiddle. I am designing similar to w3school left navigation menu when an item is clicked, it retains the background change for that li/a/navigation item. How can I properly code to keep the background change for that specific link/a navigation item, for the next load? Here is my code.
$('.widget_nav_plus_widget a').click(function(e) {
$('.widget_nav_plus_widget a').removeClass('current_page_item');
$(this).addClass('current_page_item');
});
.widget_nav_plus_widget{
width: 100%;
height: 30em;
border: 1px solid #ccc;
padding: 0;
overflow: scroll;
overflow-x: hidden;
}
.widget_nav_plus_widget ul li {
border-top: 1px solid #ccc;
background-color:#236870;
margin-left: -30px;
margin-right: -30px;
line-height:1.7em;
}
.widget_nav_plus_widget ul li a{
color:white;
text-decoration: none;
display:block;
}
.widget_nav_plus_widget ul li a:hover{
color:white;
display:block;
text-indent: 1em;
background-color:#0034a1;
}
.widget_nav_plus_widget ul ul li{
text-indent: 1em;
background-color: white;
color:black;
margin-top:-10px;
}
.widget_nav_plus_widget ul ul li a{
color:black;
text-decoration: none;
display:block;
}
.widget_nav_plus_widget ul ul li a:hover{
color:white;
display:block;
text-indent: 1em;
background-color:#4ba668;
}
.widget_nav_plus_widget ul ul ul li{
text-indent: 3em;
}
.widget_nav_plus_widget ul ul ul li:hover{
text-indent: 3em;
}
.widget_nav_plus_widget ul ul ul li a:hover{
color:white;
display:block;
text-indent: 3em;
background-color:#4ba668;
}
.current_page_item{
background-color:#4ba668;
color: white;
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside id="nav_plus_widget-2" class="widget inner-padding widget_nav_plus_widget XXsnipcss_extracted_selector_selectionXX">
<div class="menu-cpp-main-menu-duplicate-container">
<ul id="menu-cpp-main-menu-duplicate" class="menu">
<li id="menu-item-2486" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-2486">
<a href="#" tabindex="1" >
Basics
</a>
<ul class="sub-menu">
<li id="menu-item-2463" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2463">
<a href="#cpp-loops" tabindex="1">
C++ Loops
</a>
</li>
<li id="menu-item-2464" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-2464">
<a href="#c-functions" tabindex="1">
C++ Functions
</a>
<ul class="sub-menu">
<li id="menu-item-2465" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2465">
<a href="#cpp-functions-overloading" tabindex="1">
C++ Functions Overloading
</a>
</li>
</ul>
</li>
<li id="menu-item-2466" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2466">
<a href="#cpp-structure" tabindex="1">
C++ Structures
</a>
</li>
<li id="menu-item-2467" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2467">
<a href="#cpp-pointers" tabindex="1">
C++ Pointers
</a>
</li>
</ul>
</li>
<li id="menu-item-2468" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-2468">
<a href="#cpp-object-oriented-programming" tabindex="1">
C++ Object Oriented Programming
</a>
<ul class="sub-menu">
<li id="menu-item-2469" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2469">
<a href="#c-classses-objects" tabindex="1">
C++ Classses and Objects
</a>
</li>
<li id="menu-item-2470" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-2470">
<a href="#cpp-inheritance" tabindex="1">
C++ Inheritance
</a>
</li>
</ul>
</ul>
</div>
</aside>
You can use the Localstorage, I have made some changes in you JS code.
const currentPage = localStorage.getItem("currentPage");
$(`a[href='${currentPage}']`).addClass('current_page_item');
$('.widget_nav_plus_widget a').click(function(e) {
$('.widget_nav_plus_widget a').removeClass('current_page_item');
$(this).addClass('current_page_item');
localStorage.setItem("currentPage", $(this).attr('href'));
});
Related
I have a css menu I would like to make accessible through keyboard interaction. I want to be able to tab through each link including sub menu links.
If the dropdown focus moves on to the next parent link dropdown then the previous dropdown should hide.
Updated Fiddle
HTML
<ul>
<li class="custom-MainMenu-TopNav-li">
<div>
<span>Parent link 1</span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</div>
</div>
</li>
<li class="custom-MainMenu-TopNav-li">
<div>
<span>Parent link 2</span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</div>
</div>
</li>
</ul>
JavaScript
accessibleDropdown();
function accessibleDropdown(){
jQuery('.custom-MainMenu-TopNav-li a').each(function(){
jQuery(this).focus(function(){
jQuery(this).addClass('focused');
var menuParent = jQuery(this).parent().next().find('ul');
jQuery(menuParent).css('display','block');
});
jQuery(this).blur(function(){
jQuery(this).removeClass('focused');
});
});
}
I am not sure what is your desired outcome and need for this result, but hopefully this will help you out.
I had to redo your example due to naming convention and approach, but I assume this is what you wanted...
Here's a demo, just in case...
JSFiddle
HTML
<ul class="navbar">
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
</ul>
CSS
body {
margin: 10px;
}
.navbar,
.navbar .navbar-sub {
list-style: none;
margin: 0;
padding: 0;
}
.navbar > .navbar-item {
float: left;
}
.navbar > .navbar-item:last-child {
margin-right: 0;
}
.navbar > .navbar-item.active > .navbar-sub {
display: block;
}
.navbar > .navbar-item a {
text-decoration: none;
}
.navbar > .navbar-item > a {
background-color: #999;
padding: 10px 20px;
color: #696969;
display: block;
}
.navbar > .navbar-item > a:hover,
.navbar > .navbar-item > a:focus,
.navbar > .navbar-item.active > a {
background-color: #ccc;
}
.navbar .navbar-sub {
display: none;
}
.navbar .navbar-sub > .navbar-sub-item > a {
color: #ccc;
display: block;
padding: 5px 10px;
text-align: center;
background-color: #696969;
}
.navbar .navbar-item.active .navbar-sub-item > a:hover,
.navbar .navbar-item.active .navbar-sub-item > a:focus {
background-color: #999;
}
jQuery
$('.navbar').on('mouseenter focusin', '.navbar-item > a', function () {
$(this)
.parent('.navbar-item')
.addClass('active')
.siblings('.navbar-item')
.removeClass('active')
});
here you go, simple jquery :)
// display drop down box when mouse is over
$(".custom-MainMenu-TopNav-li a").mouseover(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "block");
});
// hide drop down box when mouse leaves
$(".custom-MainMenu-TopNav-li a").mouseleave(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "none");
});
This basically displays/hide each the dropdown when the mouse is over/leaves the parent div.
I don't think it would be a good idea to display the dropbown menu on focus, cause i believe you can only focus on certain elements like inputs.
Hope this helps!
I have modified some code I found to try and achieve a 100% width drop down for my wordpress menu.
My issue is that my wordpres menu has a structure like this with the sub menu ul nested within the list for my nav.
<li>menu-1
<ul class="sub-menu">
<li>sub 1</li>
<li>sub 2</li>
</ul>
</li>
The dropdown will only work if my sub menu is not nested within the top level navigation list like this.
<li>menu-1 </li>
<ul class="sub-menu">
<li>sub 1</li>
<li>sub 2</li>
</ul>
My fiddle of the drop working on menu 1 and not working on menu 2
Please advise how to resolve this, how can i change my wordpress menu structuure or preferably how can i change my script so that the drop down works with the current html structure.
Javascript isn't something I am experienced in, so some clear expertise wold be helpful.
I took the code from your fiddle and inserted it here. The jquery 'next' only works on next sibling. The second menu html structure put the 2nd sub menu outside of the li's so it was not a sibling and was not found to attach slide animation to when triggered.
var stop = true;
var hovered;
var timeout;
$('.menu-item').hover(
function(){
clearTimeout(timeout);
stop = true;
hovered = this;
timeout = setTimeout(function() {
if($(hovered).hasClass('menu-item')){
$('.sub-menu').css({'z-index': 0});
$(hovered).next('.sub-menu').css({'z-index': 5});
hovered = $(hovered).next('.sub-menu').slideDown(350);
timeout = setTimeout(function(){
$('.sub-menu').not($(hovered).next('.sub-menu')).slideUp(350);
},200);
}
else
$('.sub-menu').slideUp(350);
},400);
},
function(e){
stop = false;
clearTimeout(timeout);
setTimeout(function(){
if(!stop)
$('.sub-menu').slideUp(350);
},500);
}
);
$('.sub-menu').hover(
function(){
stop = true;
},
function(){
}
);
$('#menu-main-navigation').hover(
function(){
},
function(){
timeout = setTimeout(function(){
$('.sub-menu').slideUp(350);
},200);
}
);
* {
margin: 0;
padding: 0;
}
#menu-main-navigation {
position: absolute;
display: block;
height: 80px;
width: 100%;
background: orange;
}
#menu-main-navigation li {
list-style-type: none;
text-decoration: none;
vertical-align: middle;
height: 80px;
display: inline-block;
position: relative;
}
#menu-main-navigation .menu-item a {
color: black;
font-size: 18px;
height: 0;
font-family: Arial;
vertical-align: baseline;
position: relative;
display: inline-block;
height: auto;
padding: 29px;
}
#menu-main-navigation .menu-item a:hover {
background: rgba(0, 0, 0, 0.4);
color: #FFF;
transition: all .2s;
}
#menu-main-navigation .menu-item a:hover .arrow.down {
border-top-color: #FFF;
}
.sub-menu:hover {
display: block !important;
width: 100%;
height: auto !important;
position: absolute;
}
.sub-menu:hover {
display: block !important;
width: 100%;
height: auto !important;
position: absolute;
}
.sub-menu {
width: 100%;
height: auto;
background: gray;
display: none;
position: absolute;
}
.sub-menu {
border-bottom: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-main-navigation" class="menu">
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22">menu 1
</li>
<ul class="sub-menu" id="s1">
<li id="menu-item-7267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7267">item 1</li>
<li id="menu-item-7593" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7593">item 2</li>
<li id="menu-item-7267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7267">item 3</li>
<li id="menu-item-7593" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7593">item 2</li>
</ul>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22">menu 2
</li>
<ul class="sub-menu" id="s2">
<li id="menu-item-7267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7267">item 1</li>
<li id="menu-item-7593" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7593">item 2</li>
<li id="menu-item-7267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7267">item 3</li>
<li id="menu-item-7593" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7593">item 2</li>
</ul>
I hate posting questions on here as I like to figure out a solution for myself however I just cannot figure this one out.
I have a navigation menu that is spat out by wordpress which is 3 deep. I am trying to make a big dropdown and I have it functioning fine with just css but now I am looking to animate it and am just having problems.
Here is a jsfiddle: http://jsfiddle.net/yRNQt/
and here is the code:
<div id="mid-nav">
<ul id="midnav">
<ul id="topmenu-{topmenu slug}[-{increment}]" class="topmenu">
<li id="nav-menu-item-62" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item">Home</li>
<li id="nav-menu-item-68" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">Why Renewal
<ul id="testtt" class="sub-menu menu-odd menu-depth-1">
<div id="special"><img src="images/Untitled-3.png" /></div>
<div id="contact"> <img src="images/Untitled-4.png" /></div>
<li id="nav-menu-item-69" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">Fibrex
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-70" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">History of firex</li>
<li id="nav-menu-item-71" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">What is fibrex</li>
</ul>
</li>
<li id="nav-menu-item-72" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page">Green Seal Cert</li>
<li id="nav-menu-item-75" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page">Renewal Warranty</li>
<li id="nav-menu-item-76" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page">What to look for</li>
</ul>
</li>
<li id="nav-menu-item-63" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">About
<ul class="sub-menu menu-odd menu-depth-1">
<div id="special"><img src="images/Untitled-3.png" /></div>
<div id="contact"> <img src="images/Untitled-4.png" /></div>
<li id="nav-menu-item-148" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page">Our Pledge</li>
<li id="nav-menu-item-149" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page">Testimonials</li>
<li id="nav-menu-item-146" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page">Articles</li>
<li id="nav-menu-item-147" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page">Contact us</li>
<li id="nav-menu-item-145" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page">Appointment Calendar</li>
</ul>
</li>
<li id="nav-menu-item-150" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">Windows
<ul class="sub-menu menu-odd menu-depth-1">
<div id="special"><img src="images/Untitled-3.png" /></div>
<div id="contact"> <img src="images/Untitled-4.png" /></div>
<li id="nav-menu-item-151" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">Double Hung
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-152" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Colors</li>
<li id="nav-menu-item-153" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Glass</li>
<li id="nav-menu-item-154" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Grilles</li>
<li id="nav-menu-item-155" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Hardware</li>
<li id="nav-menu-item-156" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Screens</li>
</ul>
</li>
<li id="nav-menu-item-157" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">Gliding
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-158" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Colors</li>
<li id="nav-menu-item-159" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Glass</li>
<li id="nav-menu-item-160" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Grilles</li>
<li id="nav-menu-item-161" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Hardware</li>
<li id="nav-menu-item-162" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Screens</li>
</ul>
</li>
<li id="nav-menu-item-163" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">Casement
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-164" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Colors</li>
<li id="nav-menu-item-165" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Glass</li>
<li id="nav-menu-item-166" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Grilles</li>
<li id="nav-menu-item-167" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Hardware</li>
<li id="nav-menu-item-168" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Screens</li>
</ul>
</li>
<li id="nav-menu-item-169" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">Awning
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-170" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Colors</li>
<li id="nav-menu-item-171" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Glass</li>
<li id="nav-menu-item-172" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Grilles</li>
<li id="nav-menu-item-173" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Hardware</li>
<li id="nav-menu-item-174" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Screens</li>
</ul>
</li>
<li id="nav-menu-item-175" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page">Bay/bow</li>
<li id="nav-menu-item-176" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page">Specialty</li>
</ul>
</li>
<li id="nav-menu-item-66" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">Doors
<ul class="sub-menu menu-odd menu-depth-1">
<div id="special"><img src="images/Untitled-3.png" /></div>
<div id="contact"> <img src="images/Untitled-4.png" /></div>
<li id="nav-menu-item-177" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">Narroline gliding
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-178" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Colors</li>
<li id="nav-menu-item-179" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Grilles</li>
<li id="nav-menu-item-180" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Hardware</li>
<li id="nav-menu-item-181" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Screens</li>
</ul>
</li>
<li id="nav-menu-item-188" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">Frenchwood hinged
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-196" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Colors</li>
<li id="nav-menu-item-195" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Grilles</li>
<li id="nav-menu-item-194" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Hardware</li>
<li id="nav-menu-item-193" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Screens</li>
</ul>
</li>
<li id="nav-menu-item-187" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">Frenchwood gliding
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-192" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Colors</li>
<li id="nav-menu-item-191" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Grilles</li>
<li id="nav-menu-item-190" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Hardware</li>
<li id="nav-menu-item-189" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Screens</li>
</ul>
</li>
<li id="nav-menu-item-186" class="sub-menu-item menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">Perma Shield Gliding
<ul class="sub-menu menu-even sub-sub-menu menu-depth-2">
<li id="nav-menu-item-183" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Colors</li>
<li id="nav-menu-item-182" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Grilles</li>
<li id="nav-menu-item-185" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Hardware</li>
<li id="nav-menu-item-184" class="sub-menu-item sub-sub-menu-item menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page">Screens</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</div>
CSS:
#charset "utf-8";
/* CSS Document */
/*depth 0*/
#mid-nav ul {
text-align: center;
padding-bottom: 0px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
color: white;
width: 100%;
font-size: 18px;
font-weight: normal;
color: #000;
line-height: 18px;/* fixes Firefox 0.9.3 */
}
#mid-nav ul li {
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
}
#mid-nav ul li a {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 16px;
font-weight: normal;
color: #000;
border: none;
}
#mid-nav li:hover a {/*this keeps top menu items colors whilst down in the lower ul */
background-color: #cfcfcf;
/*color: white;*/
}
#mid-nav .active {
border-left: 1px solid #fff;
}
/*depth 1*/
#special {
width: 200px;
background-color: #fff;
height: 220px;
float: left;
margin: 10px;/*padding-top:-40px;*/
}
#contact {
padding-top: 0px;
width: 200px;
background-color: #fff;
height: 220px;
float: right;
margin: 10px;/*padding-top:-40px!important; */
}
#mid-nav ul li ul {
display: none;
}
#mid-nav ul li ul li {
display:inline;
float:left;
width: 200px;
margin-right:100px;
}
#mid-nav ul li ul a{
width:1400px;
background-color:transparent!important;
/*#mid-nav ul li ul a {*/
color:#000;
padding-left: 10px;
text-align: left!important;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
text-decoration: none;
border-right: 1px solid #fff;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 14px;
font-weight: normal;
border: none;
}
#mid-nav ul li:hover > ul {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 40px;
width: 800px;
height: 250px;
/*background-color: #cfcfcf;*/
display: inline;
text-align: left;
}
#mid-nav li li:hover a {/*this keeps level 1 menu items colors whilst down in the lower ul */
background-color: #cfcfcf!important;
}
#mid-nav ul li ul li:hover {
background-color: #cfcfcf!important;
}
/*depth 2*/
#mid-nav ul li ul li ul{
}
#mid-nav ul li ul li:hover > ul {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 175px;
right: 0;
top: 0px;
width: 150px;
height: 245px;
background-color: #cfcfcf;/*!important;*/
display: inline;
text-align: left;
padding-top: 10px;
}
#mid-nav ul li ul li ul li {
background-color:transparent/*!important*/;
width:150px;
}
#mid-nav ul li ul li ul li a {
background-color:transparent/*!important*/;
font-size: 12px;
}
#mid-nav ul li ul li ul li:hover {
background-color:#b4b4b4!important;
color:#fff;
}
#mid-nav ul li ul li ul li:hover > a{
background-color:#b4b4b4!important;
color:#fff;
}
.menu-depth-1{
background: #cfcfcf; /* Old browsers SHADOW AND GRADIENT */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjY2ZjZmNmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NmY2ZjZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(45deg, #cfcfcf 0%, #e2e2e2 50%, #cfcfcf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #cfcfcf), color-stop(50%, #e2e2e2), color-stop(100%, #cfcfcf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #cfcfcf 0%, #e2e2e2 50%, #cfcfcf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #cfcfcf 0%, #e2e2e2 50%, #cfcfcf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #cfcfcf 0%, #e2e2e2 50%, #cfcfcf 100%); /* IE10+ */
background: linear-gradient(45deg, #cfcfcf 0%, #e2e2e2 50%, #cfcfcf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfcfcf', endColorstr='#cfcfcf', GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
-webkit-box-shadow: 8px 8px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 8px 8px 15px 0px rgba(0,0,0,0.75);
box-shadow: 8px 8px 15px 0px rgba(0,0,0,0.75);
}
and my epic failure of an excuse jQuery:
<script type="text/javascript">
$(document).ready(function () {
// $("#nav-menu-item-68").hover(function(){
// console.log($(this));
// $("#testtt").slideDown( 10000,function(){
// alert("The slideDown() method is finished!"); });
// console.log($(this).children('ul'));
// },function(){
// $(this).find('ul').slideUp( "fast" );
//
// });
//cache nav
var nav = $("#mid-nav");
//add indicator and hovers to submenu parents
nav.find("li").each(function () {
if ($(this).find("ul").length > 0) {
$("<span>").text("^").appendTo($(this).children(":first"));
//show subnav on hover
$("#nav-menu-item-68").mouseenter(function () {
$("#testtt").stop(true, true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function () {
$("testtt").stop(true, true).slideUp();
});
}
});
});
</script>
I am starting to think that maybe the problem lies inside of my css (as well as my JS)
Any pushes in the right direction would help (at this point my JS is useless)
Edit:
I forgot to mention all the things that I have tried and the results that they have had...
$(".topmenu").children('li').hover(function(){
$(this).slideDown();
});
This was my first attempt and it does nothing. I have used console logging to make sure that in other attempted that I am selecting the right classes/id's
then next thing I did was similar to above but it would only slide the text and not the entire containing UL.
Have been trying to figure this out for too long now! Ahhhhh!
Thanks
C
I have a menu and a submenu. I got it toggled in Jquery by combining some answers from stackoverflow and from api.jQuery. But now I am really stuck and I cant find a way out to solve it.
Whenever I reach the menu, submenu toggles(Good thing), but whenever I reach for the submenu links it disappears.
And it doesnot work in fiddle because of the styling, thats why I didnt put it there.
HTML
<ul id="menüü">
<li class="menu">
<p>Meist
</p>
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
<p>Seadmed
</p>
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
<div id="submenu"></div>
CSS
.menu {
display: inline;
float:left;
width:180px;
height:50px;
color:#191919;
text-align:center;
background:#990000;
-moz-border-radius-top-left: 50px;
border-top-left-radius: 50px;
position:relative;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:62px;
right:25%;
z-index:300
}
.submenu {
background-color:#cecece;
}
.submenu > li {
list-style-type:none;
background-color:#fff;
color:blue;
cursor:pointer;
}
#submenu {
color:white;
height:40px;
width:900px;
background:#630000;
margin-top:50px;
position:relative;
}
JS
$(document).ready(function () {
$("li.menu").mouseenter(function () {
$(this).find(".submenu").toggle();
});
});
Change mouseenter to mouseover then when you hover a child element it will not close. And use mouseover to show and mouseout to hide.
Example on jsFiddle
$(document).ready(function ()
{
$(".menu").mouseover(function ()
{
$(this).find(".submenu").show();
});
$(".menu").mouseout(function ()
{
$(this).find(".submenu").hide();
});
});
Toggling toggles between show and hide, so the first time the mouseenter event is triggered it will show and the second time it hides. You need to add a conditional statement to make sure it doesn't hide it if the mouse is over it. Better way to do it is to use mouseenter to show and mouseout to hide.
Not a perfect example by any means, but this pure css version should provide a good base to get you started?
http://jsfiddle.net/bNpnZ/2/
<ul class="menu">
<li> Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li> Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
ul {
margin:0;
list-style:none;
}
.menu {
width:100%;
float:left;
background:#eee;
}
.menu > li {
float:left;
margin:0 0 0 10px;
position:relative;
}
.menu > li:first-child {
margin:0;
}
.menu > li > a {
padding:10px 20px;
float:left;
color:#666;
}
.submenu {
position:absolute;
top:-9999em;
left:0;
font-size:14px;
background-color:#ccc;
}
.menu > li:hover .submenu {
top:30px;
}
I have update the jquery and added style for .menu a, also <p> in not required in side the li.
jQuery
$('.menu').hover(
function () {
$(this).children('.submenu').fadeIn('fast');
},
function () {
$(this).children('.submenu').fadeOut();
});
css
.menu a{
display:block;
line-height:50px;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:50px;
right:25%;
z-index:300
}
html
<ul id="menüü">
<li class="menu">
Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
jsFiddle File
Using the following code I could get the ABOUT and FAQ submenus to show up but nothing would appear on mouse hover and I have no idea why. Please help! If there is more code I should show just let me know! Thanks in advance for any help :)
The HTML:
<ul class="navigation">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Location</li>
<li>Gallery Tour</li>
<li>Testimonials</li>
</ul>
</li>
<li>Accomodations</li>
<ul>
<li>Event Space</li>
<li>Guest Rooms</li>
<li>Kitchen and Catering Facility</li>
</ul>
</li>
<li>Activities</li>
<ul>
<li>The Katy Trail</li>
<li>Augusta</li>
<li>St. Louis Attractions</li>
</ul>
<li>Reservations</li>
<ul>
<li>Rates</li>
<li>Contact</li>
<li>Request Info</li>
<li>Event Agreement Form</li>
</ul>
<li>FAQ
<ul>
<li>Additional Info</li>
<li>Catering</li>
</ul>
</ul>
The CSS:
.navigation {margin:0; padding:0;list-style:none; }
.navigation li {
float:left;
width:120px;
position:relative;
}
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#F2861D;
}
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:3px solid #F2861D;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
overflow: visible;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px dashed #6B6B6B;
}
.navigation ul a:hover {
color:#F2861D;
}`
The Javascript:
$(document).ready(function() {
// Navigation function
$('.navigation li').hover(function () {
$('ul', this).fadeIn();
},
function () {$('ul', this).fadeOut();}
);
jsFiddle
The li elements for Accommodations, Activities and Reservations didn't correctly nest the submenu's ul elements. Check out the code in this JS Fiddle for a corrected version:
http://jsfiddle.net/9NdZC/
Here is just the HTML part:
<ul class="navigation">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Location</li>
<li>Gallery Tour</li>
<li>Testimonials</li>
</ul>
</li>
<li>Accomodations
<ul>
<li>Event Space</li>
<li>Guest Rooms</li>
<li>Kitchen and Catering Facility</li>
</ul>
</li>
<li>Activities
<ul>
<li>The Katy Trail</li>
<li>Augusta</li>
<li>St. Louis Attractions</li>
</ul>
</li>
<li>Reservations
<ul>
<li>Rates</li>
<li>Contact</li>
<li>Request Info</li>
<li>Event Agreement Form</li>
</ul>
</li>
<li>FAQ
<ul>
<li>Additional Info</li>
<li>Catering</li>
</ul>
</li>
</ul>