在不降低内容的情况下显示导航下拉菜单

Question

我正在修改一些 jQuery，当导航链接悬停时显示 div。

html:

<a href="/about/" data-drop="#drop-about" class="drop-link">About</a>

<div class="drop" id="drop-about">
    <div class="drop-holder">
        <div class="grey-block">
            <strong class="title">Sub Nav</strong>
            <ul>
                    more links ...
            </ul>
        </div>
    </div>
</div>

jQuery 显示下拉菜单：

function initSlideDrops() {
    var activeClass = 'drop-active';
    var animSpeed = 300;

    jQuery('#nav ul li').each(function() {
        var item = jQuery(this);
        var link = item.find('>a[data-drop^="#"]');
        //if (!link.length) return;

        // Modifications to add hover events to nav menu
        if (!link.length) {
            jQuery(this).on('mouseover', function (e) {
                jQuery("li").removeClass("drop-active");
                jQuery('.drop').each(function () {
                    jQuery(this).stop().animate({
                        height: 0
                    }, animSpeed);
                });
            });

            return;
        };

        var href = link.data('drop');
        var drop = jQuery(href).css({
            height: 0
        });
        if(!drop.length) return;

        var dropHolder = drop.find('>.drop-holder');
        var close = drop.find('.btn-close');

        function showDrop(elem) {
            elem.stop().animate({
                height: dropHolder.innerHeight()
            }, animSpeed, function() {
                elem.css({
                    height: ''
                });
            });
        }

        function hideDrop(elem) {
            elem.stop().animate({
                height: 0
            }, animSpeed);
        }

        link.on('click', function(e) {
            e.preventDefault();
            item.add(drop).toggleClass(activeClass).siblings().removeClass(activeClass);

            if(item.hasClass(activeClass)) {
                showDrop(drop);
                hideDrop(drop.siblings());
            } else {
                hideDrop(drop);
                location.href = link.attr('href');
            }
        });

        close.on('click', function(e) {
            e.preventDefault();
            item.add(drop).removeClass(activeClass);
            hideDrop(drop);
        });

        // Modifications to add hover events to nav menu
        link.on('mouseover', function (e) {
            e.preventDefault();
            item.add(drop).toggleClass(activeClass).siblings().removeClass(activeClass);

            if (item.hasClass(activeClass)) {
                showDrop(drop);
                hideDrop(drop.siblings());
            } else {
                hideDrop(drop);
                //location.href = link.attr('href');
            }
        });

        drop.on('mouseleave', function (e) {
            e.preventDefault();
            item.add(drop).removeClass(activeClass);
            hideDrop(drop);
        });
    });
}

一切正常，但是下拉导航会导致内容向下移动，而不是在网站主体顶部滑动。我希望主要内容保留在原处，悬停时导航显示在顶部。我曾尝试在动画事件期间添加 z-index 但无法使其正常工作。完成此任务的正确方法是什么？

感谢任何帮助。

编辑：

SASS:

.drop{
    @extend %clearfix;
    overflow:hidden;
    text-transform:uppercase;
    letter-spacing: 1.65px;
    .drop-holder{
        overflow:hidden;
    }
}

Answer 1

使用 z-index 时必须指定定位属性。

例子。申请

.drop{
 @extend %clearfix;
    overflow:hidden;
    text-transform:uppercase;
    letter-spacing: 1.65px;
    position:relative; /*Positioning applied here*/
    z-index:1;
}

这应该可以解决您的问题。

Answer 2

尝试将 position:absolute; 添加到 .drop-holder. 请参阅下面的代码段。

您还需要从 .drop 中删除 overflow:hidden;。

.drop{
    @extend %clearfix;
    /* overflow:hidden; - Remove this */
    text-transform:uppercase;
    letter-spacing: 1.65px;
    position:relative; /* add this so .drop is positioned relative to .drop */
}

.drop-holder {
    position:absolute;
    border:solid 1px teal; /*for demonstration*/
  }

<a href="/about/" data-drop="#drop-about" class="drop-link">About</a>

<div class="drop" id="drop-about">
    <div class="drop-holder">
        <div class="grey-block">
            <strong class="title">Sub Nav</strong>
            <ul>
                    more links ...
            </ul>
        </div>
    </div>
</div>
<div>content <br />content <br />content <br />content <br />content <br />content <br />content <br />
  </div>

在不降低内容的情况下显示导航下拉菜单

show navigation dropdown without bumping content down

html

javascript

css

jquery

jquery-animate

编辑：