Вопрос или проблема
Я создаю совершенно новую мобильную версию одного из моих сайтов. И я решил, что навигация будет осуществляться с помощью кнопки «гамбургер», которая заставляет всю страницу сдвигаться вправо, открывая список навигационных ссылок под ней.
Я думал, что основной контент каждой страницы будет загружаться нормально, но я заставлю JavaScript загружать контент навигации отдельно, как только основная страница завершит загрузку. Таким образом, его можно будет кэшировать отдельно и не загружать при каждой загрузке страницы (на самом деле, я также думал использовать HTML5 веб-хранение, чтобы загрузить данные и сохранять их в течение дня или около того, но это вторично).
Что меня останавливает, так это как заставить весь основной контент сдвинуться вправо, открывая то, что под ним, не меняя его ширину или что-то в этом роде. Я думаю, что это довольно простой эффект. Мне предложили использовать CSS-анимацию, вызываемую с помощью JS. Я люблю простой код, и это звучит просто, но я не уверен, как это реализовать.
К сожалению, у меня нет примера веб-приложения, чтобы показать вам. Если вам трудно представить то, что я объясняю, есть нативное приложение в App Store, которое имеет очень похожую навигацию, которую я пытаюсь повторить:
https://itunes.apple.com/us/app/wcvb-newscenter-5-boston/id501410335?mt=8
Примечание: У меня нет отношения к этому приложению или компании, я просто люблю, как их кнопка навигации «гамбургер» сдвигает их контент вправо, чтобы открыть навигацию. Они также немного сдвигают свою навигацию в этом действии. Я бы этого не делал. Я думаю, что мой контент будет выглядеть лучше, если навигация будет фиксирована и полностью скрыта основным контентом, и будет отображаться, когда вы нажимаете кнопку навигации.
Я не увидел продолжения этого вопроса, но концепция напомнила мне о том, что я видел здесь: https://www.w3schools.com/howto/howto_js_curtain_menu.asp
Пример показывает меню, которое накрывает весь экран, не влияя на саму страницу.
Ответ или решение
Создание мобильного веб-навигатора с помощью анимации сдвига страницы
В данном руководстве мы обсудим, как реализовать эффект сдвига всей страницы вправо при нажатии на кнопку «гамбургер», чтобы открыть навигационное меню под основным содержимым. Это позволит пользователям получать доступ к навигации, не загромождая экран, что особенно важно для мобильных устройств.
1. Подход к реализации
Для достижения требуемого эффекта мы будем использовать комбинацию HTML, CSS и JavaScript. Ваша идея загружать навигационное содержимое отдельно — это также эффективное решение, которое позволяет использовать кэширование и оптимизировать время загрузки. Мы рассмотрим базовую структуру кода, которая позволит вам создать подобный интерфейс.
2. Структура HTML
Начнем с простой HTML-структуры:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мобильное навигационное меню</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main-content">
<button id="hamburger">☰</button>
<h1>Основное содержание</h1>
<p>Это пример основного содержимого вашей страницы.</p>
</div>
<nav id="navigation">
<ul>
<li><a href="#link1">Ссылка 1</a></li>
<li><a href="#link2">Ссылка 2</a></li>
<li><a href="#link3">Ссылка 3</a></li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>3. Стилизационное оформление с помощью CSS
Теперь добавим стилизация в styles.css, чтобы сделать навигацию скрытой и настроить анимацию сдвига:
body {
margin: 0;
font-family: Arial, sans-serif;
}
#main-content {
transition: transform 0.3s ease;
position: relative;
z-index: 1;
}
#navigation {
position: fixed;
top: 0;
left: 0;
width: 250px; /* Ширина навигации */
height: 100%;
background: #333;
color: white;
transform: translateX(-100%); /* Скрываем навигацию */
transition: transform 0.3s ease;
z-index: 0; /* Помещаем под основное содержимое */
}
#navigation ul {
list-style: none;
padding: 0;
}
#navigation ul li {
padding: 15px 20px;
}
#navigation ul li a {
color: white;
text-decoration: none;
}4. Логика JavaScript для анимации
Чтобы добавить интерактивность, включим JavaScript в script.js:
document.getElementById("hamburger").addEventListener("click", function() {
const mainContent = document.getElementById("main-content");
const navigation = document.getElementById("navigation");
// Проверяем текущее состояние навигации
if (navigation.style.transform === "translateX(0%)") {
// Скрываем навигацию
navigation.style.transform = "translateX(-100%)";
mainContent.style.transform = "translateX(0%)";
} else {
// Показываем навигацию
navigation.style.transform = "translateX(0%)";
mainContent.style.transform = "translateX(250px)"; // Ширина навигации
}
});5. Оптимизация и улучшения
- Кэширование данных: Используйте HTML5 Web Storage (localStorage или sessionStorage) для хранения навигационных ссылок, чтобы экономить трафик и ускорить загрузку.
- Адаптивный дизайн: Убедитесь, что ваш сайт выглядит хорошо на всех устройствах путем применения медиа-запросов в CSS.
- Тестирование: Проверяйте производительность на различных мобильных устройствах для оптимальной работы.
Заключение
Используя вышеупомянутые техники, вы сможете создать интуитивно понятное и элегантное мобильное навигационное меню. Простая анимация сдвига значительно улучшит пользовательский опыт, предоставляя доступ к навигации без перегрузки основного контента. Не забывайте тестировать на разных устройствах, чтобы обеспечить согласованность и функциональность вашего веб-приложения.