2

Как сделали меню вот тут: https://dashi-art.com/ Не могу понять. Может кто-то делал подобное? По нажатию на меню (на всех устройствах, кроме мобильного телефона) текущий снимок экрана пользователя смещается вниз и открывает доступные пункты меню. По наведению на пункт меню появляется снимок изображения наведенного пункта. После нажатия данная область увеличивается и становится рабочей.

7
  • 2
    Сейчас сделаю, ожидайте
    – MoloF
    25 окт 2019 в 11:22
  • @MoloF ждем ждем)
    – ThisMan
    25 окт 2019 в 11:29
  • @thisman, Тоже заинтересовало? 25 окт 2019 в 11:32
  • @АлексейГринев это все делается через трансформацию, не шибко сложно) Просто хочется поглядеть на результат)
    – ThisMan
    25 окт 2019 в 11:35
  • 2
    Проста бери этот код и переделай ничего сложного там нету. codepen.io/andrejsharapov/pen/jJXEGq
    – Randall
    25 окт 2019 в 11:42

2 ответа 2

8

Вроде похоже:

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>

18
  • 1
    @АлексейГринев я не особо понял =) 25 окт 2019 в 13:35
  • 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
6

Извиняюсь что запоздал с ответом, решал технические вопросы, ваш пример полностью сделан на 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

4
  • Нет, всё таки не так получилось, автоматический подгон на JS в вашем примере очень кстати, нужно учитывать многие моменты. И очень непонятно почему на JsFiddle отображается нормально, но не здесь в выполнении кода.
    – MoloF
    25 окт 2019 в 12:41
  • 1
    Но в целом - очень даже похоже 25 окт 2019 в 12:42
  • @StrangerintheQ В целом может и не плохо, но мне не понравилось как я выполнил это :<
    – MoloF
    25 окт 2019 в 12:46
  • Пожалуйста, помогите натянуть ваш код на мой codepen.io/developclup/pen/JjjNgjd 28 окт 2019 в 6:15

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.