css内容没有全屏如何全屏_使用大量创意演示构建全屏CSS3菜单

css内容没有全屏如何全屏

With the growth of mobile ready webpages, menus and navigations have rapidly evolved into tons of creative and different styles. More and more websites are ditching the boring top-of-the-page site menu with side navigations, menu reveals, and other types of unique methods for navigating a website.

随着移动就绪网页的增长， 菜单和导航已Swift演变为大量具有创意和风格的样式。 越来越多的网站通过侧边导航，菜单显示和其他类型的独特方法来取代无聊的顶部网站菜单。

This article will cover how to build these complex and responsive menus using almost nothing but CSS3 techniques. The only JavaScript involved is used for toggling a class on the body element. We choose to toggle the body class because that gives you free reign to manipulate any element on the web page when you want the menu to be shown - giving you an extra edge level of control for getting creative with just CSS.

本文将介绍如何仅使用CSS3技术来构建这些复杂的响应式菜单。 所涉及的唯一JavaScript用于在body元素上切换类。 我们选择切换主体类，因为当您希望显示菜单时，它使您可以自由控制页面上的任何元素-为您提供了额外的边缘控制级别，使您仅凭CSS就能发挥创意。

This technique is simple for beginners and effective for seasoned developers. Once you understand the concept involved here, you can start to build extremely creative, high performant, and complex menus with very little JavaScript.

这种技术对初学者来说很简单 ，对经验丰富的开发人员也很 有效 。 了解了此处涉及的概念后，您就可以使用很少JavaScript来构建极富创意，高性能和复杂的菜单。

CSS基础 (The Basics to the CSS)

The method described in this tutorial is going to use as much CSS3 as possible. This is great because it means there's little overhead, performance will be fantastic on desktop and mobile, and you really don't need to know JavaScript to build these complex menus. Here's the various CSS stuff we'll be using:

本教程中描述的方法将尽可能多地使用CSS3。 这很棒，因为这意味着很少的开销，在台式机和移动设备上的性能将非常出色 ，并且您实际上不需要了解JavaScript即可构建这些复杂的菜单。 这是我们将要使用的各种CSS东西：

• 2D Transforms
  2D转换
• 3D Transforms
  3D变形
• Transitions
  转场

CSS3过渡 (CSS3 Transitions)

For transitions, we'll be using mostly the standard ease timing function since I personally think it's the smoothest. You can tweak this however you like and choose between linear, ease, ease-in, ease-out, ease-in-out, and cubic-bezier(P1x,P1y,P2x,P2y). Here's some examples:

对于过渡，我们主要使用标准的ease计时功能，因为我个人认为这是最平滑的。 你可以调整这个但是你喜欢和选择linear ， ease ， ease-in ， ease-out ， ease-in-out ，和cubic-bezier(P1x,P1y,P2x,P2y) 这里有一些例子：

/* Format */
transition: property || duration || timing-function || delay

/* Various Examples */
transition: all 300ms ease 0;
transition: all 0.5s ease-in-out 0;
transition: background 300ms cubic-bezier(.61,-0.67,0,1.45) 0;
transition: opacity 100ms ease 0, background 200ms ease-in-out 0, transform 200ms ease-out 0;

/* Cross Browser Prefixes */
-webkit-transition: all 300ms ease 0;
-moz-transition: all 300ms ease 0;
-o-transition: all 300ms ease 0;
transition: all 300ms ease 0;

CSS3转换 (CSS3 Transforms)

Any movement we do on the webpage will be done via 3D Transforms. 3D Transforms leverage the computer's GPU so everything will be extremely performant and smooth for the user. We'll also be using 2D transforms as a fallback if the browser doesn't support 3D transforms. Here's a full list of supported browsers for the technique.

我们在网页上所做的任何移动都将通过3D变换完成。 3D变换利用了计算机的GPU，因此一切对于用户而言都将是非常出色和流畅的。 如果浏览器不支持3D转换，我们还将使用2D转换作为后备。 这是该技术支持的浏览器的完整列表 。

