Question

我正在建立一个仍在进行中的网站，但我仍然坚持一些我无法弄清楚的事情。

该网站目前在http://adhoc.fiberspa.nl上可见我首先开发移动设备，因此在浏览器中查看时缩小浏览器屏幕效果最佳。当您在浏览器中查看此内容并单击菜单按钮（右上角）时，菜单会滑入。菜单仍然没有样式，但关键是它可以很好地滑入所有内容。

如果您使用Chrome在移动设备上查看同一网站，则菜单也会在标题顶部滑入，但会隐藏在内容下方。我注意到它在firefox上的手机上工作正常。

从阅读中我发现它与具有自己的z-index堆栈的固定元素有关。所以我不能使用z-index来解决问题。可能我必须改变文档的整个结构，但我无法弄明白。

我所拥有的是具有固定页眉和页脚的页面。当我点击菜单按钮时，我想要一个从顶部滑入，出现在标题上和内容上的菜单。

Answer 1

我最终得到了使用JQuery后的工作版本：

我在页面加载时将菜单固定在页面的右上方。

单击菜单按钮时，我使用JQuery计算标题的高度，然后将其向下移动到该位置，并在再次单击按钮，菜单或页面时进行备份。

<div class="rowtitle">
    <ul class="clearfix">
        <li><li>
        <li><li>
        <li><li>
    </ul>
</div>

我为下滑动画添加了CSS。

(function ($) {

Drupal.behaviors.adhocTheme = {
attach: function (context, settings) {


$('#l-navbutton').click(function () {
     var menu = $('.l-region--navigation');
     menu.css('top', $('.l-header').outerHeight() + "px");
     if(!menu.hasClass('show'))
        menu.addClass('show');
     else   
        {menu.removeClass('show'); menu.css('top', "0px");}
});

$('.l-region--navigation, .l-main, .l-footer').click(function () {
     var menu = $('.l-region--navigation');

     if(menu.hasClass('show'))
        {menu.removeClass('show'); menu.css('top', "0px");}
    });
  }
};
}(jQuery));

我将标题的z-index设为100，以确保菜单在其下方向下滑动而不是在其上方滑动。总而言之，这一切都很美妙！

如果我不希望它从标题下方向下滑动，但是在我的原始问题中超过标题，现在可以通过将其从-200px滑动到0px而不是标题高度并删除标题中的z-index。我有第一个，但我更喜欢这个。

如何在标题中制作固定菜单，在移动浏览器中的标题和内容上显示

1 个答案: