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

【问题标题】：How to make a fixed menu in header, appear over both the header and content in mobile browsers如何在标题中制作固定菜单，同时显示在移动浏览器中的标题和内容上
【发布时间】：2015-05-04 12:45:25
【问题描述】：

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

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

如果您使用 chrome 在移动设备上查看同一网站，菜单也会滑入，位于标题顶部，但隐藏在内容下方。我注意到它在我的手机上的 Firefox 上运行良好。

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

我拥有的是一个带有固定页眉和页脚的页面。不知何故，我想要一个从顶部滑入的菜单，在单击菜单按钮时出现在标题和内容上方。

【问题讨论】：

我已经尝试过使用各种浏览器（包括 Android 版 Chrome，我假设您正在使用）的菜单，并且所有浏览器都完美地显示了它。您能否更明确地说明您正在使用的软件（操作系统、版本）？
感谢您的评论！这很有趣..我似乎无法让它工作的唯一浏览器是我的 android 上的 Chrome .. 显然版本 42.0.2311.111 .. 在 Android 4.4.2 上
另外：如果它更容易，我很乐意让它从标题下方而不是页面顶部下拉，但我似乎绝对无法做到这一点，因为我的标题高度不固定。
菜单现在似乎根本没有工作。你在编辑它吗？
对不起，我以为我只是在本地编辑。现在应该可以工作了。

标签： html css hide z-index

【解决方案1】：

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

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

当单击菜单按钮时，我使用 JQuery 计算标题的高度并将其向下移动到该位置，并在再次单击按钮、菜单或页面时返回。

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

我为下滑动画添加了 CSS。

.l-region--navigation{
  position: fixed;
  top: 0px;
  right: 0px;
  visibility: hidden;
  background-color: #cccccc; // Old browsers
  @include filter-gradient(#cccccc, #cccccc, vertical); // IE6-9
  @include background-image(linear-gradient(top,  #cccccc 0%,#ededed 62%,#cccccc 100%));
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  @include span (6 of 9);
  @include bleed($grid-padding);
 }

 .l-region--navigation.show{
  visibility: visible;
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
 }

我将标题的 z-index 设置为 100，以确保菜单向下滑动而不是滑过它。总而言之，这一切都很好！

如果我不希望它从标题下方滑落，而是像我原来的问题一样滑到标题上方，现在可以让它从 -200px 滑到 0px，而不是滑到标题高度并移除标题中的 z-index。我第一次有这个，但我更喜欢这个。

【讨论】：