Currently, I am working on creating a jQuery drop-down menu that can be used anywhere on my page in a dynamic manner. The goal is to make it flexible so that each element containing the trigger class will be positioned perfectly and trigger the drop-down when clicked. To achieve this, I need a jQuery code that will replace my drop-down with the clicked element, similar to the example shown here (positioned at the center of the clicked text): http://prntscr.com/7hw91t from the website:
Here is the HTML code I have:
<ul>
<li class="more">
<a href="#" class="drop-down-menu-trigger">More</a>
</li>
<li class="more">
<a href="#" class="drop-down-menu-trigger">Second Menu</a>
</li>
</ul>
This code pertains to the elements that will open the drop-down menu when clicked: http://prntscr.com/7hwa7m. The "drop-down-menu-trigger" class triggers the opening of the drop-down menu.
Below is the drop-down menu code located at the bottom of my index.php file:
<div id="more-drop-down-menu" class="drop-down-menu">
<ul>
<li>
<a class="modal-window-trigger" name="modal-window-faq" id="faq" href="faq.php">Frequently Asked Questions</a>
</li>
<li>
<a href="faq.php">Test</a>
</li>
<li>
<a href="faq.php">Test</a>
</li>
<li>
<a href="faq.php">Test</a>
</li>
</ul>
</div>
</div>
Additionally, there is the JS code involved:
(function($)
{
$(".drop-down-menu-trigger").click(function(e)
{
e.preventDefault();
$(".drop-down-menu").css({"visibility": "visible"});
});
})(jQuery);
Lastly, here is my CSS:
.drop-down-menu
{
background-color: #FFFFFF;
position: absolute;
top: 188px;
right: 0;
box-shadow: 0 15px 110px rgba(0, 0, 0, 0.2);
border-radius: 3px;
visibility: hidden;
}
.drop-down-menu:before
{
right: 10px;
bottom: 100%;
margin-left: -15px;
border: 15px solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #FFFFFF;
}
.drop-down-menu a
{
display: block;
color: #000000;
padding: 10px;
}
.drop-down-menu a:hover
{
background-color: #F5F5F5;
}
If anyone could provide assistance with this, I would greatly appreciate it. Thank you!