Я пытаюсь создать боковую панель, которая будет скользить и отображать содержимое, когда пользователь нажимает кнопку.
проблема, с которой я сталкиваюсь, заключается в том, что при нажатии все содержимое заголовка, тела и нижнего колонтитула перемещается.
Я хочу, чтобы скользящий div скользил поверх меню и контента, не перемещая его, создавая наложение при нажатии
Проверьте скрипку https://jsfiddle.net/livewirerules/tsmpraym/9/.
Ниже то, что я пробовал до сих пор
jQuery(document).ready(function($) { $(«#side»).click(function() { $(‘#slidable’).animate({ width: ‘toggle’ }); }); }) #menu { background-color: green; height: 100px; } #footer { background-color: blue; height: 100px; } #content { background-color: red; height: 400px; } #side { float: left; width: 50px; height: 50px; background: #BBB; } .hide { display: none; } #slidable { float: left; height: 200px; background: #888; width: 200px; } <script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js»></script> <script src=»https://code.jquery.com/ui/1.12.0/jquery-ui.min.js»></script> <div id=»slidable» class=»hide»>Foobar</div> <div id=»side»>+</div> <div id=»menu»> the menu </div> <div id=»content»> content </div> <div id=»footer»> the footer </div>
Вы можете сделать это, установив абсолютную позицию для скользящего элемента. Проверьте здесь: jsfiddle.net/tsmpraym/12 — person LiveEn schedule 08.08.2016
Источник: