Dropdown menu with jQuery and nth-child
i tweaked quite a bit https://jsfiddle.net/rxLg0bo4/19/ You will have to try it out with a real page to know for sure.
$(document).ready(function () {
$('.menu_link').ready(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link1').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "0px");
});
$('.menu_link2').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "12%");
});
$('.menu_link3').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "25%");
});
$('.menu_link4').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "37%");
});
$('.menu_link5').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "50%");
});
$('[id$=pnlSubmenu]').mouseenter(function () {
$(this).show();
});
$('[id$=pnlSubmenu]').mouseleave(function () {
$(this).hide();
});
$('.menu_link1').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link2').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link3').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link4').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link5').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
});#pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
height:50px;
display:block;
}
#wrapper_menu {
margin-bottom: 50px;
position: relative;
z-index: 1;
}
#menuicon {
margin: 0 auto;
width: 27px;
display: none;
}
.menubar {
background: #001155;
height: 4px;
width: 27px;
margin-bottom: 5px;
border-radius: 2px;
position: relative;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#menuicon:hover #menubar-top {
transform: translate(0px, 9px) rotate(45deg);
}
#menuicon:hover #menubar-mid {
opacity: 0;
}
#menuicon:hover #menubar-bottom {
transform: translate(0px, -9px) rotate(-45deg);
}
#menu {
height: 44px;
width: 980px;
margin: 0 auto;
border-radius: 5px;
background: rgb(229, 229, 229);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(229, 229, 229, 0.95)), color-stop(100%, rgba(193, 192, 194, 0.95)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#c1c0c2', GradientType=0);
/* IE6-9 */
-webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
}
#pnlMenu {
width: 100%;
height: auto;
}
.menu_link1, .menu_link2, .menu_link3, .menu_link4, .menu_link5, .menu_link6 {
position:relative;
font-size: 15px;
line-height: 44px;
padding: 0 40px;
text-align:left;
}
.menu_link1:active, .menu_link2:active, .menu_link3:active, .menu_link4:active, .menu_link5:active, .menu_link6:active, .menu_link1:focus, .menu_link2:focus, .menu_link3:focus, .menu_link4:focus, .menu_link5:focus, .menu_link6:focus, {
color: #2d98e5;
border-radius: 5px;
background: rgb(229, 229, 229);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(193, 192, 194, 0.95)), color-stop(100%, rgba(229, 229, 229, 0.95)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(193, 192, 194, 0.95)) 0%, rgba(229, 229, 229, 0.95) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(endColorstr='#c1c0c2', startColorstr='#e5e5e5', GradientType=0);
/* IE6-9 */
-webkit-box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
}
.last_menu_link {
float: right;
}
.submenu_link {
}
.submenu_panel {
width: 15%;
height: auto;
background: gray;
position:relative;
overflow: hidden;
transition: all 0.2s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper_menu">
<div id="menuicon">
<div class="menubar" id="menubar-top"></div>
<div class="menubar" id="menubar-mid"></div>
<div class="menubar" id="menubar-bottom"></div>
</div>
<nav id="menu">
<div id="pnlMenu"> <a class="menu_link1" href="Index.aspx?category=1">menu1</a><a class="menu_link2" href="Index.aspx?category=2">menu2</a><a class="menu_link3" href="Index.aspx?category=4">menu3</a><a class="menu_link4" href="Index.aspx?category=5">menu4</a><a class="menu_link5" href="Index.aspx?category=6">menu5</a><a class="menu_link6 last_menu_link" href="Index.aspx?category=8">menu6</a>
</div>
<div id="pnlSubmenu" style="display:none">
<div class="submenu_panel" style="height:100px"> <a class="submenu_link" href="Pages/Chart.aspx?id=7">submenu1</a><a class="submenu_link" href="Pages/Chart.aspx?id=8">submenu2</a>
</div>
<div class="submenu_panel" style="height:100px"> <a class="submenu_link" href="Pages/Chart.aspx?id=4">Link1</a>
<a class="submenu_link" href="Pages/Chart.aspx?id=11">Link2</a>
</div>
</div>
</nav>
</div>Here is a solution i found with your markup.
Used CSS to beautify it.
Jquery:
What did you do?
when .menu_link is hovered i find what index it has.
The index finds if its the first child or second etc.
When we have this magic index number var nthNumber
we can use it to find its corresponding .submenu_panel (I'm guessing here since i cant see all your code) and hide or show this panel
Eg. when we hover the first .menu_link,
we will show the first .submenu_panel
And we do the same for the second and third etc.
$(".menu_link, .submenu_panel").hover(function() {
//Hover inn function
var nthNumber = $(this).index() + 1;
$("[id$=Submenu]").show();
$("[id$=Submenu] .submenu_panel:nth-of-type(" + nthNumber + ")").show();
}, function() {
//Hover out function
$("[id$=Submenu]").hide();
var nthNumber = $(this).index() + 1;
$("[id$=Submenu] .submenu_panel:nth-of-type(" + nthNumber + ")").hide();
});#menu [id$=Menu] {
border: 2px solid #2980b9;
border-radius: 5px;
background-color: #3498db;
}
#menu [id$=Menu] .menu_link {
padding: 10px 10px;
display: inline-block;
font-size: 1.2em;
}
#menu [id$=Menu] .menu_link:hover {
background-color: #45a9ec;
//border: 2px solid #2980b9;
border-radius: 2px;
cursor: pointer; //Visual only (REMOVE)!
}
#menu [id$=Submenu] {
display: none;
}
#menu [id$=Submenu] .submenu_panel {
display: none;
background-color: #45a9ec;
border: 2px solid #2980b9;
border-top: none;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
#menu [id$=Submenu] .submenu_panel .submenu_link {
position: relative;
display: block;
text-indent: 15px;
font-size: 1.1em;
padding: 4px 0px;
border-bottom: 1px solid #2980b9;
}
#menu [id$=Submenu] .submenu_panel .submenu_link:hover {
background-color: #56bafd;
cursor: pointer; //ONLY FOR VISUAL(REMOVE)!
}
#menu [id$=Submenu] .submenu_panel .submenu_link:first-child {
border-top: 1px solid #2980b9;
margin-top: -5px;
padding-top: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu">
<div id="pn1Menu">
<a class="menu_link">Lorem</a>
<a class="menu_link">Ipsum</a>
<a class="menu_link">Dollar</a>
<a class="menu_link">Si</a>
<a class="menu_link">Amet</a>
</div>
<div id="pn1Submenu">
<div class="submenu_panel">
<a class="submenu_link">100</a>
<a class="submenu_link">200</a>
<a class="submenu_link">300</a>
<a class="submenu_link">400</a>
<a class="submenu_link">500</a>
<a class="submenu_link">600</a>
</div>
<div class="submenu_panel">
<a class="submenu_link">010</a>
<a class="submenu_link">020</a>
<a class="submenu_link">030</a>
<a class="submenu_link">040</a>
<a class="submenu_link">050</a>
<a class="submenu_link">060</a>
</div>
<div class="submenu_panel">
<a class="submenu_link">1001</a>
<a class="submenu_link">2002</a>
<a class="submenu_link">3003</a>
<a class="submenu_link">4004</a>
<a class="submenu_link">5005</a>
<a class="submenu_link">6006</a>
</div>
</div>
</nav>