Dropdown menu doesn't work with JavaScript
Question
I tried to make a dropdown menu with a JavaScript because the html gets generated. So I got help from some users but it's not working properly yet.
This is my menu now: https://jsfiddle.net/rxLg0bo4/5/
As you can see in the jsFiddle the menu doesn't disappear when I leave the area. And it should also change, when I go from menu1 to menu2.
As you can see, I don't really have a smart structure for building a dropdown menu, but it should work as well. I'm working with ASP.NET so this code gets generated.
<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_link" href="Index.aspx?category=1">menu1</a><a class="menu_link" href="Index.aspx?category=2">menu2</a><a class="menu_link active_menu_link" href="Index.aspx?category=4">menu3</a><a class="menu_link" href="Index.aspx?category=5">menu4</a><a class="menu_link" href="Index.aspx?category=6">menu5</a><a class="menu_link 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>
This is my JavaScript that I have now:
$("#pnlMenu .menu_link").mouseover(function () {
$(".submenu_panel").css("height", "100px");
$("#pnlSubmenu").slideToggle('fast');
});
That's my aspx code, as you can see I already added the jquery to it:
<head runat="server">
<title> 2.0 Preview</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<link rel="stylesheet" href="Styles/font-awesome-4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="Styles/StyleSheet.css" />
<link rel="shortcut icon" href="Images/favicon.png" type="image/x-icon" />
<!-- Scripts -->
<script src="/Scripts/auto-rotate.js"></script>
<script src="/Scripts/jquery.min.js"></script>
<script src="/Scripts/key-nav.js"></script>
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<header>
<nav>
<asp:HyperLink ID="lnkLogin" NavigateUrl="~/Pages/Account/Login.aspx" runat="server">Login</asp:HyperLink>
<asp:LinkButton ID="lnkLogout" runat="server" OnClick="lnkLogout_Click">Logout</asp:LinkButton>
</nav>
<nav>
<asp:Label ID="litStatus" runat="server" Text=""></asp:Label>
</nav>
</header>
<div id="wrapper_secondary">
<div id="wrapper_logo">
<a href="/Index.aspx">
<div id="logo"></div>
</a>
</div>
<div id="wrapper_headermenu">
<a href="/Pages/Management/Management.aspx" id="management_link">Management</a>
<asp:HyperLink ID="lnkRegister" NavigateUrl="~/Pages/Account/Register.aspx" CssClass="header_hyperlink" runat="server">Register</asp:HyperLink>
<a href="#" id="contact_link">Kontakt</a>
<a href="#">
<label>
Fullscreen
<asp:CheckBox id="fullscreen_chbx" OnCheckedChanged="fullscreen_chbx_Click" runat="server" AutoPostBack="true"/></label>
</a>
</div>
</div>
<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">
<script type="text/javascript">
$('.menu_link').hover(function () {
$("#pnlSubmenu").slideDown('slow');
});
$('#pnlSubmenu').on("mouseenter", function () {
$(this).show();
});
$('#pnlSubmenu').mouseleave(function () {
$(this).hide();
});
$('.menu_link').mouseleave(function () {
$("#pnlSubmenu").hide();
});
</script>
<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>
</div>
4 answers
solution1
0 2015-08-17 07:22:19
When using descendant selector, you can not use id selector for the first element. css like below will not work.
#pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
height:50px;
display:block;
}
solution2
0 2015-08-17 07:24:32
Check this new one link https://jsfiddle.net/rxLg0bo4/9/
$('.menu_link').hover(function () {
$("#pnlSubmenu").slideDown('slow');
});
$('#pnlSubmenu').on("mouseenter", function () {
$(this).show();
});
$('#pnlSubmenu').mouseleave(function () {
$(this).hide();
});
$('.menu_link').mouseleave(function () {
$("#pnlSubmenu").hide();
});
solution3
0 2015-08-17 07:26:37
first, I have to mention that you can use the bootstrap dropdown it will make your life easier, second I came up with a couple of changes you can make, it's not perfect, but it will get you there:
HTML
<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="link1 menu_link" href="Index.aspx?category=1">menu1</a><a class="menu_link" href="Index.aspx?category=2">menu2</a><a class="link3 menu_link active_menu_link" href="Index.aspx?category=4">menu3</a><a class="menu_link" href="Index.aspx?category=5">menu4</a><a class="menu_link" href="Index.aspx?category=6">menu5</a><a class="menu_link last_menu_link" href="Index.aspx?category=8">menu6</a>
</div>
<div id="pnlSubmenu" style="display:none">
<div id="link1" class="submenu_panel" style="height:0px"> <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 id="link3" class="submenu_panel" style="height:0px"> <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>
you can see here that I added class link1 and link3 to two menu links, you should fill the rest, and added the same values as id for the dropdown part, then on the mouse over event I will read this value and call the appropriate id to show. and as for why the menu wasn't disappearing, you need a mouseout event as follows:
$("#pnlMenu").mouseover(function (event) {
var x = $(event.target).attr('class').split(' ')[0];
console.log(x)
$("#"+x).css("height", "100px");
$("#pnlSubmenu").slideToggle('fast');
});
$("#pnlMenu").mouseout(function (event) {
var x = $(event.target).attr('class').split(' ')[0];
console.log(x)
$("#"+x).css("height", "0px");
$("#pnlSubmenu").slideToggle('fast');
});
like I said, this is a draft to get you going, this is not a perfect solution. I hope this helps
solution4
0 2015-08-17 08:00:46
Simple Jquery can do the trick
function showE() { $("#h1").removeClass("hide"); } function don() { if ($('#h1').is(':hover')) { $("#h1").removeClass("hide"); } else { $("#h1").addClass("hide"); } }
.hide { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="h" href="#" onmouseover="showE()" onmouseout="don()">show</a> <div id="c" onmouseover="showE();" onmouseout="javascript:$('#h1').addClass('hide');"> <div id="h1" style="float: inherit; overflow: hidden; position: absolute;height:15px; background-color: Gray; border-radius: 0 5px 5px 5px;" class="hide"> Enter your email if you have posted this ad </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.