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>
Related
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'));
});
I'm trying to slide each ul > li down when hovering over it's parent li and then slide it back up on the mouseleave event
The code works great on the first mouseenter and mouseleave. But when I hover my mouse back over a panel that has already fired once, the mouseenter function doesn't fire a second time I'm know I'm close but not sure where I went wrong
Fiddle away here:
http://jsfiddle.net/k2b5a62j/1/
I've tried the fiddle with hover as well with no luck
**I've updated the fiddle a bit for simplicity
I am pretty sure what you mean is, you want, on hover, to be able to view all the items rather than them immediately disappearing. I slightly changed your DOM and jQuery selectors to achieve this:
//Per comment of the original poster:
$('ul li div').on("mouseenter", function(event){
$(this).find('ul').slideDown('fast', function(){
// Done.
});
event.preventDefault();
}).on("mouseleave",function (event) {
$(this).find('ul').slideUp('fast', function(){
// Done.
});
event.preventDefault();
});
ul li ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li><div>
Product1
<ul id="test">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div></li>
<li><div>Product2
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
<li><div>Product3
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
</ul>
</div>
Reply to the asker's comment as to have each li display one at a time:
jQuery(document).ready(function($) {
$('.inner-link').hide();
$('.link').mouseenter(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideDown(500);
});
});
$('.link').mouseleave(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideUp(500);
});
});
});
.link {
position: relative;
right: 0%;
width: 8%;
list-style-type: none;
vertical-align: middle;
display: table-cell;
outline: none;
height: 100%;
text-align: center;
margin: 0px 11px;
}
.inner-list {
position: absolute;
width: 100%;
margin: 0px auto;
left: 0px;
}
.inner-link {
list-style-type: none;
width: 100%;
margin: 0px 0px 0px -40px;
border-bottom: 1px black solid;
}
.inner-link:first-child {
padding-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-container">
<li class="link">Panel 1
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 2
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 3
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 4
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
</ul>
Hi I have a situation where I am using jquery slim scroll plugin with jquery sortable. The problem is when I drag the items from one list items to other the scroll bar on the right doesn't move along with , So if I have to drop the list to the last list items area I cannot go there unless I use mousewheel.
So how can i bind scrollbar position as I drag the item from one list area to other. Below is the code-
$(function() {
$("ul.droptrue").sortable({
revert: 'invalid',
connectWith: "ul"
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
$('.ScrollableAreanew ').slimScroll({
height: '400',
width: '100%',
alwaysVisible: true,
color: 'rgb(15,170,255)',
railOpacity: 1,
opacity: 1,
size: '5px',
position: 'right',
allowPageScroll: false,
});
});
#sortable1,
#sortable2,
#sortable3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 100%;
margin-bottom: 10px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
margin: 5px;
padding: 5px;
font-size: 1.2em;
width: 100%;
border: 1px solid #000;
margin-bottom: 5px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script>
<div class="ScrollableAreanew">
<ul id="sortable1" class="droptrue">
<li class="ui-state-default">Can be dropped..</li>
<li class="ui-state-default">..on an empty list</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="droptrue">
<li class="ui-state-highlight">Cannot be dropped..</li>
<li class="ui-state-highlight">..on an empty list</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
<ul id="sortable3" class="droptrue">
<li class="ui-state-highlight">Cannot be dropped..</li>
<li class="ui-state-highlight">..on an empty list</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</div>
Here what we need to do is
Get position of mouse - Y coordinate as we move inside the .ScrollableAreanew
Whenever a sortable item is moved (use sort event), move the slimScroll to the scrolled position using scrollTo.
sort event is triggered during sorting. See here for more details
$(function() {
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY; // Get position of mouse - Y coordinate
});
$("ul.droptrue").sortable({
sort : function(event, ui) { // This event is triggered during sorting.
var scrollTo_int = currentMousePos.y + 'px';
$(".ScrollableAreanew").slimScroll({
scrollTo : scrollTo_int, // scroll to mouse position
height: '400',
width: '100%',
alwaysVisible: true,
color: 'rgb(15,170,255)',
railOpacity: 1,
opacity: 1,
size: '5px',
position: 'right',
allowPageScroll: false
});
},
revert: 'invalid',
connectWith: "ul"
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
$('.ScrollableAreanew ').slimScroll({
height: '400',
width: '100%',
alwaysVisible: true,
color: 'rgb(15,170,255)',
railOpacity: 1,
opacity: 1,
size: '5px',
position: 'right',
allowPageScroll: false
});
});
#sortable1,
#sortable2,
#sortable3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 100%;
margin-bottom: 10px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
margin: 5px;
padding: 5px;
font-size: 1.2em;
width: 100%;
border: 1px solid #000;
margin-bottom: 5px;
}
.justAddingHeight
{
height:100px !important;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script>
<div class="justAddingHeight"></div>
<div class="ScrollableAreanew">
<ul id="sortable1" class="droptrue droppable">
<li class="ui-state-default draggable">Can be dropped..</li>
<li class="ui-state-default draggable">..on an empty list</li>
<li class="ui-state-default draggable">Item 3</li>
<li class="ui-state-default draggable">Item 4</li>
<li class="ui-state-default draggable">Item 5</li>
</ul>
<ul id="sortable2" class="droptrue droppable">
<li class="ui-state-highlight draggable">Cannot be dropped..</li>
<li class="ui-state-highlight draggable">..on an empty list</li>
<li class="ui-state-highlight draggable">Item 3</li>
<li class="ui-state-highlight draggable">Item 4</li>
<li class="ui-state-highlight draggable">Item 5</li>
</ul>
<ul id="sortable3" class="droptrue droppable">
<li class="ui-state-highlight draggable">Cannot be dropped..</li>
<li class="ui-state-highlight draggable">..on an empty list</li>
<li class="ui-state-highlight draggable">Item 3</li>
<li class="ui-state-highlight draggable">Item 4</li>
<li class="ui-state-highlight draggable">Item 5</li>
</ul>
</div>
EDIT
Instead of getting mouse position inside the .ScrollableAreanew div, get the position of mouse in the document.
Note: Added div with class justAddingHeight (having height of 100px) as a POC.
Hope this solves your problem.
I have recently started designing a mobile website using media queries and browsing a few websites to see what they've done it seems accordion navigation menus are the way to go, scaling up to a normal horizontal navigation bar. I have browsed and browsed the internet looking for an accordion walkthrough but I can not seem to find one that explains it well enough.
A good example is the one from microsoft on their website. Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
padding: 20px 0px 20px 0px;
border-top: 2px solid #abc;
}
nav ul ul {
height: 0;
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
</style>
</head>
<body>
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</html>
These navigation bars have submenus [nav ul ul] that slide out when nav ul li is clicked. I was hoping somebody could point me in the right direction as to how I go about making a slide down sub menu on click, or help me with the code.
I thought there may have been a basic one people could start using and edit to customise themselves.
Thanks for any help.
There is no need for Javascript - you may use a Checkbox instead.
Check out: http://codepen.io/TimPietrusky/pen/CLIsl
If you still want to do it with Javascript go for something like this:
// asuming, that nav-items that should trigger slidedown will have "#" as href
// while actual nav-items will have URLs
$('nav li a[href="#"]').on('click', function (e) {
// prevent Click from redirecting
e.preventDefault();
// get the next ul after the li a clicked
if ($(this).hasClass('visible')) {
$(this).next('ul').slideUp(200).removeClass("visible");
} $(this).next('ul').slideDown(200).addClass("visible");
});
CSS animation for height form 0 to auto wont work. See: How can I transition height: 0; to height: auto; using CSS?
Check this out
https://jsfiddle.net/nqamazgz/3/
Unfortunately CSS does not have any click events, instead you will need to use JavaScript and/or jQuery. I used jQuery
All i did was add a class hide-nav to your nav with display none. And a button to click of course.
And a bit of jQuery
$(document).ready(function() {
$('#topMenu-btn').on('click', function() {
$('nav').slideToggle();
});
});
Try something like this:
http://jsfiddle.net/kb668aag/
You'll need to modify the code a bit.
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
CSS
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
padding: 20px 40px;
display: block;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
border-top: 2px solid #abc;
}
nav ul ul {
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
ul.sub-menu{
display: none;
}
.has_children > a{
color: #ddd;
}
JS:
var $menu_with_children = $('.has_children > a');
$menu_with_children.on('click', function(e){
e.preventDefault();
var $this = $(this);
if (!$this.parent().find('> .sub-menu').hasClass('visible')) {
$this.parent().find('> .sub-menu').addClass('visible').slideDown('slow');
} else{
$this.parent().find('> .sub-menu').removeClass('visible').slideUp('slow');
}
});
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