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
Related
I'd like to open one node on click, and remove is-active class from others items.
at this point there is a lot of space taken up after opening a few menu items. I would like only one node to be open at a time. So it needs the is-active class to be removed from the previous sub-item after switching to another sub-item
The red square opens the item.. - Could you please help me?
const nav = document.querySelector('.menu-primary');
// const navElement = nav.querySelectorAll('.menu-item-has-children');
const navElementIcon = nav.querySelectorAll('.js-navigation-arrow');
// console.log(navElesment);
navElementIcon.forEach(function (element) {
element.addEventListener("click", function() {
let elementParent = element.closest('.menu-item-has-children');
if (elementParent.classList.contains('is-active')) {
elementParent.classList.remove('is-active');
} else {
elementParent.classList.add('is-active');
}
});
});
.menu-primary a {
margin-right: 30px !important;
}
.menu-primary > li {
position: relative;
text-align: left;
}
.menu-primary > li:first-child .menu-item a {
margin-top: 0;
}
.menu-primary > li:nth-child(4) {
margin-top: 0;
}
.menu-primary > li > .menu-item-icon {
top: 7px;
}
.menu-primary > li .sub-menu {
position: static;
transform: none;
display: none;
opacity: 1;
visibility: visible;
}
.menu-primary > li .sub-menu > .sub-menu__list > li > .sub-menu__child-list {
padding-left: 15px;
}
.menu-primary > li > a {
display: inline-block;
font-size: 16px;
margin: 8px 0;
}
.menu-primary a {
display: inline-block;
font-size: 14px;
}
.menu-item-icon {
display: flex;
width: 15px;
height: 15px;
justify-content: center;
align-items: center;
position: absolute;
top: 7px;
right: 0;
font-size: 8px;
color: #fff;
transform: rotate(180deg);
transition: 0.2s;
background: red;
z-index: 10;
}
.menu-item.is-active > .sub-menu {
display: block;
}
.menu-item {
position: relative;
margin: 5px 0;
}
.sub-menu__child-list {
display: none;
padding-left: 15px;
}
.menu-item.is-active > .sub-menu__child-list {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu-primary">
<li id="menu-item-58084"
class="col-1 menu-icon menu-icon-people menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-58084">
About Us
<div class="sub-menu">
<ul class="sub-menu__list">
<li id="menu-item-58085"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58085">Child</li>
<li id="menu-item-58091"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-58091">
Nasze gabinety
<ul class="sub-menu__child-list">
<li id="menu-item-58086"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58086">Gabinet Gocław</li>
<li id="menu-item-58087"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58087">Gabinet Szczecin</li>
<li id="menu-item-58088"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58088">Gabinet Ursynów</li>
<li id="menu-item-58089"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58089">Gabinet Warszawa Centrum</li>
<li id="menu-item-58090"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58090">Gabinet Wilanów</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-58092"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58092"><a href="#">Praca
dla psychoterapeuty</a></li>
<li id="menu-item-58093"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58093">Współpracują z nami</li>
</ul>
</div><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-59230"
class="col-3 menu-icon menu-icon-gender menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59230">
Contact
<div class="sub-menu">
<ul class="sub-menu__list">
<li id="menu-item-59231"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59231">
Sub item 1
<ul class="sub-menu__child-list">
<li id="menu-item-59280"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59280">Bezpłodność
</li>
<li id="menu-item-59233"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59233">Depresja poporodowa</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-59232"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59232">
Trudności w relacji z innymi
<ul class="sub-menu__child-list">
<li id="menu-item-59234"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59234">Wypalenie zawodowe</li>
<li id="menu-item-59235"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59235">Nieśmiałość</li>
<li id="menu-item-59236"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59236">Przemoc w relacji</li>
<li id="menu-item-59237"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59237">Współuzależnienie</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-59238"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59238">
Trudności w relacji ze sobą
<ul class="sub-menu__child-list">
<li id="menu-item-59242"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59242">Niska samoocena
</li>
<li id="menu-item-59243"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59243">Prokrastynacja</li>
<li id="menu-item-59244"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59244">Depresja</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-59247"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59247">
Dolegliwości psychiczne a zaburzenia hormonalne
<ul class="sub-menu__child-list">
<li id="menu-item-59249"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59249"><a
href="#pms-jak-poradzic-sobie-z-zespolem-napiecia-przedmiesiaczkowego/">PMS
napięcie przedmiesiączkowe</a></li>
<li id="menu-item-59248"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59248">Menopauza
</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-59252"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-59252">
Zaburzenia odżywiania
<ul class="sub-menu__child-list">
<li id="menu-item-59253"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59253">Leczenie ortoreksji</li>
<li id="menu-item-59254"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59254">Leczenie anoreksji</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-59260"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59260">
Częste uzależnienia u kobiet
<ul class="sub-menu__child-list">
<li id="menu-item-59261"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59261">Uzależnienie od zakupów
</li>
<li id="menu-item-59262"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59262">Uzależnienie od pracy</li>
<li id="menu-item-59263"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59263">Uzależnienie od seksu</li>
<li id="menu-item-59264"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59264">Uzależnienie od leków</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
</ul>
</div><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
</ul>
I've made two different approaches you can follow, they are described within the code below. I hope I was helpful.
const nav = document.querySelector('.menu-primary');
// const navElement = nav.querySelectorAll('.menu-item-has-children');
const navElementIcon = nav.querySelectorAll('.js-navigation-arrow');
// console.log(navElesment);
navElementIcon.forEach(function (element) {
element.addEventListener("click", function() {
let elementParent = element.closest('.menu-item-has-children');
if (elementParent.classList.contains('is-active')) {
elementParent.classList.remove('is-active');
} else {
/*
If you just want to close active items in the same
level that the one you're opening, use the command below.
Example: If you click About Us -> Nasze gabinety ->
Contact -> About Us, the Nasze gabinety is going to
be opened yet.
*/
// Array.from(elementParent.parentElement.children)
// .forEach((menuItem) => menuItem.classList.remove('is-active'));
/*
If you want to close all active items, use the command below.
Example: If you click About Us -> Nasze gabinety ->
Contact -> About Us, the Nasze gabinety is going to
be closed.
*/
Array.from(elementParent.parentElement.querySelectorAll('.is-active'))
.forEach((menuItem) => menuItem.classList.remove('is-active'));
elementParent.classList.add('is-active');
}
});
});
.menu-primary a {
margin-right: 30px !important;
}
.menu-primary > li {
position: relative;
text-align: left;
}
.menu-primary > li:first-child .menu-item a {
margin-top: 0;
}
.menu-primary > li:nth-child(4) {
margin-top: 0;
}
.menu-primary > li > .menu-item-icon {
top: 7px;
}
.menu-primary > li .sub-menu {
position: static;
transform: none;
display: none;
opacity: 1;
visibility: visible;
}
.menu-primary > li .sub-menu > .sub-menu__list > li > .sub-menu__child-list {
padding-left: 15px;
}
.menu-primary > li > a {
display: inline-block;
font-size: 16px;
margin: 8px 0;
}
.menu-primary a {
display: inline-block;
font-size: 14px;
}
.menu-item-icon {
display: flex;
width: 15px;
height: 15px;
justify-content: center;
align-items: center;
position: absolute;
top: 7px;
right: 0;
font-size: 8px;
color: #fff;
transform: rotate(180deg);
transition: 0.2s;
background: red;
z-index: 10;
}
.menu-item.is-active > .sub-menu {
display: block;
}
.menu-item {
position: relative;
margin: 5px 0;
}
.sub-menu__child-list {
display: none;
padding-left: 15px;
}
.menu-item.is-active > .sub-menu__child-list {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu-primary">
<li id="menu-item-58084"
class="col-1 menu-icon menu-icon-people menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-58084">
About Us
<div class="sub-menu">
<ul class="sub-menu__list">
<li id="menu-item-58085"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58085">Child</li>
<li id="menu-item-58091"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-58091">
Nasze gabinety
<ul class="sub-menu__child-list">
<li id="menu-item-58086"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58086">Gabinet Gocław</li>
<li id="menu-item-58087"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58087">Gabinet Szczecin</li>
<li id="menu-item-58088"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58088">Gabinet Ursynów</li>
<li id="menu-item-58089"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58089">Gabinet Warszawa Centrum</li>
<li id="menu-item-58090"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58090">Gabinet Wilanów</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-58092"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58092"><a href="#">Praca
dla psychoterapeuty</a></li>
<li id="menu-item-58093"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58093">Współpracują z nami</li>
</ul>
</div><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-59230"
class="col-3 menu-icon menu-icon-gender menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59230">
Contact
<div class="sub-menu">
<ul class="sub-menu__list">
<li id="menu-item-59231"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59231">
Sub item 1
<ul class="sub-menu__child-list">
<li id="menu-item-59280"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59280">Bezpłodność
</li>
<li id="menu-item-59233"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59233">Depresja poporodowa</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-59232"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59232">
Trudności w relacji z innymi
<ul class="sub-menu__child-list">
<li id="menu-item-59234"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59234">Wypalenie zawodowe</li>
<li id="menu-item-59235"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59235">Nieśmiałość</li>
<li id="menu-item-59236"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59236">Przemoc w relacji</li>
<li id="menu-item-59237"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59237">Współuzależnienie</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-59238"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59238">
Trudności w relacji ze sobą
<ul class="sub-menu__child-list">
<li id="menu-item-59242"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59242">Niska samoocena
</li>
<li id="menu-item-59243"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59243">Prokrastynacja</li>
<li id="menu-item-59244"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59244">Depresja</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-59247"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59247">
Dolegliwości psychiczne a zaburzenia hormonalne
<ul class="sub-menu__child-list">
<li id="menu-item-59249"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59249"><a
href="#pms-jak-poradzic-sobie-z-zespolem-napiecia-przedmiesiaczkowego/">PMS
napięcie przedmiesiączkowe</a></li>
<li id="menu-item-59248"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59248">Menopauza
</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-59252"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-59252">
Zaburzenia odżywiania
<ul class="sub-menu__child-list">
<li id="menu-item-59253"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59253">Leczenie ortoreksji</li>
<li id="menu-item-59254"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59254">Leczenie anoreksji</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
<li id="menu-item-59260"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-59260">
Częste uzależnienia u kobiet
<ul class="sub-menu__child-list">
<li id="menu-item-59261"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59261">Uzależnienie od zakupów
</li>
<li id="menu-item-59262"
class="menu-item menu-item-type-post_type menu-item-object-post menu-item-59262">Uzależnienie od pracy</li>
<li id="menu-item-59263"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59263">Uzależnienie od seksu</li>
<li id="menu-item-59264"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59264">Uzależnienie od leków</li>
</ul><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
</ul>
</div><span class="icon icon-arrow menu-item-icon js-navigation-arrow"></span>
</li>
</ul>
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>
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>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
No need to explain just look at
http://blog.appyourself.com
try to navigate on the header menu and when you fly over the connexion bouton a little white arrow appear i dont know why
See here:
Edit : Here is the code
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://www.appyourself.com/" class="navbar-brand">
<img src="http://www.appyourself.com/wp-content/uploads/2013/10/LOGO-APPYOURSELF.png"></a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<div class="menu-menu-principal-container"><ul id="menu-menu-principal" class="nav navbar-nav navbar-right"><li id="menu-item-242" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Suite marketing</a>
<ul class="dropdown-menu">
<li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-object-page">Sites & applications</li> <li id="menu-item-244" class="menu-item menu-item-type-post_type menu-item-object-page">CRM</li><!--.dropdown-->
</ul>
</li><li id="menu-item-276" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Secteurs</a>
<ul class="dropdown-menu">
<li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page">Hôtel</li> <li id="menu-item-388" class="menu-item menu-item-type-post_type menu-item-object-page">Camping</li> <li id="menu-item-462" class="menu-item menu-item-type-post_type menu-item-object-page">Bed & Breakfast</li> <li id="menu-item-739" class="menu-item menu-item-type-post_type menu-item-object-page">Restaurant & Bar</li> <li id="menu-item-692" class="menu-item menu-item-type-post_type menu-item-object-page">Beauty & Spa</li> <li id="menu-item-648" class="menu-item menu-item-type-post_type menu-item-object-page">Commerces & Services</li> <li id="menu-item-649" class="menu-item menu-item-type-post_type menu-item-object-page">Agence Immobilière</li> <li id="menu-item-650" class="menu-item menu-item-type-post_type menu-item-object-page">Auto-Moto</li> <li id="menu-item-647" class="menu-item menu-item-type-post_type menu-item-object-page">Agence de voyage</li><!--.dropdown-->
</ul>
</li><li id="menu-item-1301" class="menu-item menu-item-type-post_type menu-item-object-page">Partenaires</li><li id="menu-item-360" class="menu-item menu-item-type-post_type menu-item-object-page">AppYourself</li><li id="menu-item-656" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown">Connexion
<ul class="dropdown-menu">
<li id="menu-item-936" class="menu-item menu-item-type-custom menu-item-object-custom">Hôtel</li> <li id="menu-item-937" class="menu-item menu-item-type-custom menu-item-object-custom">Camping</li> <li id="menu-item-938" class="menu-item menu-item-type-custom menu-item-object-custom">Bed & Breakfast</li> <li id="menu-item-939" class="menu-item menu-item-type-custom menu-item-object-custom">Restaurant & Bar</li> <li id="menu-item-940" class="menu-item menu-item-type-custom menu-item-object-custom"><a>Beauty & Spa</a></li><!--.dropdown-->
</ul>
</li>
</ul>
</div>
</nav>
</div>
</header>
It's on the Devil's line of bootstrap (line 666):
.navbar .nav>li>.dropdown-menu:before {
content: '';
display: inline-block;
border-left: 7px solid rgba(0, 0, 0, 0);
border-right: 7px solid rgba(0, 0, 0, 0);
border-bottom: 7px solid #CCC;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 9px;
}
Remove it, or overwrite it in your custom CSS.
As Danko points out, there's also an :after that may be causing this. It's on the line after (667):
.navbar .nav>li>.dropdown-menu:after {
content: '';
display: inline-block;
border-left: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid rgba(0, 0, 0, 0);
border-bottom: 6px solid #FFF;
position: absolute;
top: -6px;
left: 10px;
}