javascript - dropdownlist - Menú desplegable con jQuery y nth-child
jquery set selected option by text (3)
Aquí hay una solución que encontré con su marca.
Usado CSS para embellecerlo.
Jquery:
¿Qué hiciste?
Cuando se .menu_link encuentro el índice que tiene.
El índice encuentra si es el primer hijo o el segundo, etc.
Cuando tengamos este número mágico de índice var nthNumber
Podemos usarlo para encontrar su correspondiente .submenu_panel (supongo que aquí, ya que no puedo ver todo su código) y ocultar o mostrar este panel
P.ej. cuando pasamos el primer .menu_link ,
.submenu_panel mostraremos el primer .submenu_panel
Y hacemos lo mismo para el segundo y tercero 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>
Acabo de hacer un menú desplegable con jQuery y una estructura html un poco especial. Así es como se ve mi estructura.
Y este es el jsFiddle, que fue creado: https://jsfiddle.net/rxLg0bo4/10/
Pero quiero que funcione como un menú desplegable adecuado. Eso significa que debería mostrar el submenú_link cuando se desplaza sobre el menú. Si se desplaza sobre el menu_link q, el submenu_link 1-5 debería desplegarse.
Esta es la jQuery:
$(document).ready(function () {
$(''.menu_link'').ready(function () {
$("[id$=pnlSubmenu]").hide();
});
$(''.menu_link'').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
});
$(''[id$=pnlSubmenu]'').mouseenter( function () {
$(this).show();
});
$(''[id$=pnlSubmenu]'').mouseleave(function () {
$(this).hide();
});
$(''.menu_link'').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
});
Y este es mi código ASP.NET:
<nav id="menu">
<asp:Panel ID="pnlMenu" runat="server"></asp:Panel>
<asp:Panel ID="pnlSubmenu" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</asp:Panel>
</nav>
¿Puedo hacer esto con el nth-child de todos modos? También me gustaría tener los enlaces en un estilo de lista, ¿cómo puedo hacer eso?
Creo que esto es lo que estás pidiendo? Usa CSS en lugar de jquery. Esto debería empezar.
https://jsfiddle.net/cshanno/bgryLLwo/
HTML
<ul class="menu">
<li>Link
<ul class="submenu">
<li>Example 1</li>
<li>Example 2</li>
</ul>
</li>
<li> Link 2</li>
</ul>
CSS
.menu {
border:1px solid black;
}
.menu, .menu li {
padding:0;
margin:0 10px;
display:inline-block;
list-style:none;
}
.menu ul {
display:none;
}
.menu li:hover ul {
display:block;
position:absolute;
padding:0;
}
.menu li:hover ul li {
margin:0 0;
display:block;
border: 1px solid black;
}
.menu li ul li:hover {
background-color:skyblue;
}
He ajustado un poco https://jsfiddle.net/rxLg0bo4/19/ Tendrá que probarlo con una página real para estar seguro.
$(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>