This article won't cover how to do a JavaScript fallback if 2D Transforms aren't supported. For that, you could use Modernizr to detect the browser support and fallback to jQuery's Animate function in most cases though. If you don't want to write custom JavaScript, you can always use our Scotch Panels which basically does all of this for you. Here's what the transforms CSS code will generally look like:

如果不支持2D转换，本文将不介绍如何执行JavaScript后备。 为此，在大多数情况下，您可以使用Modernizr来检测浏览器支持和后退到jQuery的Animate函数。 如果您不想编写自定义JavaScript，则始终可以使用我们的苏格兰威士忌面板 ，基本上可以为您完成所有这些工作。 转换后CSS代码通常如下所示：

-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

JS基础 (The Basics to the JS)

All we're doing is toggling a class on the body called show-nav. When the class is active, we'll show the menu. When the class isn't active, we'll hide the menu in this simple process. Here's the JavaScript for doing this (assuming jQuery is also included):

我们要做的只是在身体上切换一个名为show-nav 。 上课时，我们将显示菜单。 当班级不活跃时，我们将在此简单过程中隐藏菜单。 这是执行此操作JavaScript（假设还包括jQuery ）：

// Wait for the DOM to be ready (all elements printed on page regardless if loaded or not)
$(function() {

    // Bind a click event to anything with the class "toggle-nav"
    $('.toggle-nav').click(function() {

          // Toggle the Body Class "show-nav"
          $('body').toggleClass('show-nav');

          // Deactivate the default behavior of going to the next page on click 
          return false;

    });
});

I'm also going to bind the toggling of the show-nav class to hitting the escape key. Typically you should probably only do this for closing of the nav, but it actually feels really natural to me to have it toggle it open and closed. For some projects, I actually leave this in production code. I added in the comment block below the code if you want it to just close the nav. Feel free to skip this entirely though.

我还将把show-nav类的切换绑定到按下转义键。 通常，您可能只应该在关闭导航时执行此操作，但是让我将其切换为打开和关闭对我来说确实很自然。 对于某些项目，我实际上将其保留在生产代码中。 如果要关闭导航栏，请在代码下方的注释块中添加。 请随意跳过全部。

// Toggle with hitting of ESC
$(document).keyup(function(e) {
    if (e.keyCode == 27) {
        $('body').toggleClass('show-nav');
        // $('body').removeClass('show-nav');
    }
});

高级（但可选）JavaScript (Advanced (but optional) JavaScript)

In some of the demos, we'll also be adding a very short-lived class to the body while it is closing. This gives us an extra level of control to work with in our CSS. This is really good for doing custom things while the navigation is closing. This isn't necessary in most cases of creating these menus, but it can help sometimes while doing advanced techniques. Watch out in some of the complex demos for this snippet of code instead.

在某些演示中，我们还将在关闭时为主体添加一个寿命很短的类。 这给了我们额外的控制权，可以在CSS中使用。 这对于在导航关闭时进行自定义操作非常有用。 在大多数情况下，创建这些菜单不是必需的，但有时在使用高级技术时会有所帮助。 在一些复杂的演示中请注意此代码片段。

$('.toggle-nav').click(function() {
    if ($('body').hasClass('show-nav')) {
        $('body').removeClass('show-nav').addClass('hide-nav');

        setTimeout(function() {
            $('body').removeClass('hide-nav');
        }, 500);

    } else {
        $('body').removeClass('hide-nav').addClass('show-nav');
    }

    return false;
});

基本范例 (Basic Example)

Now that we know the basics, let's build a simple reveal menu demo. I've already built a ton of demos for you to check out, but here's the step-by-step process. All of them are generally the same with the same principles but have some minor differences. Feel free to change styles, speeds, transitions, and anything else you want to get the hang of the idea behind how to build these custom menus. Let's go over the important stuff.

现在我们已经了解了基础知识，让我们构建一个简单的显示菜单演示。 我已经建立了许多演示供您查看 ，但这是逐步的过程。 所有这些原则上都是相同的，但有一些细微的差别。 随意更改样式，速度，过渡和其他任何您想掌握的想法，以了解如何构建这些自定义菜单。 让我们回顾一下重要的东西。

