Как сделали меню вот тут: https://dashi-art.com/ Не могу понять. Может кто-то делал подобное? По нажатию на меню (на всех устройствах, кроме мобильного телефона) текущий снимок экрана пользователя смещается вниз и открывает доступные пункты меню. По наведению на пункт меню появляется снимок изображения наведенного пункта. После нажатия данная область увеличивается и становится рабочей.
-
2Сейчас сделаю, ожидайте– MoloF25 окт 2019 в 11:22
-
@MoloF ждем ждем)– ThisMan25 окт 2019 в 11:29
-
@thisman, Тоже заинтересовало?– Алексей Гринев25 окт 2019 в 11:32
-
@АлексейГринев это все делается через трансформацию, не шибко сложно) Просто хочется поглядеть на результат)– ThisMan25 окт 2019 в 11:35
-
2Проста бери этот код и переделай ничего сложного там нету. codepen.io/andrejsharapov/pen/jJXEGq– Randall25 окт 2019 в 11:42
2 ответа
Вроде похоже:
function toggle() {
document.querySelector('.body').classList.toggle('menu-visible');
document.querySelector('button').classList.toggle('menu-visible');
}
body {
margin: 0;
background: wheat;
}
.menu {
height: 0;
}
.menu a {
display: inline-block;
width: 100px;
text-align: center;
background: white;
margin: 10px;
cursor: pointer;
}
.body {
transition: 1s;
transform-origin: 50vw 100vh;
height: 100vh;
overflow-y:scroll;
}
.menu-visible {
transform: scale(0.8);
}
section {
height: 300px;
}
button {
position: absolute;
top: 0;
transform-origin: 50vw 100vh;
transition: 1s;
margin: 10px;
}
<div class="menu">
<a>Home</a>
<a>About</a>
<a>Contact</a>
<a>Questions</a>
</div>
<div class="body">
<section style="background: steelblue"></section>
<section style="background: teal"></section>
<section style="background: steelblue"></section>
<section style="background: teal"></section>
<section style="background: steelblue"></section>
<section style="background: teal"></section>
<section style="background: steelblue"></section>
<section style="background: teal"></section>
</div>
<button onclick=toggle() >Menu</button>
-
1
-
1@АлексейГринев кажется да, и мне опять же кажется что это не должно выхывать проблем, нужно сделать пример =) 25 окт 2019 в 13:47
-
1@АлексейГринев ну да, что не получается, просто по описанию - не должно быть проблем 25 окт 2019 в 13:49
-
1@АлексейГринев codepen.io/strangerintheq/pen/mddmNPM?editors=1010 там еще какая-то особенность с позиционированием текста, но в целом - надо скроллить не весь документ а только тот div который у меня
.body
25 окт 2019 в 14:24 -
1Я извиняюсь, но не могли бы вы сделать чтобы фон в меню был черным? 25 окт 2019 в 14:58
Извиняюсь что запоздал с ответом, решал технические вопросы, ваш пример полностью сделан на JS, довольно громоздко и не было необходимости так извращаться, постарался перенести некоторые моменты и сделать основной упор на появление. Получилось не идеально как в примере, но суть понятна. В частности решал проблему со скролом, в примере он фиксировано находился справа, я долго не мог понять каким образом он там примагничен, времени сидеть над этим было не так много, решил просто убрать его с помощью ::-webkit-scrollbar .
$(document).on('click', '.nav-toggle', function() {
$('#wrapper-toggle').toggleClass('focus');
});
body {
font-family: sans-serif;
background-color: #9e8974;
padding: 0;
margin: 0;
}
header {
max-width: 1000px;
margin: 0 auto;
}
header ul {
display: flex;
align-items: center;
justify-content: space-between;
margin: 100px 0;
text-transform: uppercase;
font-size: 14px;
list-style-type: none;
}
header ul li a {
padding: 10px 20px;
text-decoration: none;
color: #fff;
}
.wrapper {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: #000;
color: #fff;
transform: scale(1);
transform-origin: bottom;
transition: transform 1s;
overflow-y: scroll;
overflow: -moz-scrollbars-none;
}
.wrapper::-webkit-scrollbar {
width: 0 !important;
}
.wrapper.focus {
position: absolute;
transform: scale(0.6);
overflow-y: hidden;
}
.wrapper .stub {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
transition: opacity 0.2s;
z-index: 1;
}
.wrapper.focus .stub {
visibility: visible;
opacity: 1;
}
.wrapper nav {
position: sticky;
left: 50px;
top: 50px;
z-index: 2;
width: 35px;
height: 16px;
cursor: pointer;
}
.wrapper nav .line {
width: 100%;
height: 4px;
background-color: #fff;
top: 0;
position: absolute;
transform: translateX(0);
transform-origin: right;
transition: transform 0.2s;
}
.wrapper nav .line:last-child {
width: 50%;
top: auto;
bottom: 0;
}
.wrapper nav:hover .line:last-child {
transform: translateX(50%);
}
.wrapper.focus nav .line:last-child {
transform: translateX(100%);
}
.wrapper section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 100px;
}
.wrapper section:nth-child(2n) {
background-color: rgba(255, 255, 255, 0.2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav>
<ul>
<li>
<a href="#!">Главная</a>
</li>
<li>
<a href="#!">Автор</a>
</li>
<li>
<a href="#!">Публикации</a>
</li>
<li>
<a href="#!">Галерея</a>
</li>
<li>
<a href="#!">Контакты</a>
</li>
</ul>
</nav>
</header>
<div id="wrapper-toggle" class="wrapper">
<div class="stub nav-toggle"></div>
<nav class="nav-toggle">
<div class="nav">
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
<div class="content">
<section>
<h1>First</h1>
</section>
<section>
<h1>Second</h1>
</section>
<section>
<h1>Third</h1>
</section>
</div>
</div>
Использовал JS для смены класса в объекте.
Более читабильный пример CSS (SASS) кода можно посмотреть здесь: Jsfiddle
-
Нет, всё таки не так получилось, автоматический подгон на JS в вашем примере очень кстати, нужно учитывать многие моменты. И очень непонятно почему на JsFiddle отображается нормально, но не здесь в выполнении кода.– MoloF25 окт 2019 в 12:41
-
1
-
@StrangerintheQ В целом может и не плохо, но мне не понравилось как я выполнил это :<– MoloF25 окт 2019 в 12:46
-