While working on the design of my website, I encountered a challenge with the sidebar. I aim to have a sidebar that hovers from the right side to the left, displaying the full content when the cursor is placed over it, much like the one featured on . Although I successfully created a hovering sidebar on the right side, I am now facing an issue as it requires a separate space to hover, whereas I want it to overlay the content of the page, similar to the example mentioned in the link .
Here is the code for my sidebar:
<head>
<style>
#sidebar-body {
overflow-x: hidden;
}
.sidebar {
position: relative;
right: -260px;
width: 450px;
height: 180px;
transition: all 0.3s;
cursor: pointer;
display: block;
}
.sidebar:hover {
right: 0;
}
</style>
</head>
<body id="sidebar-body">
<div class="sidebar">
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
</div>
</body>
Here is how I implemented the sidebar in my Laravel page:
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Entity</th>
<th scope="col">Industry</th>
<th scope="col">Rating Type</th>
<th scope="col">Dissemination Date</th>
<th scope="col">Long Term Rating</th>
<th scope="col">Short Term Rating</th>
<th scope="col">Outlook</th>
<th scope="col">Action</th>
<th scope="col">#</th>
<th scope="col">#</th>
<th scope="col">#</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td></td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
@include('includes.sidebar')
</div>
On my page, it currently looks like mypageIMAGE. However, I desire it to look similar to SampleImg1 or SampleImg2.