I have a dropdown menu within my HTML code but every time I run and click on the dropdown button to display the options it flashes the list then disappears. There are no error messages received just as I have mentioned it flashes then disappears. Please
see below my code which includes Java.
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<script>
function myFunction()
{
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Thats worked perfectly, thank you. I was wondering if you know how i could also hide this button from specified users?
I have used the code below previously to hide buttons that I do not want non-admin users to view but this does not work on the dropdown button. Please see below an example of the code I have used on other buttons within my system.
if (Session["Admin_Team"].ToString() == "Admin_Team")
{
ExampleButton.Visible = true;
}
jonnygareth3...
Member
35 Points
107 Posts
HTML Dropdown menu
Jul 12, 2017 04:24 PM|jonnygareth30|LINK
Hi,
I have a dropdown menu within my HTML code but every time I run and click on the dropdown button to display the options it flashes the list then disappears. There are no error messages received just as I have mentioned it flashes then disappears. Please see below my code which includes Java.
<--css Code-->
/* Dropdown Button */
.dropbtn {
background-color: #990000;
color: white;
padding: 16px;
font-size: 14px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<--HTML Code-->
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn" >Admin Functions</button>
<div id="myDropdown" class="dropdown-content" >
<a href="AddCustomer.aspx">Add Customer</a>
<a href="AddCrownfordEmployee.aspx">Add User</a>
<a href="CustomerReport.aspx">Customer Reports</a>
<a href="Dashboard.aspx.aspx">Dashboard</a>
<a href="ConsultantExpenses.aspx">Expenses Reports</a>
</div>
</div>
</div>
<--Java-->
<script>
function myFunction()
{
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Any help would be greatly appreciated.
Cathy Zou
Contributor
5570 Points
1920 Posts
Re: HTML Dropdown menu
Jul 13, 2017 10:23 AM|Cathy Zou|LINK
Hi jonnygareth30,
According to your description, I tested your code and it works well.
Please check if any method conflict with the java script function or any Css style conflict with it.
Also, you could refer to the following links:
https://www.sitepoint.com/community/t/controls-are-appearing-and-disappearing-in-the-page-load-event-of-javascript/15683
Best regards
Cathy
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
bruce (sqlwo...
All-Star
46594 Points
10228 Posts
Re: HTML Dropdown menu
Jul 13, 2017 02:12 PM|bruce (sqlwork.com)|LINK
your button is performing a post back as the default type for a button is submit. try:
<button type="button" onclick="myFunction()" class="dropbtn" >Admin Functions</button>
jonnygareth3...
Member
35 Points
107 Posts
Re: HTML Dropdown menu
Jul 14, 2017 08:08 AM|jonnygareth30|LINK
Thats worked perfectly, thank you. I was wondering if you know how i could also hide this button from specified users?
I have used the code below previously to hide buttons that I do not want non-admin users to view but this does not work on the dropdown button. Please see below an example of the code I have used on other buttons within my system.
if (Session["Admin_Team"].ToString() == "Admin_Team")
{
ExampleButton.Visible = true;
}
else
{
ExampleButton.Visible = false;
}