#html #css
#HTML #css
Вопрос:
Я видел много приложений, которые могут это делать: при нажатии на значок расширения меню. Весь контент перемещается вправо или влево. освобождаем место для меню.
Можно ли сдвинуть всю существующую страницу вправо или влево от экрана, освободив место для меню? Если да, то как я могу добиться этого с помощью CSS или JavaScript?
Комментарии:
1. пожалуйста, предоставьте некоторый код. вы пытаетесь создать меню, подобное тому, что в tesla.com/modelx
2. Привет, это возможно, вы можете добиться этого с помощью 3 вариантов, о которых я знаю. Ключевые кадры Jquery, Javascript и CSS. Однако есть доступные варианты, где вы можете получить шаблонный код этого
3. Я работаю над фрагментом кода для вас 🙂
4. Не тесла, это не смещение фона.
Ответ №1:
JS ниже
$(document).ready(function() {
$('.menu-switch').draggable({containment: "parent"});
$('.menu-switch').click(function(){
$('.content').toggleClass('show-menu');
});
$('.left-menu span').click(function(){
$('.content').toggleClass('show-menu');
});
})
CSS ниже
.content {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 0.3s linear;
transition: -webkit-transform 0.3s linear;
transition: transform 0.3s linear;
transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}
.content.show-menu {
-webkit-transform: translateX(200px);
transform: translateX(200px);
-webkit-transition: -webkit-transform 0.3s linear;
transition: -webkit-transform 0.3s linear;
transition: transform 0.3s linear;
transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}
.content .inner-content {
position: relative;
top: 50%;
left: 50%;
width: 60%;
padding: 20px 30px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.content .menu-switch {
position: absolute;
z-index: 1;
left: 2%;
top: 2%;
padding: 10px 13px;
background:#999;
border-radius: 50%;
}
.content .left-menu {
text-align: center;
position: absolute;
box-sizing: border-box;
left: -200px;
width: 200px;
height: 100%;
}
.content .left-menu span {
position: absolute;
left: 2%;
top: 2%;
}
.content .left-menu .left-menu-content a {
display: block;
}
HTML ниже
<div class="content">
<aside class="left-menu">
<span class="fa fa-times-circle fa-lg fa-fw fa-inverse"></span>
<div class="left-menu-header">
<h3>My Menu<h3>
<hr />
</div>
<div class="left-menu-content">
<a href="#">Menut Item 1</a>
</div>
</aside>
<nav class="menu-switch">
<span class="fa fa-navicon fa-2x fa-inverse f-fw"></span>
</nav>
<div class="inner-content">
<p>Page Content Would be over here</p>
</div
</div>
Комментарии:
1. Это хорошо. Но для этого нужно будет поместить все остальное содержимое в раздел «содержимое».
Ответ №2:
Вы можете решить проблему с помощью анимации CSS, которая перекрывает весь экран. Посмотрите на 9-й пример от Eduard L. по ссылке ниже вы можете сделать практически то же самое, вам нужно только настроить панель навигации так, как вам нравится, и сделать анимацию намного больше.