@media 转换关闭 canvas 导航

Question

我正在尝试在屏幕尺寸达到 600 像素的宽度后转换关闭 canvas 导航。我用一个显示在 600 像素或更小的按钮切换导航栏。如果您将屏幕大小调整为超过 600px 的宽度，然后如果在调整屏幕大小之前导航已经打开，我会尝试关闭导航。两个@media 断点中的“.show-nav #site-canvas”子句似乎没有做任何事情，我不确定为什么。

这是css

    @media screen and (min-width: 601px)
    {
       .toggle-nav
       {
         display: none;
       }

       #nav
       {
         display: block;
       }

       .show-nav #site-canvas
       {
         -webkit-transform: translateX(0);
         transform: translateX(0);
       }
    }

    @media screen and (max-width: 600px)
    {
       .toggle-nav
       {
         display: block;
       }

       #nav
       {
         display: none;
       }

       .show-nav #site-canvas
       {
         -webkit-transform: translateX(300px);
         transform: translateX(300px);
       }
    }

    #site-wrapper 
    {
      position: relative;
      overflow: hidden;
      width: 100%;
    }

    #site-canvas 
    {
      width: 100%;
      height: 100%;
      position: relative;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-transition: 300ms ease all;
      transition: 300ms ease all;
    }

    #site-menu 
    {
      width: 300px;
      height: 100%;
      position: absolute;
      top: 0;
      left: -320px;
      background: black;
    }

    #site-menu > .nav-pills > li
    {
      padding-left: 15px;
      width: 100%;
      list-style-type: none;
      border-radius: 5px;
      border: 1px solid whitesmoke;
    }

    #site-menu > .nav-pills > a
    {
      display: block;
    }

    .show-nav #site-canvas 
    {
      -webkit-transform: translateX(300px);
      transform: translateX(300px);
    }

Answer 1

更改您的 css 订单试试这个 CSS

    #site-wrapper 
    {
      position: relative;
      overflow: hidden;
      width: 100%;
    }

    #site-canvas 
    {
      width: 100%;
      height: 100%;
      position: relative;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-transition: 300ms ease all;
      transition: 300ms ease all;
    }

    #site-menu 
    {
      width: 300px;
      height: 100%;
      position: absolute;
      top: 0;
      left: -320px;
      background: black;
    }

    #site-menu > .nav-pills > li
    {
      padding-left: 15px;
      width: 100%;
      list-style-type: none;
      border-radius: 5px;
      border: 1px solid whitesmoke;
    }

    #site-menu > .nav-pills > a
    {
      display: block;
    }

    .show-nav #site-canvas 
    {
      -webkit-transform: translateX(300px);
      transform: translateX(300px);
    } 
@media screen and (min-width: 601px)
    {
       .toggle-nav
       {
         display: none;
       }

       #nav
       {
         display: block;
       }

       .show-nav #site-canvas
       {
         -webkit-transform: translateX(0);
         transform: translateX(0);
       }
    }

    @media screen and (max-width: 600px)
    {
       .toggle-nav
       {
         display: block;
       }

       #nav
       {
         display: none;
       }

       .show-nav #site-canvas
       {
         -webkit-transform: translateX(300px);
         transform: translateX(300px);
       }
    }

@media 转换关闭 canvas 导航

@media transform an off canvas nav

html

css

canvas

media-queries