如何使用变换让菜单侧边栏消失和调整内容

How to get menu sidebar to disappear and content to adjust using transforms

本文关键字：调整 消失 侧边栏 何使用 变换 菜单      更新时间：2023-09-26

所以现在我正在制作一个仪表板，列表在左边，内容在右边。这是我的 css 的片段：

.sidebar {
    width: 220px;
    height: 100%;
    background-color: #171717;
    float: left;
    border-right: 1px #111 solid;
    position: absolute;
}
.content {
    width: 1480px;
    height: 100%;
/*    margin-left: 220px;*/
    background-color: #222;
    padding: 15px;
    -webkit-transform: translate3d(220px, 0px , 0px);
/*    transform: translate3d(220px, 0, 0);*/
}

这是我的javascript： 

$(document).ready(function(){
    $("#home").click(function(){
        $("#nav").slideToggle('fast'); 
        document.getElementsByClassName('sidebar').style.transform = "(0, 0, 0)"; 
        document.getElementsByClassName('content').style.transform = "(0, 0, 0)";  
        document.getElementsByClassName('content').style.webkitTransform = "(0, 0, 0)";  
        document.getElementsByClassName('content').style.MozTransform = "(0, 0, 0)";   
        document.getElementsByClassName('content').style.msTransform = "(0, 0, 0)";    
        document.getElementsByClassName('content').style.OTransform = "(0, 0, 0)";                  });

});

我正在尝试这样做，以便如果我单击内容和侧边栏上方的按钮，侧边栏的内容将消失，然后内容部分将伸展并适应屏幕。同样，如果我再次单击相同的按钮，侧边栏将重新出现，然后内容将调整为可见的侧边栏。现在，当我单击按钮时，侧边栏向上滚动并消失了，但内容部分非常顽固，只是没有从其原始位置移动。

我发现奇怪的是，如果我把：

    $("#nav").slideToggle('fast');

在所有这些转换之后，侧边栏的滚动功能甚至不起作用。如果我单击该按钮，侧边栏甚至没有反应，这让我相信我没有正确处理这些转换。

编辑：请注意，#nav 只是侧边栏中内容的ID。我通常会使用 .sidebar 向上滚动，但每当我尝试让它消失时，它都会很慢。有了 #nav，双向都很棒

请帮忙，谢谢

我为您编写了一段代码。认为这会对您有所帮助。只需复制，粘贴并尝试即可。 jQuery已经插入了您需要 online.so 和互联网连接来尝试代码，或者如果您离线链接了jQuery，它将正常工作。

<html>
    <head>
    <title>Welcome !</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    
    <style type="text/css">
      body{
        margin:0;
        padding: 0;
      }
    
      .maindiv{
         width: 100%;
         height: 100%;
        }
      .slidediv{
        width: 0%;
        height: 100%;
        background-color: orange;
        position: absolute;
      }
    
      .content{
        width: 100%;
        height: 100%;
        background-color:black;
        position: absolute;
        right: 0;
    
      }
    
    </style>
    
    
     <body>
    
    <div class="maindiv">
      <div class="slidediv"></div>
      <div class="content">
        <button id="click" style="width:60px;height:30px;color:black;background-color:orange;font-size:13px;border-radius:8px;">Slider</button>
      </div>
    </div> 
    
    
    
    <script type="text/javascript">
      $("#click").click(function(){
        $("div.slidediv").animate({width:"30%"});
        $("div.content").animate({width: "70%"});
        $(this).hide();
      });
    
      $("div.slidediv").click(function(){
        $(this).animate({width :"0%"});
        $("div.content").animate({width:"100%"});
        $("#click").show();
      });
    
    </script>
    
     </body>
    </html>

我添加了另一个带有 navigation.it 它将在调整大小时显示它如何

<html>
<head>
<title>Welcome !</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
  body{
    margin:0;
    padding: 0;
  }
  .maindiv{
     width: 100%;
     height: 100%;
    }
  .slidediv{
    width: 0%;
    height: 100%;
    background-color: orange;
    position: absolute;
    
  }
  .content{
    width: 100%;
    height: 100%;
    background-color:black;
    position: absolute;
    right: 0;
  }
div.navi{
  width: 100%;
  position: absolute;
  right: 0;
  background-color: orange;
  text-align: center;
  top: 0%;
}
ul li{
  list-style-type: none;
  display: inline;
  margin: 3%;
  font-size: 15px;
  color: white;
  font-family: monospace;
  font-weight: bold;
}
</style>
 <body>
<div class="maindiv">
  <div class="slidediv"></div>
  <div class="content">
    <div class="navi">
      <button id="click" style="width:60px;height:30px;color:black;background-color:orange;font-size:13px;border-radius:8px;position:absolute;left:0;border:2px solid black;"> ||| </button>
      <ul>
       <li>one</li>
       <li>two</li>
       <li>one</li>
       <li>two</li>
       <li>one</li>
       <li>two</li>
      </ul>
    </div>
  </div>
</div> 
<script type="text/javascript">
  $("#click").click(function(){
    $("div.slidediv").animate({width:"30%"}).css({"box-shadow":"1px 2px 1px white"});
    $("div.content").animate({width: "70%"});
    $(this).hide();
  });
  $("div.slidediv").click(function(){
    $(this).animate({width :"0%"});
    $("div.content").animate({width:"100%"});
    $("#click").show();
  });
</script>
 </body>
</html>

相关文章：