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

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) 新增类：drop-display，

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

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

我很确定这会奏效，如果仍有任何问题，请随时询问。

更新：

HTML - 增加了一个 ul 和 onclick 事件

CSS - 移除了 text-align:center line 并改变了相对于绝对的位置。

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。

您的问题是#help-down-down-menu 的定位是absolute，但相对与其父级#site-pusher。

将#help-down-down-menu 放入 #footer-copyright。

HTML

<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%);

定位下拉元素。

jsfiddle：https://jsfiddle.net/mf8mgw5d/