CSS Animation on Sidebar Submenu - html

Question

I've been trying to figure this out, but I'm honestly lost. I'm making a sidebar that has three levels: a main menu, with two more submenus when you hover over the menu items(so it's main menu item > submenu item > another submenu). The thing is, I'm not very good with CSS animations, but I'm trying to learn. And was wondering if this could be done with it?
Here's my code so far. Initially, I started this out with JS, but stackoverflow told me it'd be easier to do it with CSS animation. And honestly, this looks way cleaner. Anyway, currently, it shows the icon titles beside it when you hover over a sidebar. But how exactly should I go about making the submenu appear when you hover over each menu item separately? Should I do it by having a whole new div appear on hover, or should I do it by expanding the existing one(this doesn't seem like it'd be a good idea)?
What's the correct way? And on which elements should I add CSS transitions to achieve that smooth slidein sidebar?
/* .subnav {
position: fixed;
background-color: red;
margin-top: 0;
top: 75px;
left: 75px;
height: 100vw;
}
my poor attempt at submenu */
.sidebar {
margin-top: 75px;
position: fixed;
width:75px;
height:100vw;
top:0;
left:0;
z-index:100;
background-color: #292a2c;
color: #000;
overflow: hidden;
transition: width .5s;
}
.sidebar:hover {
width: 160px;
}
.sidebar ul {
width:200px;
}
.sidebar a i {
font-size: 30px;
}
.sidebar a {
color:#fff;
font-size:14px;
text-decoration:none;
}
.nav-item {
padding-left: 8px;
}
.nav-item:hover {
background-color: $primary-color;
}
span {
display: none;
font-size: 14px;
}
.sidebar:hover span {
display: initial;
}
<div class="sidebar">
<ul class="nav flex-column m-0">
<li class="nav-item py-2">
<a class="nav-link" href="#">
<i class="fa fa-envelope-open" aria-hidden="true"></i>
<span class="pl-1">
Item
</span>
</a>
<ul class="nav subnav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
Overview
<span class="sr-only">
(current)
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
</li>
</ul>
</div>
Thank you!

Answer 1

I hope this will help you. Here is some modification in your previous code.
You can also check it on Jsfiddle
*
{
color: #fff;
}
/* .subnav {
position: fixed;
background-color: red;
margin-top: 0;
top: 75px;
left: 75px;
height: 100vw;
}
my poor attempt at submenu */
.sidebar {
margin-top: 75px;
position: fixed;
width:20px;
height:100vw;
top:0;
left:0;
z-index:100;
background-color: #292a2c;
color: #000;
overflow: hidden;
transition: width .5s;
}
.sidebar:hover {
width: 250px;
}
.sidebar ul {
width:200px;
}
.sidebar a i {
font-size: 30px;
}
.sidebar a {
color:#fff;
font-size:14px;
text-decoration:none;
}
.nav-item {
padding-left: 8px;
}
.nav-item:hover {
background-color: $primary-color;
}
span {
display: none;
font-size: 14px;
}
.sidebar:hover span {
display: initial;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu, .submenu1 {
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
text-decoration: none;
padding: 10px;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
.mainmenu li:hover .submenu {
display: block;
max-height: 200px;
}
.submenu li:hover .submenu1 {
display: block;
max-height: 200px;
}
.submenu a
{
}
.submenu li
{
padding-left: 15px;
}
.submenu1 a
{
}
.submenu1 li
{
padding-left: 20px;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu,
.submenu1{
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<div class="sidebar">
<ul class="nav flex-column m-0">
<li class="nav-item py-2">
<a class="nav-link" href="#">
<i class="fa fa-envelope-open" aria-hidden="true"></i>
<span class="pl-1">Item</span>
</a>
<nav class="navigation">
<ul class="mainmenu">
<li><span class="sr-only"></span>Home</li>
<li>About
<ul class="submenu">
<li>Team</li>
<li>Contact Us
<ul class="submenu1">
<li>Phone</li>
<li>Email</li>
<li>Fax</li>
</ul>
</li>
</ul>
</li>
<li>Our Products</li>
</ul>
</nav> </li>
</ul>
</div>

Answer 2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multi-Level Drop Down Menu with Pure CSS</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
}
ul li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover { background: #2c3e50; }
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
}
li:hover li { float: none; }
li:hover a { background: #1bc2a2; }
li:hover li a:hover { background: #2c3e50; }
.main-navigation li ul li { border-top: 0; }
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
left: 100%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
</style>
</head>
<body>
<ul class="main-navigation">
<li>Front End Design
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Resets</li>
<li>Grids</li>
<li>Frameworks</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1>Multi-Level Drop Down Menu with Pure CSS</h1>
<div class="css-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* CSSScript Demo Page */
google_ad_slot = "3025259193";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-46156385-1', 'cssscript.com');
ga('send', 'pageview');
</script>
</body>
</html>
Hope it helps you. Please check it out and let me know.

Answer 3

Just modified your css a bit. Check if this helps. jsfiddle
.subnav {
position: fixed;
background-color: red;
margin-top: 0;
top: 75px;
left: 75px;
height: 100vw;
opacity:0;
overflow:hidden;
}
.sidebar {
margin-top: 75px;
position: fixed;
width:75px;
height:100vw;
top:0;
left:0;
z-index:100;
background-color: #292a2c;
color: #000;
overflow: hidden;
transition: width .5s;
}
.sidebar:hover {
width: 160px;
}
.sidebar .subnav
{
transform:75px;
transition: transform .5s;
}
.sidebar:hover .subnav{
transform: translateX(85px)
}
.sidebar a i {
font-size: 30px;
}
.sidebar a {
color:#fff;
font-size:14px;
text-decoration:none;
}
.nav-item {
padding-left: 8px;
}
.nav-item:hover {
background-color: $primary-color;
}
span {
display: none;
font-size: 14px;
}
.sidebar:hover span {
display: initial;
}
.nav-item:hover .subnav {
opacity: 1;
}