I have been working on creating a dropdown menu using Ajax.
When hovering over the navigation bar, the menu successfully triggers the Ajax function to display the dropdown options.
The issue arises when attempting to navigate to another page (show_activities.php) by selecting an option from the dropdown menu. The function is called multiple times while hovering over the dropdown menu, preventing proper redirection.
Here is my code snippet for the navigation bar:
<script type="text/javascript">
// JavaScript code here
</script>
<nav id="access" role="navigation">
<div class="menu">
<ul>
<!-- List items with links -->
</ul>
</div>
</nav>
And below is the PHP file code that needs to be called in the Ajax function:
<?php
// PHP code for database connection and query goes here
?>
In addition, here's some CSS styling used in the project:
@font-face {
font-family: 'cwTeXHei';
// Font styles
}
/* CSS styles for slideshow container, buttons, captions, etc. */
.slideshow-container {
// Styles here
}
/* More CSS styles */
.dropdownlist:hover .dropdown-album {
display: block;
}
For a visual demonstration of the multiple call issue during hover, click here.