I have a side bar (<div>
) in my asp.net page. It is on the left side of the page.
It has some <ul>
items which contains the hyperlinks.
The width of that div should be changed whenever user clicks on a button in that div tag. Before clicking by default the width of the tag is less. So whenever I change the width of the div to less (min size required in my page) in CSS the hyperlinks alignment get disturbed. I want the hyperlinks to be hidden when width is less and to be visible when the displayed when width is increased.
HTML:
<div class="sidebar">
<ul>
<br />
<li>
<i class="fa fa-navicon"></i>
</li>
<li>
<i class="fa fa-home"></i>
<a href="#">Home</a>
</li>
<li>
<i class="fa fa-user"></i>
<a href="#">Students</a>
<ul>
<li><i class="fa fa-info"></i></li>
<li><a href="#">View</a></li>
</ul>
<ul>
<li><i class="fa fa-plus"></i></li>
<li><a href="#">Add</a></li>
</ul>
<ul>
<li><i class="fa fa-edit"></i></li>
<li><a href="#">Edit</a></li>
</ul>
<ul>
<li><i class="fa fa-remove"></i></li>
<li><a href="#">Delete</a></li>
</ul>
</li>
<li>
<i class="fa fa-book"></i>
<a href="#">Subjects</a>
<ul>
<li><i class="fa fa-info"></i></li>
<li><a href="#">View</a></li>
</ul>
<ul>
<li><i class="fa fa-plus"></i></li>
<li><a href="#">Add</a></li>
</ul>
<ul>
<li><i class="fa fa-edit"></i></li>
<li><a href="#">Edit</a></li>
</ul>
<ul>
<li><i class="fa fa-remove"></i></li>
<li><a href="#">Delete</a></li>
</ul>
</li>
<li>
<i class="fa fa-building"></i>
<a href="#">Departments</a>
<ul>
<li><i class="fa fa-info"></i></li>
<li><a href="#">View</a></li>
</ul>
<ul>
<li><i class="fa fa-plus"></i></li>
<li><a href="#">Add</a></li>
</ul>
<ul>
<li><i class="fa fa-edit"></i></li>
<li><a href="#">Edit</a></li>
<<ul>
<li><i class="fa fa-remove"></i></li>
<li><a href="#">Delete</a></li>
</ul>
</li>
<li>
<i class="fa fa-users"></i>
<a href="#">Users</a>
<ul>
<li><i class="fa fa-info"></i></li>
<li><a href="#">View</a></li>
</ul>
<ul>
<li><i class="fa fa-plus"></i></li>
<li><a href="#">Add</a></li>
</ul>
<ul>
<li><i class="fa fa-remove"></i></li>
<li><a href="#">Delete</a></li>
</ul>
</li>
</ul>
</div>`
CSS:
.sidebar
{
overflow:hidden;
width:250px;
background-color:dimgray;
}
.sidebar ul
{
list-style:none;
}
.sidebar ul li
{
display:block;
margin-top:10px;
margin-left:-20px;
}
.sidebar ul li i
{
color:white;
font-size:30px;
padding:7px;
}
.sidebar ul li a
{
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-left:10px;
color:white;
text-decoration:none;
font-size:20px;
width:150px;
padding:7px;
}
.sidebar ul li ul
{
list-style:none;
margin-left:25px;
display:none;
}
.sidebar ul li:hover ul
{
display:inline-block;
}
.sidebar ul li ul li
{
display :inline-block;
}
.sidebar ul li ul li a
{
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-left:15px;
color:white;
text-decoration:none;
font-size:17px;
width:150px;
padding:7px;
}
.sidebar ul li ul li i
{
color:white;
font-size:20px;
padding:7px;
}
So, when I have add overflow:hidden
to sidebar the entire div disappears.
How can I fix this?