In my jsFiddle demo here, I have implemented a vertical menu. Upon hovering on the icon, I would like the description of that menu to appear with a fade effect.
Q1: However, during the fading transition, the text in the description wraps into a new line, causing a jerky animation. Any suggestions on how to smooth out this issue?
Q2: I prefer to position the "Extend All" option at the bottom, but due to using tilde (~) in CSS, it needs to be at the beginning in the HTML. Is there a way to rearrange this layout using CSS/CSS3?
Thanks!
CODE:
#nav {
margin: 50px;
width: 50px;
}
#nav ul {
list-style: none;
display: inline-block;
}
#nav ul li{
width:55px;
font-family: "Lucida Sans";
font-size: 13px;
margin-bottom: 1px;
background: #67BCDB;
padding: 10px 0 10px 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#nav ul li a{
padding: 10px 50px 10px 0px;
text-decoration: none;
color: white;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
display:none;
/* overflow-y: scroll;*/
overflow:auto;
}
#nav:hover {
width:30px;
}
#nav ul li:hover {
width:300px;
}
#nav ul li:hover a{
display:inline;
}
#extendList {
vertical-align: bottom;
}
#extendList:hover ~ .oList{
width:300px;
}
#extendList:hover ~ .oList a{
display:inline;
}
span {
margin:0 20px;
}