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

Question

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

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

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

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

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

Answer 1

我最终得到了使用 JQuery:

后的工作版本

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

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

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

我给 header 打了 z-index 100，以确保菜单滑到下方而不是上方。总而言之，这一切都很棒！

如果我不希望它从 header 下方滑下，而是像我原来的问题那样滑到 header 上方，它现在可以通过从 -200px 滑到 0px 来工作，而不是 header 高度并从 header 中删除 z-index。我先有那个，但我更喜欢这个。

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

How to make a fixed menu in header, appear over both the header and content in mobile browsers

html

css

hide

z-index