如何保持下拉菜单与我的元素正确地对齐？

Question

我创建了一个下拉菜单，当我单击包含允许打开菜单的类触发器的文本时，该菜单会出现，但我有一个问题。我的页面是响应的，所以我需要菜单与元素：http://prntscr.com/7gw5ox正确地对齐。

当我调整页面大小时：http://prntscr.com/7gw5wd

我的HTML代码(向下菜单-放在我的页面底部)：

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

包含下拉菜单触发器的文本的页脚代码：

    <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代码：

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

Answer 1

您需要像这样修改代码：

HTML ：在页脚注释之后，您的HTML代码必须如下所示

<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)添加类:下拉显示，

2)删除了一个重复的下拉菜单类，并修改了一个类.

.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)在页面加载上添加了一行隐藏下拉菜单。

2)修改的可见性代码fadeIn()或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();
}

我非常肯定，如果还有什么问题，可以随意问一下。

更新：

HTML -再添加一个ul和onclick事件

CSS -删除文本-对齐:中心线和更改的位置相对于绝对。

JQuery -总变动

Answer 2

使用jQuery。更新调整大小的位置。

var $menu = $('#help-down-down-menu');     
var $trigger = $('#help');

$(window).on('resize', setPosition);

var setPosition = function() {
  var offset = $trigger.offset().left;

  $menu.css('left', offset);
};

差不多吧。

编辑

对不起，不要使用jQuery。

你的问题是#帮助下拉菜单是定位绝对，但相对于它的父，哪个#站点推动者。

将#帮助-下拉菜单放在#页脚-版权内。

<span class="drop-down-menu-trigger" id="help">
 Help

  <div id="help-down-down-menu" class="drop-down-menu" style="visibility: visible;">

     ...   

  </div>

</span>

CSS

#help {
  position: relative;
}
#help-down-down-menu {
  position: absolute;
  /* take out everything else */
}

从那里开始。

Answer 3

将下拉元素放置在页脚中，然后添加位置:相对于页脚元素，然后使用：

    left: 50%;
    top: -90%;
    transform: translate(-50%, -90%);

以定位下拉元素。

小提琴手：https://jsfiddle.net/mf8mgw5d/