时间戳

首页 > 解决方案 > Css 侧边导航过渡

html - Css 侧边导航过渡

问题描述

我有一个侧边导航栏，可以在单击按钮时扩展。

如果文本太长，当我打开侧面导航栏时，它首先显示为 2 行，然后当我们达到侧面导航的全宽时，它会显示为 1 行。

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

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  display:flex;
  flex-direction: column;
  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: 25px;
  color: #818181;
 
}

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

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.sidenav-item {
	display:flex;
    justify-content: center;
    align-items: center;
}
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="sidenav-item">
  	<img src="https://picsum.photos/35/35"/>
    <a href="#">Toto user creation</a>
  </div>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

在上面的示例中，当导航栏扩展“Toto 用户创建”时，首先显示为 3 行，然后最终显示为 2 行。我想直接显示在 2 行

我只为文本尝试了transition:none，但它不起作用。

根据文本的宽度使文本直接出现在 X 行上的任何想法？

标签： htmlcss

解决方案

Give.sidenav-item min-width: 250px;并且文本不会在折叠时移动

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

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  display:flex;
  flex-direction: column;
  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: 25px;
  color: #818181;
 
}

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

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.sidenav-item {
	display:flex;
    justify-content: center;
    align-items: center;
    min-width: 250px;
}
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="sidenav-item">
  	<img src="https://picsum.photos/35/35"/>
    <a href="#">Toto user creation</a>
  </div>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

推荐阅读