Эффект слайда jquery div с автоматической регулировкой ширины другого div
Я пытаюсь использовать эффект скольжения меню, чтобы дать основному контенту больше места, когда пользователь захочет - больше похоже на поведение щелчка в гамбургер-меню Календаря Google.
Я пытаюсь разместить два блока рядом. 1-й - это меню, 2-й - другое содержимое. Используя пользовательский интерфейс jQuery, я пытаюсь переключить слайд 1-го div.
Две проблемы -
Только когда я даю фиксированную ширину 2-му div, я могу разместить их рядом.
Как сделать так, чтобы второй div занимал остальное пространство?
Только после завершения выдвижения 2-го блока отрегулируйте его ширину.
Как сделать плавное увеличение ширины?
Вот код https://codepen.io/coder92/pen/Yjomwd
$(document).ready(function(){
//adds click function to the hamburger menu
$( "#menu" ).click(function() {
$(".menuDiv").toggle('slide');
});
}); .menuDiv{
background-color: green;
width:200px;
float:left;
}
.contentDiv{
//width:100%;
width:500px;
color:white;
background-color:blue;
float:left;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span id = "menu"> toggle </span>
<div>
<div class = "menuDiv">
Menu
</div>
<div class = "contentDiv">
<table>
<tr>
<td> data </td>
</tr>
</table>
</div>
</div>Заранее спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Для плавного скольжения можно использовать
$(".menuDiv").animate({width: 'toggle'}, 350);
И чтобы данные занимали остальную часть страницы
- Удалите
float: left;из.contentDiv(Float не позволяет элементу принимать полный размер) - Добавьте
margin: 0 auto;(при этом данные занимают всю остальную часть страницы) - Добавьте
overflow: hidden(это предотвратит попадание синего цвета под зеленый)
Проверьте это: https://codepen.io/Funce/pen/QBeLOr
Google Calendar использует комбинацию отображения flex, переполнения hidden и отрицательного margin для достижения эффекта. Вы можете обратиться к приведенному ниже образцу:
$(document).ready(function(){
//adds click function to the hamburger menu
$("#menu").click(function () {
var $menu = $(".menuDiv");
if ($menu.is(':visible')) {
$menu.animate({'margin-left':-200}, function() {
$menu.hide();
});
} else {
$menu.show().animate({'margin-left':0});
}
});
}); .containerDiv {
display: flex;
overflow-x: hidden;
}
.menuDiv{
background-color: green;
width:200px;
}
.contentDiv{
color:white;
background-color:blue;
float:left;
flex:1 1 auto;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span id = "menu"> toggle </span>
<div class = "containerDiv">
<div class = "menuDiv">
Menu
</div>
<div class = "contentDiv">
<table>
<tr>
<td> data </td>
</tr>
</table>
</div>
</div>Обратите внимание, что я использую метод jQuery animate, в то время как Календарь Google использует CSS transition для своих.
Спасибо Funce. Это работает. Чтобы исправить оборачивание текста div меню, я мог бы использовать js, предложенный Chan MT.