创建您的标记 (Create Your Markup)

The first step is to create a wrapper. This wrapper usually contains everything and hides everything outside of it. You'll also need to place a "push" wrapper inside of it that you will use to slide (transform) everything in some direction.

第一步是创建一个包装器。 该包装器通常包含所有内容，并将所有内容隐藏在其中。 您还需要在其中放置一个“推入式”包装纸，用于沿某个方向滑动（变换）所有内容。

<div class="site-wrap">
    <div class="push-wrap">
    ...
    </div>
</div>

The next step is to create your menu. For the reveal, we're going to place our nav inside the site wrapper but outside the push wrapper.

下一步是创建菜单。 为了揭示这一点，我们将把导航放置在站点包装内，但在推送包装外。

<div class="site-wrap">
    <nav>
        <ul>
            <li><a href="#">Home</a></li> 
            <li><a href="#">About</a></li> 
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li> 
        </ul>
    </nav>
    <div class="push-wrap">
    ...
    </div>
</div>

Now, let's apply the necessary styles. This is going to skip over things like colors and stuff, but it will cover all the necessary essentials like positioning, overflows, transitions, and transforms.

现在，让我们应用必要的样式。 这将跳过颜色和内容之类的内容，但是它将涵盖所有必需的要素，例如定位，溢出，过渡和转换。

