Question

我创建了一个带侧栏的网站。随着窗口缩小，侧边栏已经改变了尺寸，但页面上仍然没有足够的空间。所以我一直在寻找一种方法，当屏幕缩小时我可以让侧栏消失。还需要一个按钮，您可以按下该按钮使侧边栏返回，直到您的鼠标不再位于该侧边栏上。我认为这对移动设备也有好处。我一直在寻找一段时间，但似乎无法做到这一点。代码在下面可以任何身体帮助:)

body {
    margin: 0;
    background: -webkit-linear-gradient(left,  lightblue,#FFFF66, #FF3333 ); /* For Safari 5.1 to 6.0 */
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;

    position: fixed;
    height: 100%;
    overflow: auto;
    
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

<ul>
  <li><a class="active" href="index.php">Home</a></li>
  <li><a href="messages/message.php">Messages</a></li>
  <li><a href="ask.php">ASK</a></li>
  <li><a href="cloud.php">Cloud Access</a></li>
   <li><a href="gallery.php">Gallery</a></li>
  <ul style="float:right;list-style-type:none;">
    <li><a href="#about">About</a></li>
    <li><a href="login.php">Login</a></li>
    
  </ul>
</ul>

此刻它调整大小但是我需要它以一定的宽度消失再次出现，当宽度不足时你看不到它需要一个按钮使它出现在宽度最优选的宽度我的代码已经说它要做了。如果你无法理解信息我真的希望我能完成这个：）

Answer 1

您必须为要隐藏侧边栏的特定尺寸编写媒体查询在您的按钮上添加id =“toogleButton”

#toogleButton {display:none} //first hide this button on other sizes

@media screen and (max-width: 768px) {
ul{display:none;}
#toogleButton {display:block} // Show this button on 768 size
}

在这种情况下，您的侧边栏将隐藏在768像素宽度

上

您可以切换（隐藏或显示）此侧栏

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#toogleButton").click(function(){
        $("ul").toggle();
    });
});
</script>

Answer 2

您要查看的是媒体查询。 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

它们用于根据某些条件修改CSS，例如窗口的宽度，甚至是您正在浏览的设备类型。隐藏某个宽度以下的东西可能如下所示：

@media (max-width: 700px) {
  .ul {
    display: none;
  }
}

当窗口处于某个宽度时，侧边栏会消失

2 个答案: