I have successfully created a drop-down menu that appears when clicking on text with the class trigger to open it. However, I am facing an issue with aligning the menu correctly in my responsive page design: http://prntscr.com/7gw5ox
As I resize the page: http://prntscr.com/7gw5wd
Below is the HTML code for the drop-down menu placed at the bottom of my page:
<div id="help-down-down-menu" class="drop-down-menu">
<ul>
<li>
<a 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>
Also, here is the footer code containing the text that triggers the drop-down menu:
<div id="footer">
<div class="wrapper">
<ul>
<li>
<span class="drop-down-menu-trigger" id="help">Help</span>
</li>
</ul>
<span id="footer-copyright">
<a href="./..">Coded by Dylan - ©2015-2016</a>
</span>
</div>
</div>
Attached below is the JavaScript code snippet:
(function($)
{
$(".drop-down-menu-trigger").click(function(e)
{
e.preventDefault();
$(".drop-down-menu").css({"visibility": "visible"});
});
})(jQuery);
And finally, the CSS styling for the drop-down menu:
.drop-down-menu
{
background-color: #FFFFFF;
box-shadow: 0 15px 110px rgba(0, 0, 0, 0.2);
border-radius: 3px;
text-align: center;
position: absolute;
top: 150%;
left: 500px;
visibility: hidden;
}
.drop-down-menu:after
{
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #FFFFFF;
}
.drop-down-menu a
{
display: block;
color: #000000;
padding: 10px;
}
.drop-down-menu a:hover
{
background-color: #F5F5F5;
}
.drop-down-menu #faq:before
{
content: "\f059";
font-size: 18px;
margin-right: 5px;
}