Question

我创建了一个下拉菜单，当我点击包含允许打开菜单的类触发器的文本时出现，但是我遇到了问题。我的页面是响应式的，因此我需要将菜单与元素正确对齐：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-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 2

您需要像这样修改代码：

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）修改后的代码 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 - 删除了text-align：中心线并相对于绝对值更改了位置。

JQuery - 总变化

Answer 3

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

Router.route("/:name", {
  name: "home",
  template: "home",
  data: function(){
    // this will create a new key myName on the route object for this route
    // and set the value to the name that the user entered in the path
    this.route.options.myName = this.params.name;
    return {
      label: this.params.name
    };
  }
});

// All routes are stored in the Router.routes array
// Loop through it to find the only one with a myName key and return the value

for (var i = 0; i < Router.routes.length; i++){
  if (Router.routes[i].options.myName){
    console.log(Router.routes[i].options.myName); 
  }
}

定位下拉元素。

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

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

3 个答案: