HTML CSS试图使固定的sidenavbar响应

问题描述 投票：0回答：2

我制作了HTML页面，左侧导航栏（垂直），位置固定，因此当我向下滚动另一个div（带有文本的指南）时，它不会移动，在带有文本的div之后。我正在尝试使其具有响应性，但是由于它是固定位置，所以无济于事。有什么技巧可以解决此问题？示例（不完全是我的示例，因为它的长代码超过200行，包含CSS和所有内容）但仍然是同一主意。注意，因为导航栏是固定位置，当屏幕像素下降时，它将隐藏辅助线div

.sidenav {
  height: 100%;
  width: 260px;
  position: fixed;
  z-index: 1;
  top: 140px;
  left: 135px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
  border-radius: 5px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 22px;
  color: #2b8bc6;
  display: block;
}
.sidenav h3 {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 22px;
  color: black;
  display: block;
}


.box22 {
    background-color: #fff;
    max-width: 1000px;
    margin: auto;
    margin-top: 20px;
    border-radius: 8px;
}
<body>

<div class="sidenav">

      <a href="#clients">HTML 1 editors</a>
      <a href="#clients">HTML 2 editors</a>
      <a href="#contact">HTML 3 editors</a>

    </div>

 <div class="box22">

          <h1>HTML part 1 intro</h1>
        <p>text</p>
     </div>



</body>
css
2个回答
1
投票

[使用相对的CSS单位，例如vw，相当于总视口的1％。

现在，您已将其设置为绝对大小260px。将其更改为10vw。

有关CSS单位的更多信息，包括相对单位列表，请查看此W3 page。

.sidenav {
  height: 100%;
  width: 10vw;
  position: fixed;
  z-index: 1;
  top: 140px;
  left: -6px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
  border-radius: 5px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 22px;
  color: #2b8bc6;
  display: block;
}
.sidenav h3 {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 22px;
  color: black;
  display: block;
}


.box22 {
    background-color: #fff;
    max-width: 1000px;
    margin: auto;
    margin-top: 20px;
    margin-left: 11vw;
    border-radius: 8px;
}
<body>

<div class="sidenav">

      <a href="#clients">HTML 1 editors</a>
      <a href="#clients">HTML 2 editors</a>
      <a href="#contact">HTML 3 editors</a>

    </div>

 <div class="box22">

          <h1>HTML part 1 intro</h1>
        <p>text</p>
     </div>

</body>
0
投票

您可以使用一些jQuery和更传统的导航布局来进行较小的响应式设计吗？这是个主意：（提琴：https://jsfiddle.net/moqb29cr/）

HTML：

HTML 1编辑器HTML 2编辑器HTML 3编辑器

      <h1>HTML part 1 intro</h1>
<div id="responsive_nav">
        &#x2630;
      </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu maximus turpis. Cras non leo et felis consectetur tristique. Fusce rutrum erat non facilisis suscipit. Quisque id mi dictum, vestibulum massa sit amet, pharetra justo. Sed rutrum, ligula iaculis mattis sagittis, nisi urna commodo diam, eu auctor mi nunc eu odio. Quisque vel odio viverra, imperdiet augue at, rhoncus orci. Nullam fringilla id tortor vel rutrum. Morbi interdum egestas luctus. Suspendisse nec lacus lacinia, mollis massa auctor, consectetur nisi. Quisque interdum iaculis turpis vitae posuere. Aenean sollicitudin blandit interdum. Nulla vel bibendum nibh, at semper ex.Sed ornare dolor dui, sit amet efficitur lacus varius eget. Nunc ut urna at risus tristique cursus. Nulla rutrum rhoncus odio, vel volutpat nibh hendrerit sed. Nulla tempus id erat nec dictum. Phasellus laoreet pretium posuere. Etiam fringilla ipsum ut porttitor euismod. Mauris auctor nisi vitae sapien lacinia, porta tempor est consequat. Phasellus auctor bibendum varius. Duis convallis justo vitae nibh finibus, et vestibulum enim congue. Sed id nulla quam. Quisque sed cursus eros. Integer ut telVestibulum malesuada elementum diam non tincidunt. Integer et pharetra mi, nec tempus erat. Integer tempor dictum feugiat. Duis vel elit tellus. Etiam ornare consequat accumsan. Fusce sit amet sapien vitae mauris vestibulum mattis a sit amet odio. Maecenas volutpat orci tincidunt ante suscipit eleifend. Sed tempor faucibus ligula, vitae vulputate tortor viverra id. Phasellus ultricies, erat et fermentum tincidunt, augue nisl cursus nulla, id facilisis nunc ante commodo quam.Praesent euismod varius eros non euismod. Fusce posuere nisl lacus, a condimentum nunc efficitur eu. Ut et molestie tortor. Nunc vitae magna at felis rutrum blandit vel ut est. Aenean condimentum ipsum nec lorem condimentum convallis. Donec nec diam vel enim dapibus pretium eu at tortor. Maecenas vulputate sed diam ac aliquam. Aenean pharetra ullamcorper nisi, at egestas justo. Interdum et malesuada fames ac ante ipsum primis in faucibus.Morbi malesuada dui vitae ex pretium, eget congue nisi viverra. Donec hendrerit lorem non augue aliquet dictum. Vivamus molestie in justo in pharetra. Nunc finibus, velit sit amet malesuada bibendum, turpis elit maximus tortor, et vehicula ex tellus non lectus. Donec rhoncus erat placerat, pulvinar est eu, tincidunt neque. Donec ligula enim, bibendum non est non, porta blandit risus. In et facilisis lorem, ut commodo ipsum. Nulla feugiat felis vel rhoncus ultrices. Vivamus vitae orci tincidunt, mattis risus a, mattis dui. Curabitur congue enim at lorem lobortis, nec venenatis leo interdum. Quisque id euismod felis, ut congue nunc.</p>

jQuery：

 $("#responsive_nav").click(function(){
    $(".sidenav").toggle();
});

和CSS：

    p {
  position:relative;
  display:block;
  width:75%;
  left:28%;

}
.sidenav {
  height: 100%;
  width: 25%;
  position: fixed;
  z-index: 1;
  top: 85px;
  left;0px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
  border-radius: 5px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 22px;
  color: #2b8bc6;
  display: block;
}
.sidenav h3 {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 22px;
  color: black;
  display: block;
}


.box22 {
    background-color: #fff;
    max-width: 1000px;
    margin: auto;
    margin-top: 20px;
    border-radius: 8px;
}
#responsive_nav {
    display:none;
  }
@media only screen and (max-width: 600px) {
  .sidenav {
    display:none;
    }
  #responsive_nav {
    display:block;
    position:fixed;
    top:15px;
    left:80%;
    cursor:pointer;
    border-radius:6px;
    border:thin solid #ccc;
    padding:10px;
  }
  #responsive_nav:hover {
    background-color:#ccc;
    border-radius:6px;
    padding:10px;
  }
  p {
    width:90%;
    left:0%;
  }
  }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.