How to use CSS Transition In CSS
In this approach, we are using CSS transitions to animate the expansion of the sidebar width on hover. The transition property is applied to the .sBar class, specifying a transition effect for the width property with a duration of 0.3s and an easing function of ease. When hovered over, the sidebar width increases to 200px.
Example: The below example uses CSS Transition to expand the sidebar on hover in CSS.
<!DOCTYPE html>
<html>
<head>
<title>Using CSS Transitions</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.sBar {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 70px;
background-color: green;
transition: width 0.3s ease;
}
.sBar:hover {
width: 200px;
}
.sBar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sBar ul li {
padding: 10px;
text-align: center;
white-space: nowrap;
}
.sBar ul li a {
color: #fff;
text-decoration: none;
}
.sBar ul li span {
display: none;
}
.sBar:hover ul li span {
display: inline-block;
margin-left: 10px;
}
.sBar ul li:hover {
background-color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<h3 style="text-align:center">
Using CSS Transitions
</h3>
<div class="sBar">
<ul>
<li>
<a href="#">
<i class="fas fa-home"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-info-circle"></i>
<span>About</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cogs"></i>
<span>Services</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-envelope"></i>
<span>Contact</span>
</a>
</li>
</ul>
</div>
</body>
</html>
Output:
How to Expand Sidebar on Hover in CSS ?
Sidebar is the navigational element of the application, through which the user can navigate and explore the entire scope of the application. We can add the functionality of expanding the sidebar on hover in CSS using various approaches.
Below are the approaches to expand the sidebar on hover in CSS:
Table of Content
- Using CSS Transition
- Using CSS Scale Transformation
Contact Us