Динамичное меню и кнопка "вверх"
При загрузке страницы меню плавно выпадает сверху, при скролле вниз так же плавно уходит вверх + появляется кнопка «Вверх».
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Веб-страница на Bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
}
.menu {
transition: top 0.3s;
}
.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
background: grey;
border: none;
border-radius: 50%;
color: white;
width: 50px;
height: 50px;
font-size: 20px;
cursor: pointer;
}
footer {
background: white;
padding: 10px 0;
text-align: left;
bottom: 0;
width: 100%;
}
.content {
margin-top: 60px; /* Отступ для фиксированного меню */
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg menu fixed-top bg-white">
<a class="navbar-brand" href="#">Мой сайт</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link text-muted font-weight-bold" href="#">Главная</a></li>
<li class="nav-item"><a class="nav-link text-muted font-weight-bold" href="#">Дизайн</a></li>
<li class="nav-item"><a class="nav-link text-muted font-weight-bold" href="#">Музыка</a></li>
<li class="nav-item"><a class="nav-link text-muted font-weight-bold" href="#">Хобби</a></li>
</ul>
</div>
</nav>
<div class="content">
<div class="container">
<h1>Добро пожаловать</h1>
<p><img src="https://via.placeholder.com/800x300" class="img-fluid" alt="Заглушка изображения"></p>
<p>Это текстовый заглушка. Здесь может быть Ваш текст.</p>
<p><img src="https://via.placeholder.com/800x300" class="img-fluid" alt="Заглушка изображения"></p>
<p>Это текстовый заглушка. Здесь может быть Ваш текст.</p>
<p><img src="https://via.placeholder.com/800x300" class="img-fluid" alt="Заглушка изображения"></p>
<p>Это текстовый заглушка. Здесь может быть Ваш текст.</p>
</div>
</div>
<button class="scroll-to-top" onclick="scrollToTop()">↑</button>
<footer>
<div class="container">
<p>© <span id="current-year"></span>. Все права защищены.</p>
<p>example@example.com</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
let lastScrollTop = 0;
const navbar = document.querySelector('.menu');
const scrollToTopButton = document.querySelector('.scroll-to-top');
let buttonVisible = false; // Флаг видимости кнопки
window.addEventListener('scroll', function() {
let st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop) {
// Прокрутка вниз
navbar.style.top = '-60px'; // скрыть меню
if (!buttonVisible) {
scrollToTopButton.style.display = 'block'; // показать кнопку
buttonVisible = true;
}
} else {
// Прокрутка вверх
navbar.style.top = '0'; // показать меню
if (buttonVisible) {
scrollToTopButton.style.display = 'none'; // скрыть кнопку
buttonVisible = false;
}
}
lastScrollTop = st <= 0 ? 0 : st; // Для мобильных устройств или отрицательной прокрутки
});
function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
buttonVisible = false; // Скрыть кнопку после прокрутки
scrollToTopButton.style.display = 'none'; // скрыть кнопку
}
// Установка текущего года в футере
document.getElementById('current-year').innerText = new Date().getFullYear();
</script>
</body>
</html>Плавное меню при загрузке страницы
Вот пример кода на HTML и CSS, который создает верхнее меню, плавно опускающееся сверху при загрузке страницы:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Плавное меню</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.menu {
position: fixed;
top: -100px; /* Начальная позиция вне экрана */
left: 0;
right: 0;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
transition: top 0.5s ease; /* Плавный переход */
}
.menu.show {
top: 0; /* Конечная позиция */
}
</style>
</head>
<body>
<div class="menu" id="menu">
Меню
</div>
<script>
window.onload = function() {
const menu = document.getElementById('menu');
menu.classList.add('show'); // Добавляем класс для показа меню
};
</script>
</body>
</html>Объяснение:
HTML: Создается фиксированное меню, которое изначально находится вне экрана.
CSS: Используется свойство transition для плавного изменения позиции меню.
JavaScript: При загрузке страницы добавляется класс show, который изменяет позицию меню, заставляя его плавно опуститься сверху.
Проверка валидности email на PHP 8.2
<?php
function isValidEmail(string $email): bool {
return filter_var($email, FILTER_VALIDATE_EMAIL) !== false;
}
// Пример использования
$email = "example@example.com";
if (isValidEmail($email)) {
echo "Email корректен.";
} else {
echo "Email некорректен.";
}
?>В этом коде используется функция filter_var с фильтром FILTER_VALIDATE_EMAIL, что позволяет эффективно проверять корректность email-адреса.
Если не работает L2TP/IPSec на Windows 10
Не удалось установить связь по сети между компьютером и VPN-сервером, так как удаленный сервер не отвечает. Возможная причина: одно из сетевых устройств (таких как брандмауэры, NAT, маршрутизаторы и т.п.) между компьютером и удаленным сервером не настроено для разрешения VPN-подключений. Чтобы определить, какое устройство вызывает эту проблему, обратитесь к администратору или поставщику услуг.
Если у вас при подключении отображается такая же ошибка, решение давно известно.
Уведомления с кнопкой «Больше не показывать»
<div id="alert" class="alert alert-info hide" style="overflow: hidden;">
<p style="margin-bottom: 24px;">Уведомление, которое можно закрыть!</p>
<button type="button" class="btn btn-info pull-right" data-dismiss="alert">
Больше не показывать</button>
</div>Скрипт, который будет сохранять состояние в Local Strorage:
if (!localStorage.getItem('alert')) {
$('#alert').removeClass('hide');
$('#alert').on('closed.bs.alert', function() {
localStorage.setItem('alert', 1);
});
}Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере. Что в них важно – данные, которые в них записаны, сохраняются после обновления страницы (в случае sessionStorage ) и даже после перезапуска браузера (при использовании localStorage ).
Он не имеет ограничений по времени хранения, может быть очищен пользователем вручную или браузером при переполнении автоматически (браузеры на основе движка WebKit, например Safari, очищают localStorage , если к нему не обращались в течение 7 дней). Максимальный объем данных ограничен размером 5MB.