Question

如何让菜单滚动内容。

请注意，内容和菜单位于与页面中心对齐的容器框（class = boxed）内。在此容器上方有一个页眉宽度为100％的标题。

.boxed{
    width:100%;
    max-width: 1154px;
    margin: 0 auto;
    position: relative;
    }
            
    .boxed .sidebar{
    position: relative;
    width: 25%;
    float: left;
    }

HTML看起来像这样：

<html>
<body>
  <header>header content</header>
  <div class="boxed">
    <nav id="sidebarmenu">
      <ul id="sidebar">
        <li></li>
        <li></li>
      </ul>
    </nav>
  <div class="content">content</div>
</div>
</body
</html>

Answer 1

html, body {
    height: 100%;
    margin: 0;
    font-size: 20px;
}
#left {
    width: 20%;
    height: 100%;
    position: fixed;
    outline: 1px solid;
    background: #f2f2f2;
}
#right {
    width: 80%;
    height: auto;
    outline: 1px solid;
    position: absolute;
    right: 0;
    background: #007DAD;
}

<div id="left">
  <a href="link1">Side menu 1</a><br/>
  <a href="link2">Side menu 2</a><br/>
  <a href="link3">Side menu 3</a><br/>
</div>
<div id="right">Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />Scroll
    <br />
</div>

Answer 2

$("#menu").click(function() {

  $(".sidebar").toggleClass("marginL25N");
  $(".content").toggleClass("width100P");


});

.boxed {
  width: 100%;
  max-width: 1154px;
  margin: 0 auto;
  background-color: blue;
  overflow: hidden;
}
.boxed .sidebar {
  width: 25%;
  float: left;
  background-color: red;
  overflow-y: scroll;
  height: 400px;
}
.header {
  width: 100%;
  background-color: #fda529
}
.width100P {
  width: 100%!important;
}
.marginL25N {
  margin-left: -25%;
}
#menu {
  position: absolute;
  top: 0px;
  left: 5px;
}
.content {
  background-color: yellow;
  text-align: center;
  width: 75%;
  float: right;
  position: relative;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxed">
  <div class="header">my header</div>
  <div class="sidebar">
    <div>
      <ul>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
      </ul>
    </div>

  </div>
  <div class="content">
    <a href="#" id="menu">click</a>
    content
  </div>
</div>

希望有所帮助

滚动内容的CSS菜单

2 个答案: