带有栏的侧边栏导航

时间:2020-03-09 19:48:51

标签: javascript css

https://codepen.io/rudolph-reti/pen/PoqEjYm

<div id="mySidenav" class="sidenav">
  <a href="java script:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 15px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

在边栏中,根据其当前大小和链接数,是否显示滚动条。我想为边栏中的链接设置150 px宽的列​​,并使滑块仅在没有更多地方放置新列时显示。怎么做?

版本10.03.2020: 我希望链接的排列方式像在文本列中一样:

  • 关于
  • 服务
  • 客户
  • 联系

1 个答案:

答案 0 :(得分:1)

您可以尝试将其添加到CSS:

.sidenav a {
min-width: 50px;
float: left;
}
@media (max-width: 480px) {
.sidenav a {
float:none;
}}

通过使用媒体查询,您只能为较小的屏幕(例如480px以下的所有屏幕)设置边栏链接的样式。