Question

搜索了很多但是得到了具体的答案。我正在创建一个网站，我想使用侧栏。我希望侧栏在悬停时向右扩展，如下所示......在之前

之后

和代码

.body {
	margin :0;
	border :0;
	
}
* {
	box-sizing : border-box;
}
.main-header {
	position : absolute ;
	width : 100% ;
	height : 44px;
	background-color : #999;
	z-index:4;
	
}

.main-content {
	padding-top :46px;
	
}

.side-nav {
	position : absolute;
	width:100% ;
	background-color:#666;
	height:100vh;
	z-index:3;
	padding-top:44px;
	
}

.side-nav ul {
	list-style :0;
	padding :0;
	margin:0;
}

.side-nav ul li {
	padding : 20px 10px;
	border-bottom :1px solid #333;
}
	
.side-nav ul li a {
	color:#fff;
	text-decoration : none;
	
}

.side-nav ul li a i {
	color: #333;
}

@media screen and (min-width: 600px)
{
	.side-nav {
	width :80px;
	}
	
	.side-nav ul li {
	text-align: center;
	}
	
	.side-nav ul li span:nth-child(2) {
	display:none;
	}
	
	.side-nav ul li i {
	font-size:  26px;
	}
	
	.main-content {
	
	margin-left:85px;
	}
	
}

@media screen and (min-width: 1000px)
{
	
	.side-nav{
	width:200px;
	}
	.side-nav ul li {
	text-align :left;
	}
	.side-nav ul li span:nth-child(2) {
	display:inline;
	}
	
	.main-content {
	
	margin-left:205px;
	}
	
	
	
	
}

<DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="javascripts/jquery2.1.3/jquery.min.js"></script>

<link rel='stylesheet' href="css/myCss.css" />
</head>

<body>

<div class="main-header">
<a href="#" class="nav-trigger"><span></span></a>
</div>

	<div class="side-nav">
		<nav>
			<ul>
				<li><a href="#"> <span><i class="fa fa-calendar"></i></span>
						<span>xyz</span>
				</a></li>

				<li><a href="#"> <span><i class="fa fa-hourglass-2"></i></span>
						<span>sbc</span>

				</a></li>
				
				<li><a href="#"> <span><i class="fa fa-hourglass-2"></i></span>
						<span>Option 3</span>

				</a></li>
				
				<li><a href="#"> <span><i class="fa fa-hourglass-2"></i></span>
						<span>Option 4</span>

				</a></li>
				

			</ul>
		</nav>
	</div>

	<div class="main-content">
		<p>asjjasjlasj</p>
	</div>


</body>
</html>

如何使用带有良好过渡的css和js来做到这一点。谢谢

Answer 1

您只能使用 CSS3 进行转换，我将其应用于宽度，但可以对您认为更适合您的任何内容进行转换：

所以只需更换下面的行，它应该适合你，如果你不想申请宽度，那么做任何其他适合你的情况的属性，所以只需替换下面的.side-nav和添加.side-nav：也悬停：

.side-nav {
    position : absolute;
    width:80px ;
    background-color:#666;
    height:100vh;
    z-index:3;
    padding-top:44px;
    -webkit-transition: width .5s; //add this line(Safari)
    transition: width .5s; //add this line(Safari)
}

//also add hover as below
.side-nav:hover {
    width:120px ; 
}

有关CSS过渡的更多信息，请查看以下链接： https://www.w3schools.com/css/css3_transitions.asp

Answer 2

使用CSS Transitions

时，实际上非常简单

首先，您可以使用hover选择器更改宽度：

.sidebar {
    width: 50px;
}

.sidebar:hover {
    width: 200px;
}

技术上已经有效，但现在 CSS Transitions 发挥作用：

.sidebar {
    transition: width 300ms ease;
}

基本上它是什么，每当width更改它播放300毫秒长的过渡时。 ease只是一个额外的论点，使得过渡不是那么突然。

所有内容应该类似于 this

css侧垂直菜单转换

2 个答案: