I'm encountering an issue with this specific element.
HTML
<div class="navbar slide-menu">
<div class="container">
<ul class="nav navbar-default">
<li class="brand"><a href="#">Menu</a></li>
<li class="make-hidden"><a href="#">Home-to landing page</a></li>
<li class="make-hidden"><a href="#">More-find out more</a></li>
<li class="make-hidden"><a href="#">Social-connect with us</a></li>
<li class="make-hidden"><a href="#">Contact-find us near you</a></li>
</ul>
</div>
CSS
.slide-menu{
float:left;
width:50%;
height: 100%;
margin-left:0px;
margin-top:100px;
}
.container{
margin-left:0;
padding: 0;
}
.nav{
width:25%;
margin-left:0;
}
.make-hidden{
position: absolute;
width:15%;
z-index: 1;
overflow: hidden;
}
.make-visible{
width:100%;
transition:width 0.7s linear;
}
In addition, there is some JQuery code to make the li elements expand to 100% width on mouse enter. However, my challenge lies in displaying only a portion of text inside the hidden li element without resizing it to full width and height. Is there a solution or workaround for this? Appreciate any insights! Thanks
Further information: