Question

我目前有一个侧边栏，看起来像：this

这是它的HTML代码：

<div id="sidebar">
    <a href="new.php">➕ </a>
    <a class="active" href="#">?</a>
    <a href="me.php">?‍♂️</a>
    <a href="settings.php">?</a>
    <a href="logout.php">?</a>
    
    </div>

现在，我想添加一个按钮以使栏变大，并使用以下代码显示文本：

我发现使用onclick="openNav()"是这样的：

function openNav() {
  document.getElementById("sidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

如果我在这样的文本中进行硬编码：<a href="new.php">➕ New user</a>，则在最小化条形时也将显示文本，如第一张图片所示。但是，如果栏为250px，我怎么才能显示文本？

这是我当前的侧边栏CSS设置：

#sidebar {
    position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  height: 100%;
  width: 60px;
  background: #fff;
  border-right: 1px solid #ddd;
  text-align: center;
}
 
#sidebar a {
    text-decoration: none;
  display: block;
  padding: 20px 0 20px 0px;
  color: #000000;
  letter-spacing: 1px;
}
 
#sidebar a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: black !important;
}
 
#sidebar a:hover, #sidebar a.active {
  text-decoration: none;
  background: #f5f5f5;
  color: black;
}

#sidebar a.active {
    background: #e6e6e6;
}

Answer 1

希望这会有所帮助，我很乐意回答任何问题：）

function openNav() {
  // document.getElementById("sidebar").style.width = "250px";
  
  // OR YOU CAN
 
  document.getElementById("sidebar").classList.toggle("open");
}

#sidebar {
    position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  height: 100%;
  width: 60px;
  background: #fff;
  border-right: 1px solid #ddd;
  text-align: center;
}
 
#sidebar a {
    text-decoration: none;
  display: block;
  padding: 20px 0 20px 0px;
  color: #000000;
  letter-spacing: 1px;
}
#sidebar a span {
  display: none;
}
 
#sidebar a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: black !important;
}
 
#sidebar a:hover, #sidebar a.active {
  text-decoration: none;
  background: #f5f5f5;
  color: black;
}

#sidebar a.active {
    background: #e6e6e6;
}


.open {
  width:250px !important;
}

.open  span {
  display: inline !important;
}

 <div id="sidebar">
    <a href="new.php">➕<span> New user</span></a>
    <a class="active" href="#">?<span> New user</span></a>
    <a href="me.php">?‍♂️ <span> New user</span></a>
    <a href="settings.php">?<span> New user</span></a>
    <a href="logout.php">?<span> New user</span></a>
<button onclick="openNav()">Click</button>
   
    </div>

Answer 2

我更改了 #sidebar a

的某些样式

#sidebar a {
  white-space: nowrap;
  padding-left: 25px;
  overflow: hidden;
  transition: all 600ms ease;
}

通过添加white-space: nowrap;
使文本对齐

溢出：隐藏； //用于隐藏溢出内容

转换：所有600ms缓解； //使动画流畅

function openNav(btn) {
  btn.classList.toggle("active");
  if(btn.classList.contains("active")){
    btn.textContent = "x";
    document.getElementById("sidebar").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
  }else{
    btn.textContent = "☰";
    document.getElementById("sidebar").style.width = "60px";
    document.getElementById("main").style.marginLeft= "60px";
  }
}

#main {
  transition: margin-left .5s;
  margin-left:60px;
  transition: all 600ms ease;
}
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#sidebar {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  height: 100%;
  width: 60px;
  background: #fff;
  border-right: 1px solid #ddd;
  transition: all 600ms ease;
}
 
#sidebar a {
  text-decoration: none;
  display: block;
  padding: 20px 0 20px 0px;
  color: #000000;
  white-space: nowrap;
  padding-left: 25px;
  word-spacing: 15px;
  overflow: hidden;
  transition: all 600ms ease;
}
 
#sidebar a:hover {
   background-color: rgba(255, 255, 255, 0.1);
   color: black !important;
}
 
#sidebar a:hover, #sidebar a.active {
  text-decoration: none;
  background: #f5f5f5;
  color: black;
}

#sidebar a.active {
  background: #e6e6e6;
}

<div id="sidebar">
    <a href="new.php">➕ New User</a>
    <a class="active" href="#">? Home</a>
    <a href="me.php">?‍♂️ Hello</a>
    <a href="settings.php">? Settings</a>
    <a href="logout.php">? Mobile</a>
</div>

<div id="main">
  <button class="openbtn" onclick="openNav(this)">☰</button> 
</div>

使用我的演示：）

function openNav() {
  document.getElementById("sidebar").classList.toggle("big");
}

#sidebar{
  border:1px solid #ccc;
  width:50px;
  transition: all 600ms ease;
}
#sidebar a{
  display:block;
  background:#fff;
  padding:15px 20px;
  text-decoration:none;
  white-space: nowrap;
  overflow:hidden;
  word-spacing: 10px;
    transition: all 600ms ease;
}
#sidebar a.active{background:#e6e6e6;}
#sidebar.big{
  width:200px;
}

<button onclick="openNav()">SIDEBAR</button>
<div id="sidebar">
    <a href="new.php">➕ New User</a>
    <a class="active" href="#">? Home</a>
    <a href="me.php">?‍♂️ Hello</a>
    <a href="settings.php">? Settings</a>
    <a href="logout.php">? Mobile</a>
</div>

半折叠侧边栏

2 个答案: