I made a vertical menu with an underline effect on hover of the menu items.
It didn't work in snippet but the effect (taken from here) is as follows:
/* LEFT TO RIGHT */
.sliding-u-l-r {
display: inline-block;
}
.sliding-u-l-r:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-u-l-r:hover:after {
width: 100%;
background: blue;
}
In Chrome only, I have a 4 pixel range in the browser height where, when you hover an item, during the animation, the height of the menu changes quickly. It leads to a flickering scrolling bar (appearing and disappearing very fast).
The height isn't really changing, and I don't know how to avoid that. Of course, hiding overflow is not a good answer, unless it is disabled only during the animation.
Here is the snippet (still working on it > except the caret pseudo element placement, this is the exact same case than my real case, except that here, the issue wont occur.)
#why,
#about,
#how,
#when,
#where,
#what {
opacity: 0;
display: none;
}
#why:target,
#about:target,
#why2:target,
#about2:target {
display: block;
opacity: 1;
}
.tab input:checked ~ .tab-content {
max-height: 25em;
}
.tab-content {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .35s;
-o-transition: max-height .35s;
transition: max-height .35s;
}
.tab input,
#menu-input {
position: absolute;
opacity: 0;
z-index: -1;
}
.menu {
position: absolute;
width: 30%;
background-color: grey;
top: 0;
left: 0;
bottom: 0;
overflow: auto;
}
.content {
position: absolute;
left: 30%;
background-color: cyan;
top: 0;
right: 0;
bottom: 0;
}
.tab input {
position: absolute;
opacity: 0;
z-index: -1;
}
.tab input:checked ~ .tab-content,
#about:target *#about-menu {
max-height: 25em;
}
/* Icon */
.tab label::after {
position: absolute;
right: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: width .35s ease, background-color .35s ease;
-o-transition: width .35s ease, background-color .35s ease;
transition: width .35s ease, background-color .35s ease;
}
.tab.expandable input[type=checkbox] + label::after {
content: "\25BC";
cursor: pointer;
}
.tab.expandable input[type=checkbox]:hover + label::after {
color: #1EAEDB;
}
.tab.expandable input[type=checkbox]:checked:hover + label::after {
color: #555;
}
.tab.expandable input[type=checkbox]:checked + label h5,
.tab.expandable input[type=checkbox]:checked + h5 {
margin-bottom: 0px;
}
input[type=checkbox]:checked + label h5,
input[type=checkbox]:checked + h5 {
color: inherit;
text-decoration: none;
}
.tab.expandable input[type=checkbox]:checked + label::after {
transform: rotateX(180deg);
}
input[type=checkbox]:checked + label h5:after,
input[type=checkbox]:checked + h5 a:after {
width: 100%;
background: #222;
}
.nav-item a,
.nav-sub-item a,
.tab a {
display: inline-block;
text-decoration: none;
color: inherit;
width: 100%;
}
.nav-item a:after,
.nav-sub-item a:after,
label h5:after {
content: '';
display: block;
height: 1px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
position: absolute;
bottom: 0;
}
.nav-item a:hover,
.nav-sub-item a:hover,
label h5:hover,
input[type=checkbox]:hover + label h5 {
color: #1EAEDB;
text-decoration: none;
}
.nav-item a.selected,
.nav-sub-item a.selected,
label h5.selected {} .nav-item a:hover:after,
.nav-sub-item a:hover:after,
label h5:hover:after,
input[type=checkbox]:hover + label h5:after {
width: 100%;
background: #1EAEDB;
}
.nav-item a.selected:after,
.nav-sub-item a.selected:after,
label h5.selected:after {
width: 100%;
background: #555;
}
.tab label .nav-item {
/*/ margin-bottom: 0px;*/
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
overflow: hidden;
}
.tab input,
#menu-input {
position: absolute;
opacity: 0;
z-index: -1;
}
.tab label,
#menu-label {
position: relative;
display: block;
}
.tab-content {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .35s;
-o-transition: max-height .35s;
transition: max-height .35s;
}
.tab-content h6 {
margin: 1em;
}
/* :checked */
.tab input:checked ~ .tab-content,
#about:target *#about-menu {
max-height: 25em;
}
/* Icon */
.tab label::after {
position: absolute;
right: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.tab.expandable input[type=checkbox] + label::after {
content: "\25BC";
cursor: pointer;
}
.tab.expandable input[type=checkbox]:hover + label::after {
color: #1EAEDB;
}
.tab.expandable input[type=checkbox]:checked:hover + label::after {
color: #555;
}
.tab.expandable input[type=checkbox]:checked + label h5,
.tab.expandable input[type=checkbox]:checked + h5 {
margin-bottom: 0px;
}
input[type=checkbox]:checked + label h5,
input[type=checkbox]:checked + h5 {
color: inherit;
text-decoration: none;
}
.tab.expandable input[type=checkbox]:checked + label::after {
transform: rotateX(180deg);
}
input[type=checkbox]:checked + label h5:after,
input[type=checkbox]:checked + h5 a:after {
width: 100%;
background: #222;
}<html>
<body>
<div class="menu">
<div class="tab expandable">
<input id="about-input" type="checkbox">
<label id="about-label" for="about-input">
<h5 class="nav-item">ABOUT</h5>
</label>
<div class="tab-content">
<h6 class="nav-sub-item"><a href="about/purpose">Purpose2</a></h6>
<h6 class="nav-sub-item"><a href="about/1">1</a></h6>
<h6 class="nav-sub-item"><a href="about/2">2</a></h6>
<h6 class="nav-sub-item"><a href="about/3">3</a></h6>
<h6 class="nav-sub-item"><a href="anout/4">4</a></h6>
</div>
</div>
<div class="tab expandable">
<input id="why-input" type="checkbox">
<label id="why-label" for="why-input">
<h5 class="nav-item">WHY</h5>
</label>
<div class="tab-content">
<h6 class="nav-sub-item"><a href="why/purpose">why2 is that?</a></h6>
<h6 class="nav-sub-item"><a href="why/1">1</a></h6>
<h6 class="nav-sub-item"><a href="why/2">2)</a></h6>
<h6 class="nav-sub-item"><a href="why/3">3</a></h6>
<h6 class="nav-sub-item"><a href="why/4">4</a></h6>
</div>
</div>
<div class="tab expandable">
<input id="how-input" type="checkbox">
<label id="how-label" for="how-input">
<h5 class="nav-item">how</h5>
</label>
<div class="tab-content">
<h6 class="nav-sub-item"><a href="how/purpose">Purpose2</a></h6>
<h6 class="nav-sub-item"><a href="how/1">1</a></h6>
<h6 class="nav-sub-item"><a href="how/2">2</a></h6>
<h6 class="nav-sub-item"><a href="how/3">3</a></h6>
<h6 class="nav-sub-item"><a href="how/4">4</a></h6>
</div>
</div>
<div class="tab expandable">
<input id="when-input" type="checkbox">
<label id="when-label" for="when-input">
<h5 class="nav-item">when</h5>
</label>
<div class="tab-content">
<h6 class="nav-sub-item"><a href="when/purpose">why2 is that?</a></h6>
<h6 class="nav-sub-item"><a href="when/1">1</a></h6>
<h6 class="nav-sub-item"><a href="when/2">2)</a></h6>
<h6 class="nav-sub-item"><a href="when/3">3</a></h6>
<h6 class="nav-sub-item"><a href="when/4">4</a></h6>
</div>
</div>
<div class="tab expandable">
<input id="where-input" type="checkbox">
<label id="where-label" for="where-input">
<h5 class="nav-item">where</h5>
</label>
<div class="tab-content">
<h6 class="nav-sub-item"><a href="where/purpose">Purpose2</a></h6>
<h6 class="nav-sub-item"><a href="where/1">1</a></h6>
<h6 class="nav-sub-item"><a href="where/2">2</a></h6>
<h6 class="nav-sub-item"><a href="where/3">3</a></h6>
<h6 class="nav-sub-item"><a href="where/4">4</a></h6>
</div>
</div>
<div class="tab expandable">
<input id="what-input" type="checkbox">
<label id="what-label" for="what-input">
<h5 class="nav-item">what</h5>
</label>
<div class="tab-content">
<h6 class="nav-sub-item"><a href="what/purpose">why2 is that?</a></h6>
<h6 class="nav-sub-item"><a href="what/1">1</a></h6>
<h6 class="nav-sub-item"><a href="what/2">2)</a></h6>
<h6 class="nav-sub-item"><a href="what/3">3</a></h6>
<h6 class="nav-sub-item"><a href="what/4">4</a></h6>
</div>
</div>
</div>
<div class="content">
<section id="about">
Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur
et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia. Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra
</section>
<section id="why">
modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini:
huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros. At nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri,
miraberis numquam antea visus summatem virum tenuem te sic enixius observantem, ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam.
</section>
<section id="about2">
Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur
et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia. Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra
</section>
<section id="why2">
modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini:
huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros. At nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri,
miraberis numquam antea visus summatem virum tenuem te sic enixius observantem, ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam.
</section>
</div>
</body>