/* Hides everything pushed outside of it */
.site-wrap {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
/* Adds a transition and the resting translate state */
.push-wrap {
    -webkit-transition: all 300ms ease 0;
    -moz-transition: all 300ms ease 0;
    -o-transition: all 300ms ease 0;
    transition: all 300ms ease 0;

    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);

    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
/* Will animate the content to the right 275px revealing the hidden nav */
.show-nav .push-wrap {
    -webkit-transform: translate(275px, 0);
    -moz-transform: translate(275px, 0);
    -ms-transform: translate(275px, 0);
    -o-transform: translate(275px, 0);
    transform: translate(275px, 0);

    -webkit-transform: translate3d(275px, 0, 0);
    -moz-transform: translate3d(275px, 0, 0);
    -ms-transform: translate3d(275px, 0, 0);
    -o-transform: translate3d(275px, 0, 0);
    transform: translate3d(275px, 0, 0);
}
/* Positions the nav fixed below the push wrapper */
nav {
    width: 275px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

Lastly, add the Javascript to toggle the body class show-nav as we discussed earlier.

最后，添加Javascript来切换主体类show-nav正如我们之前讨论的那样。

$(function() {
    $('.toggle-nav').click(function() {
          $('body').toggleClass('show-nav'); 
          return false;
    });
});

That's it! We just built a "reveal" side menu in the most simple and easy way possible. Below is a CodePen of our creation with some styles added. Feel free to go in and tweak things like positions, styles, and the direction to get a better understanding of it.

而已！ 我们只是以最简单易行的方式构建了一个“显示”侧菜单。 下面是我们创建的CodePen，其中添加了一些样式。 随意调整位置，样式和方向，以更好地理解它。

See the Pen Body Class Demo by Nicholas Cerminara (@ncerminara) on CodePen.

见笔体类演示尼古拉□瑟敏纳拉（ @ncerminara上） CodePen 。

很棒的演示 (Awesome Demos)

We have a ton of demos for you to play around with and to stir up some ideas! It's important to note that not all of these have been tested for cross-browser. Although these were built for responsive layouts, some of them aren't 100% friendly to mobile or desktop. Lastly, although full screen menus are cool, try to think about usability and the user. Each of these have unique use cases for being used on just mobile or desktop. The demos try to represent all screen sizes however, but these demos are mostly for illustrative purposes of the concept involved in making them.

我们有大量的演示供您试用并激发一些想法！ 重要的是要注意，并非所有这些工具都已针对跨浏览器进行了测试。 尽管它们是为响应式布局而构建的，但其中一些并不是100％对移动设备或台式机友好。 最后，尽管全屏菜单很酷，但是请尝试考虑可用性和用户。 这些中的每一个都有独特的用例，仅可在移动或台式机上使用。 演示试图代表所有的屏幕尺寸，但是这些演示主要是为了说明制作屏幕的概念。

揭示了 (Reveals)

• Reveal Left
  向左显示
• Reveal Top
  显示顶部
• Reveal Right
  显示权

推入 (Pushes)

• Push Left
  向左推
• Push Top
  推顶
• Push Right
  向右推

过度 (Overs)

• Over Left
  左上方
• Over Top
  上方
• Over Right
  在右边

视差器 (Parallaxers)

• Parallax Left
  左视差
• Parallax Top
  视差顶部
• Parallax Right
  右视差

全屏 (Fullscreens)

• Fullscreen Fade
  全屏淡入
• Fullscreen Fancy 1
  全屏花式1
• Fullscreen Fancy 2
  全屏花式2

秤 (Scales)

• Scale 1
  规模1
• Scale 2
  规模2
• Scale 3
  规模3

角度 (Angles)

• Angle Reveal
  角度显示
• Angle Push
  角度推
• Angle Over
  角度超过

杂项/疯狂 (Misc / Insane)

• Super Flip
  超级翻转
• Gravity
  重力
• Hinge
  合页

关于转换的合理警告 (A Fair Warning About Transforms)

As you can see, transforms are extremely powerful at allowing you to move your content and manipulate your webpage. It's even performant and snappy on mobile. However, there are some fair concerns you should watch out for.

如您所见，转换在允许您移动内容和操纵网页方面非常强大。 它甚至在移动设备上表现出色且敏捷。 但是，您应该注意一些公平的问题。

DOM重绘问题 (DOM Repainting Issues)

Sometimes when using transforms or other GPU / hardware accelerated CSS techniques, you can repainting issues on elements. Things like a flicker or elements that aren't simply showing up. Usually you can fix this by adding this property to the effected element:

有时，当使用转换或其他GPU /硬件加速CSS技术时，您可以重新绘制元素上的问题。 诸如闪烁之类的东西或不仅仅出现的元素。 通常，您可以通过将此属性添加到受影响的元素来解决此问题：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;

If that doesn't work, you can try to force GPU acceleration on the element by doing:

如果这不起作用，则可以尝试通过以下方法在元素上强制GPU加速：

-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

固定父元素 (Fixed Parent Elements)

If you transform a parent element of a fixed element, the fixed element is going to stop working. This is something to be careful about. Here's an insightful discussion about it on StackOverflow.

如果转换固定元素的父元素，则该固定元素将停止工作。 这是要小心的事情。 这是关于StackOverflow的有见地的讨论 。

文字和图像模糊 (Blurry Text and Images)

Sometimes when doing a 3D Transform, text or an image might appear blurry. This is because of the way that transforms work. If this is happening, you can try the following code on the blurry element:

有时在执行3D转换时，文本或图像可能会显得模糊。 这是因为改变工作的方式。 如果发生这种情况，您可以在模糊元素上尝试以下代码：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

CPU资源 (CPU Resources)

The last thing to watch out for is overusing 3D Transforms. If you do too many of these on a single page, there's a good chance that when a user visits the page that things will start to lag for them and their computer's fan will start howling.

需要注意的最后一件事是过度使用3D变换。 如果您在单个页面上执行了太多操作，那么很有可能当用户访问该页面时，事情将开始对他们滞后，并且计算机的风扇将开始啸叫。

结论 (Conclusion)

This is a super simple CSS technique that let's you get real creative with your sites and apps. Be sure to check out our demos. You can easily make any or all of these work only on mobile by using media queries - especially since this is where they make the most sense. When building your menus, keep in mind usability so that users aren't confused by your menu.

这是一种非常简单CSS技术，可让您利用自己的网站和应用真正发挥创意。 请务必查看我们的演示 。 您可以使用媒体查询轻松地仅在移动设备上完成所有这些工作，尤其是因为这是最有意义的地方。 构建菜单时，请记住可用性，以免用户对菜单感到困惑。

翻译自: https://scotch.io/tutorials/building-full-screen-css3-menus-with-tons-of-creative-demos

css内容没有全屏如何全屏