打开另一页时，如何最小化网站上的侧边栏？

Question

I am working on a portal, currently designing the UI. 我正在门户网站上工作，目前正在设计UI。 I am using frameset here. 我在这里使用框架集。 I need to minimise the left frame (ie Sidebar/Menu) when I click on any link in the sidebar and the web page loads up in the right(Right) frame. 当我单击侧边栏中的任何链接并且网页在right（Right）框架中加载时，我需要最小化左侧框架（即Sidebar / Menu）。 The minimised version of the sidebar only display the icons of the tabs and I want an arrow key which will again maximize the sidebar if clicked. 侧栏的最小化版本仅显示选项卡的图标，我想要一个箭头键，如果单击该箭头，它将再次最大化侧栏。 a 一种

Here is the code for my frame.html 这是我的frame.html的代码

<!DOCTYPE html>
<html>
  <frameset cols="15%,*" scrolling="yes">
  <frame name = "left" src="menu.html" scrolling="yes">
  <frame name = "center">
</frameset>
</html>

my code for sidebar/menu is menu.html 我的侧边栏/菜单代码是menu.html

<!DOCTYPE html>
<html>
<head>

<!--Link to the CSS style sheet-->
<link rel="stylesheet" href="css/menu.css">
<script src="https://kit.fontawesome.com/5c399403c6.js"></script>
</head>

<body>
<!--Sidebar/Menu-->
<div class="wrapper">
  <div class="menu">
    <!--Logo comes here-->
    <h2>Alfred</h2>

    <!--Search Bar-->
    <div class="search">



    <!--Links in the sidebar/menu-->
   <ul>
     <li><input class="search-text" type="text" placeholder="Search here" name="">
     <a class="search-button" href="#">
       <i class="fas fa-search"></i>
     </li>
    <li><i class="fas fa-chart-line"></i><a href="dashboard.html" target ="center" >Dashboard</a></li>
    <li><i class="fas fa-building"></i><a href="hq.html"target ="center" >HQ</a></li>
    <li><i class="fas fa-file-invoice-dollar"></i><a href="accounts.html"target ="center">Accounts</a></li>
    <li><i class="fas fa-users"></i><a href="people.html"target ="center">People</a></li>
    <li><i class="fas fa-at"></i><a href="mail.html"target ="center">Mail</a></li>
    <li><i class="fas fa-handshake"></i><a href="crm.html"target ="center">CRM</a></li>
    <li><i class="fas fa-calendar-alt"></i><a href="calendar.html"target ="center">Calendar</li>
    <li><i class="fas fa-clipboard-list"></i><a href="board.html"target ="center">Board</a></li>
    <li><i class="fas fa-archive"></i><a href="files.html"target ="center">Files</a></li>
    <li><i class="fas fa-headset"></i><a href="desk.html"target ="center">Support Desk</a></li>
    <li><i class="fas fa-cogs"></i><a href="settings.html"target ="center">Settings</li>
  </ul>
  </div>
  </div>
</body>
</html>

and my stylesheet is menu.css 而我的样式表是menu.css

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Muli', sans-serif;
}

i{
  margin: 10px;

}

body{
  background: #391E57;
}

.wrapper{
  display: flex;
  position: relative;
  color: #ECE4F4;

}

.wrapper .menu {
  position: fixed;
  width: 200px;
  height: 100%;
  background: #391E57;
  padding: 30px 0;

}

.wrapper .menu h2{
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 4.5px;
  transition: all .2s ease-in-out;
}

.wrapper .menu h2:hover{
  color: #53D2F5;
  transform: scale(1.1);
}

.search-text{
  width: 140px;
  height: 25px;

}


.wrapper .menu ul li{
  padding: 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(225, 225, 225, 0.05);
}

.wrapper .menu ul li a{
  color: #9F9CA2;
  display: inline;

}

.wrapper .menu ul li .fas{
  width: 25px;
  color: #9F9CA2;
  transition: all .2s ease-in-out;

}

.wrapper .menu ul li:hover .fas{
  color: #53D2F5;
   transform: scale(1.1);
}


.wrapper .menu ul li:hover{
  background: #79668F;
}

.wrapper .menu ul li:hover a{
  color: #fff;
}

Answer 1

There are a couple ways you could partially hide a sidemenu component, and it depends on how you structure the rest of your page. 有两种方法可以部分隐藏sidemenu组件，这取决于您如何构造页面的其余部分。 You could use margin, width, absolute positioning... One thing you will have to do for sure is toggle create a class for when the sidemenu is supposed to be full width, and when it is supposed to be partially open. 您可以使用边距，宽度，绝对定位...您肯定需要做的一件事是，在边注应为全角时以及应将其部分打开时切换创建一个类。

So lets say you choose to use width: 因此，假设您选择使用宽度：

Create a .hide class for your .wrapper .menu with the width you want when it is partially closed, like that: 为您创建一个.hide类.wrapper .menu与要当它是部分封闭的，这样的宽度：
.wrapper .menu.hide { width: 50px; .wrapper .menu.hide {width：50px; } }
Add the ID sidemenu to your component to be able to reference it better. 将ID 侧面菜单添加到您的组件中，以便能够更好地引用它。 Then, create a javascript function to toggle the sidemenu state (recommend using Jquery): 然后，创建一个javascript函数来切换侧面菜单状态（建议使用Jquery）：
toggleSidemenu = () => { $("#sidemenu").toggleClass("hide"); toggleSidemenu =（）=> {$（“＃sidemenu”）。toggleClass（“ hide”）; } }

You can also create functions to always close or always open it, using $("#sidemenu").removeClass("hide"); 您还可以使用$("#sidemenu").removeClass("hide");创建始终关闭或始终打开它的函数$("#sidemenu").removeClass("hide"); and $("#sidemenu").addClass("hide"); 和$("#sidemenu").addClass("hide"); , they may come in handy. ，它们可能会派上用场。

Call the toggleSidemenu function wherever you want to toggle it, like in a header button or whenever you change pages. 无论您要在何处进行切换，都可以调用toggleSidemenu函数，例如在标题按钮中或在更改页面时。

I also recommend adding a transition so that the transition between states is smooth, it looks a lot better. 我还建议添加过渡，以使状态之间的过渡平滑，看起来更好。 ;) ;）

#sidemenu {
  position: fixed;
  width: 200px;
  height: 100%;
  background: #391E57;
  padding: 30px 0;
  -webkit-transition: width 2s
  transition: width 2s;
}

打开另一页时，如何最小化网站上的侧边栏？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-07-28 02:48:36

打开另一页时，如何最小化网站上的侧边栏？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-07-28 02:48:36

解决方案1
0 已采纳 2019-07-28 02:48:36