Question

我正在尝试为此创建一个类似的设计/方法： https://help.sap.com/viewer/8092b085a68941f6aaa6708685a62b0d/4.2.8/en-US/acc57dbca1ab4a5bac2a352ce8cc52d8.html?q=Amazon

请注意，当侧边栏＆lt;＆lt;和＆gt;＆gt;点击图标，这些侧边栏滑出，中心的主题/内容展开以占用空间。

他们正在使用AngularJS，但我必须使用html。我可以使用jquery，vanilla js，如果它有意义我可以尝试bootstrap（虽然我显然不是很有经验，并且如果可能的话，我想坚持只有html和jquery）。

到目前为止，我已经提出了这个问题。请原谅可怕的配色方案 - 它只是描绘div：

$("#right-sidebar-slider").click(function() {
  $('#right-sidebar-content').hide('slide', {
    direction: 'right'
  }, 300);
  $("#topic-container").animate({
    width: "75%"
  }, {
    duration: 600,
    specialEasing: {
      width: 'linear'
    }
  });
});

$("#left-sidebar-slider").click(function() {
  $('#left-sidebar-content').hide('slide', {
    direction: 'left'
  }, 300);
  $("#topic-container").animate({
    width: "77%"
  }, {
    duration: 600,
    specialEasing: {
      width: 'linear'
    }
  });
});

#left-sidebar-slider {
  float: left;
  width: 3%;
  padding-top: 20px;
  background-color: green;
  min-height: 600px;
}

#left-sidebar-content {
  float: left;
  width: 19%;
  padding-top: 20px;
  background-color: pink;
  min-height: 600px;
}

#topic-container {
  float: left;
  min-width: 58%;
  min-height: 600px;
  padding-top: 20px;
  background-color: red;
}

#right-sidebar-slider {
  float: left;
  width: 3%;
  padding-top: 20px;
  background-color: green;
  min-height: 600px;
}

#right-sidebar-content {
  float: left;
  width: 17%;
  padding-top: 20px;
  background-color: pink;
  min-height: 600px;
}

.header {
  display: flex;
  align-items: center;
}

.header .logo {
  background: url("logo-onlinehelp.png") no-repeat;
  width: 60%;
  height: 25px;
  border: 1px solid green;
  margin-left: 15px;
}

.header .search-input {
  border: 2px solid blue;
  width: 40%;
  margin-left: 25px;
}

footer {
  clear: left;
  border-top: 1px solid #cccccc;
  width: 100%;
  height: 40px;
  bottom: 0;
  position: relative;
  background-color: gray;
}

<!doctype html>
<html lang="en">

<head>
  <title></title>
  <link href="favicon.ico" rel="icon" type="image/x-icon" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="vertex.js"></script>
  <script src="dhtml_toc.js"></script>
  <script src="dhtml_search.js"></script>
  <link rel="stylesheet" type="text/css" href="stylesheet_vertex.css">
  <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <!-- need for slider effect -->
</head>

<body>
  <div class="header" style="height: 70px; background-color: gray">
    <div class="logo">
    </div>
    <div class="search-input">
      <form action="#">
        <input type="text" name="search-input" value="Search available topics..." size="70">
        <input type="submit" value="Submit">
      </form>
    </div>
  </div>
  <div id="left-sidebar-content">
    Table of Contents...
  </div>
  <div id="left-sidebar-slider">
    &lt;&lt;
  </div>
  <div id="topic-container">
    Topic here...
  </div>
  <div id="right-sidebar-slider">
    &gt;&gt;
  </div>
  <div id="right-sidebar-content">
    Feedback form here...
  </div>
  <footer>
    This is our footer text.
  </footer>
</body>

</html>

所以我有两个问题： 1.在整体页面结构/方法方面 - wHat是构建这样的东西的最佳方法吗？

复制滑动div的最佳方法是什么？我不需要它们来制作动画，不过那会很好。我只需要用户能够使用中心主题div内容填充视口。

所有实际内容都来自CMS。我正在创建的这个单页只是CMS（一个专有的）用来将内容，目录等插入到html中的模板。

Answer 1

你的方法并不遥远，但我有几点建议：

CSS flexbox而不是浮点数来设置三列布局。（A Complete Guide to Flexbox）
使用CSS过渡代替javascript来添加滑动效果。（Using CSS transitions）
点击按钮可以添加/删除侧边栏元素的类，因此您无需在javascript中添加演示信息

Codepen：https://codepen.io/anon/pen/XqaGEg

HTML：

<button class="sidebar-left-toggle">
  &lt;&lt;
</button>

<button class="sidebar-right-toggle">
  &gt;&gt;
</button>

<div class="container">
  <div class="sidebar-left">sidebar-left</div>
  <div class="content">content</div>
  <div class="sidebar-right">sidebar-right</div>
</div>

CSS：

.container {
  display: flex;
  height: 200px;
  transition: width 0.3s;
}

.sidebar-left, 
.sidebar-right {
  background: #ccc;
  width: 200px;
  transition: width 0.3s;
}

.sidebar-collapsed {
  width: 0;
  overflow: hidden;
}

.content {
  background: #eee;
  flex-grow: 1;
}

使用Javascript：

const leftToggle = document.querySelector('.sidebar-left-toggle');
const rightToggle = document.querySelector('.sidebar-right-toggle');
const leftSidebar = document.querySelector('.sidebar-left');
const rightSidebar = document.querySelector('.sidebar-right');

leftToggle.addEventListener('click', e => {
  leftSidebar.classList.toggle('sidebar-collapsed');
});

rightToggle.addEventListener('click', e => {
  rightSidebar.classList.toggle('sidebar-collapsed');
});

带有侧边栏的自适应3栏页面点击隐藏

1 个答案: