ASP.Net MVC 使导航栏在全屏模式下消失

Question

我不确定这是否可行，但对于我使用 Kendo UI 和 ASP.Net MVC 创建的仪表板来说，这将是一件非常酷的事情。

所以本质上我想做的是，当用户点击“F11”进入全屏模式时，我希望我的导航栏折叠起来，然后在用户退出全屏模式时重新打开。

导航栏

我只是添加了导航栏，以便每个人都可以看到它当前的设置方式。它几乎是为 MVC 生成的默认值。

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <!--My nav bar items-->
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

我是这方面的初学者，所以我不知道从哪里开始。如果它更容易的话，我真的只需要在一个页面上完成此操作。我有一个仪表板屏幕，我想将其设置在电视上并保持全屏模式。

任何指示或帮助将不胜感激。

谢谢！

Answer 1

CSS中有一个

:fullscreen

伪类，可以检测全屏并应用特定的CSS。您可以在此处阅读更多相关信息。

不幸的是，按 F11 不会触发该类，因为根据 this，有“2 种全屏类型”；

1. 通过F11触发
2. 通过脚本触发

通过脚本触发的全屏是 CSS 可以检测到的。这就是我尝试过的有效方法；

首先，我向导航栏添加了一个 ID，这样我就可以在我的 css 上引用它。另一种方法是使用类。

<div id="myNavbar" class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                ...
            </div>
            <div class="navbar-collapse collapse">
                ...
            </div>
        </div>
</div>

其次，我添加了这个Site.css，这可以在

Your Project > Content > Site.css

中找到。在 CSS 中，只要页面处于全屏状态，我们就会将导航栏高度减小到 0px。

        #myNavbar {
            transition: 0.4s;
        }

        html:fullscreen #myNavbar {
            min-height: 0px !important;
            height: 0px !important;
            overflow: hidden;
        }

        html:-moz-full-screen #myNavbar {
            min-height: 0px !important;
            height: 0px !important;
            overflow: hidden;
        }

        html:-webkit-full-screen #myNavbar {
            min-height: 0px !important;
            height: 0px !important;
            overflow: hidden;
        }

第三，我添加了一个按钮（您可以将其放在页面上的任何位置），它将以编程方式触发全屏。

<button id="full-screen-toggle" class="btn btn-lg btn-info">Go Fullscreen</button>

然后我添加了每当我们单击按钮时调用的脚本。将其添加到您放置按钮的页面。

@section scripts
{
    <script>
        document.getElementById('full-screen-toggle').addEventListener('click', function () {
            var doc = document.documentElement;

            if (doc.requestFullscreen) {
                doc.requestFullscreen();
            } else if (doc.webkitRequestFullscreen) {
                doc.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            } else if (doc.mozRequestFullScreen) {
                doc.mozRequestFullScreen();
            }

            return false;
        }, false);
    </script>    
}

单击全屏按钮后，导航栏应以幻灯片动画快速隐藏。