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

Question

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

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

使用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 的定位是绝对，但相对于它的父级相对，#site -推手。

将#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 2

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

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

定位下拉元素。

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

Answer 3

您需要像这样修改您的代码：

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) 添加了 Class: drop-display,

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

.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 - 总变化

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

How to keep my drop-down menu properly aligned with my element?

html

javascript

css

jquery

drop-down-menu