Создание сайта с фиксированным боковым меню может быть полезным, чтобы пользователи всегда имели доступ к навигации, даже когда прокручивают страницу. В этой статье мы покажем, как создать сайт с фиксированным боковым меню, используя HTML, CSS и JavaScript. 😉
Начнем с разметки HTML
Для начала нам нужно создать структуру нашего сайта с помощью HTML. Вот пример такой структуры:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Сайт с фиксированным боковым меню</title>
<!-- Подключаем ваш CSS файл -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<!-- Здесь может быть ваш логотип и верхнее меню -->
</header>
<main>
<aside>
<!-- Здесь будет наше фиксированное боковое меню -->
</aside>
<section>
<!-- Здесь будет основное содержимое страницы -->
</section>
</main>
<footer>
<!-- Здесь будет ваш подвал -->
</footer>
<!-- Подключаем ваш JavaScript файл -->
<script src="scripts.js"></script>
</body>
</html>
Стилизация с помощью CSS
Теперь, когда у нас есть структура сайта, нужно стилизовать его с помощью CSS. Ниже пример кода, который можно использовать для стилизации бокового меню и основного контента:
/* Общие стили для body и header */
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
/* Стили для основного контента и меню */
main {
display: flex;
}
aside {
background-color: #f1f1f1;
width: 250px;
padding: 1rem;
position: fixed;
height: 100%;
overflow: auto;
}
section {
margin-left: 250px;
padding: 1rem;
}
/* Стили для подвала */
footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
Добавление JavaScript (опционально)
Если вы хотите добавить некоторую интерактивность к вашему фиксированному боковому меню, например, чтобы оно скрывалось при клике на кнопку, вы можете использовать JavaScript. Вот пример такого кода:
document.addEventListener("DOMContentLoaded", function() {
const toggleMenuButton = document.createElement("button");
toggleMenuButton.textContent = "☰";
toggleMenuButton.style.position = "fixed";
toggleMenuButton.style.top = "1rem";
toggleMenuButton.style.left = "1rem";
toggleMenuButton.style.zIndex = "1000";
toggleMenuButton.addEventListener("click", function() {
const aside = document.querySelector("aside");
aside.style.display = aside.style.display === "none" ? "block" : "none";
});
document.body.appendChild(toggleMenuButton);
});
Теперь вы знаете, как создать сайт с фиксированным боковым меню, используя HTML, CSS и немного JavaScript. Удачи в вашей веб-разработке! 🚀
Добавить комментарий