Having trouble with my side navigation's functionality.
Expected behavior
Show icons only when not hovered over.
On hover, reveal the link one letter at a time until fully visible.
When the hover state is inactive, make the link disappear gradually.
I tried using the overflow-x property but it didn't produce the desired result.
Current issue
The link appears under the icon until the navigation width expands enough to fit both on the same line.
Upon deactivating the hover state, the link instantly disappears.
nav {
background-color: #f5f5f5;
}
nav a {
text-decoration: none;
color: black;
}
.side-nav {
position: fixed;
top: 54px;
left: 0;
bottom: 0;
width: 5%;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: width 2s;
}
.side-nav>.side-nav-top {
display: flex;
flex-direction: column;
}
.side-nav>.side-nav-top>a>span:first-child {
display: inline-block;
margin: 5px 20px 5px 20px;
width: 20px;
}
.side-nav i {
color: #909090;
}
.side-nav:hover {
width: 40%;
}
.hide {
overflow-x: hidden;
display: none;
}
.side-nav:hover .hide {
display: inline;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8><
<title>Home</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.dev.js"></script>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<nav class="side-nav">
<div class="side-nav-top">
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
<a href="#"><span><i class="fas fa-home"></i></span><span class="hide">The Home page</span></a>
</div>
</nav>
</body>
</html>