@media转换为非画布导航

Question

我试图在屏幕大小达到600px的宽度时转换画布外导航。我有一个按钮出现在600px或更少的导航栏切换。我试图让导航关闭，如果你调整屏幕的宽度超过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); 
     } 
    }