How do I keep my drop down menu properly aligned with my item?

advertisements

I created a drop-down menu that appears when I click on my text that contains the class trigger that allows to open the menu, but I have a problem. My page is responsive, so I need the menu is correctly aligned with the element: http://prntscr.com/7gw5ox

When I resize the page: http://prntscr.com/7gw5wd

My HTML code (down-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>

Footer code with the text that contains the drop-down menu trigger:

    <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>

JavaScript code:

(function($)
{
    $(".drop-down-menu-trigger").click(function(e)
    {
        e.preventDefault();
        $(".drop-down-menu").css({"visibility": "visible"});
    });
})(jQuery);

CSS:

.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;
}


You need to modify your code like this:

HTML : After Footer Comments your HTML Code must be like this

<div class="drop-display">
    <div id="help-down-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>

<div id="footer">
    <div class="wrapper">
        <ul>
      <!-- +++++++++++++++++++++++++++++++++ ADDED & UPDATED +++++++++++++++++++++++++++++ -->
            <li>
                <span class="drop-down-menu-trigger" id="help" onclick="getPos(this)">Help</span>
            </li>
            <li>
                <span class="drop-down-menu-trigger" id="test" onclick="getPos(this)">Help</span>
            </li>
      <!-- +++++++++++++++++++++++++++++++++ ADDED & UPDATED +++++++++++++++++++++++++++++ -->
        </ul>
        <span id="footer-copyright">
            <a href="./..">Coded by Dylan - ©2015-2016</a>
        </span>
    </div>
</div>
<div id="modal-window-faq" class="modal-window">
    ...
    ...
    ... <!-- Same as your code is-->
</div>
<div id="expose-mask"></div>
<script src="javascript/scripts.js"></script>
</div>
</div>
</body>
</html>

CSS

1) Added Class: drop-display,

2) Removed 1 drop-down-menu class as was repeating, and modified one.

.drop-display
{
    display: block;
    width: 100%;
    //text-align: center; REMOVE THIS LINE
    position: absolute; /* CHANGED FROM absolute */
    z-index: 999;
}

.drop-down-menu // NO UPDATE HERE
{
    display:inline-block;
    background-color: #FFFFFF;
    box-shadow: 0 15px 110px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    text-align: center;
    position: relative;
}

JQuery

1) Added line to hide drop-down-menu on page load

2) Modified code of Visibility to fadeIn() OR fadeToggle()

$(".drop-down-menu").hide(); // On very first line of scripts.js file
function getPos(elems)
{
    var x = elems.offsetLeft, y = elems.offsetTop;
    var curId = event.target.id;
    var hw = $("#" + curId ).width();
    var dw = $(".drop-down-menu").width();
    var dh = $(".drop-down-menu").height();
    var temp = dw/2;
    var tempx = hw/2;
    var xPos = x - temp + tempx;
    var yPos = y - dh - 20;
    $(".drop-display").css("left", xPos + "px");
    $(".drop-display").css("top", yPos + "px");

    $(".drop-down-menu").fadeToggle();
}

I am very sure this will work, if still any issue feel free to ask.

UPDATE :

HTML - Added one more ul and onclick event

CSS - Removed text-align:center line and changed position relative to absolute.

JQuery - Total Change