个人中心
gpt4 book ai didi

javascript - 响应式 3 栏页面，带有侧边栏，单击即可隐藏

转载 作者：行者123 更新时间：2023-12-03 01:57:36 24 4
gpt4 key购买 nike

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

请注意，当单击侧边栏 << 和 >> 图标时，这些侧边栏会滑出，并且中心的主题/内容会展开以占用释放的空间。

他们正在使用 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. 就整体页面结构/方法而言 - 构建此类内容的最佳方法是什么？

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

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

    最佳答案

    你的方法并不遥远，但我有一些建议:

    1. CSS flexbox 而不是 float 来设置三列布局。 (A Complete Guide to Flexbox)

    2. 使用 CSS 过渡而不是 JavaScript 来添加滑动效果。 (Using CSS transitions)

    3. 单击按钮即可向侧边栏元素添加/删除类，这样您就不需要在 javascript 中包含演示信息

    代码笔: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');
    });

    关于javascript - 响应式 3 栏页面，带有侧边栏，单击即可隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50175528/

    24 4 0
    文章推荐： javascript - 如何在选择第一个 radio 输入时选择所有复选框并在选择第二个 radio 输入时取消选中所有复选框？ (Javascript)
    文章推荐： javascript - Lodash key与数组具有相同的属性
    文章推荐： javascript - React - 使用 setState 更新状态中的对象数组
    文章推荐： javascript - Apple 或 Shellscript |获取属性。图像的类名的 "src"并下载它