Я занимаюсь разработкой веб-сайта и столкнулся с проблемой на боковой панели. Я хочу создать боковую панель с правой стороны, которая колеблется справа налево и показывает полный контент, когда курсор перемещается над ним. очень похоже на боковую панель в https://www.psx.com.pk. Я создал парящую боковую панель с правой стороны, которая работает нормально. Но теперь я сталкиваюсь с проблемой, так как для этого нужно отдельное пространство, в то время как я хочу, чтобы оно зависало над моим содержимым страницы. Как тот, который я упомянул в ссылке https://www.psx.com.pk.
Это мой боковой штрих-код
<head>
<style>
#sidebar-body {
overflow-x: hidden;
}
.sidebar {
/*background: #42b078;*/
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>
И я использую его вот так на своей полной странице Laravel
<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>
На моей странице это выглядит так mypageIMAGE
Пока я хочу, чтобы это выглядело так SampleImg1 SampleImg2