23.04.2024
Написал скрипт движения бокового меню
document.addEventListener('DOMContentLoaded', function() {
const moreLink = document.getElementById('more');
const sidebar = document.querySelector('.sidebar')
moreLink.addEventListener('click',function(e) {
e.preventDefault();
sidebar.classList.toggle('show');
});
});
function closeSidebar () {
const sidebar = document.querySelector('.sidebar');
sidebar.classList.remove('show');
}
document.addEventListener('DOMContentLoaded', function() {
const moreLink = document.getElementById('morem');
const sidebar = document.querySelector('.sidebar')
moreLink.addEventListener('click',function(e) {
e.preventDefault();
sidebar.classList.toggle('show');
});
});
Прописал кнопку меню <li><a id="more">Меню</a></li>
В результате кнопка появилась
При наводе мыши
В статичном состоянии меню выглядит так
При наведении мыши на пункт в меню
Но оно не закрываться, и при клике на пункт меню браузер не открывает ссылку.
Где-то я ошибся
Нашёл причину
В 26 строчку дописал onclick="closeSidebar() получилось так:
<div class="sidebar" onclick="closeSidebar()">
И поставил в кавычках знак № вместо#
И всё заработало, он выдал ожидаемое сообщение
Так он среагировал потому что нет страницы на которую пошёл.
Забыл сделать одну вещь
Чтобы это сделать, в конце стилей написал этот кусочек кода.
И изменил 79 строчку
Такой код был до
А вот теперь он такой после изменений
Изменения не видимы, эту вещь сделал на всякий случай: Лучше перебдеть чем недобдеть.
Осталось скрыть кнопку меню, и сделать так чтобы она появлялась только в мобильном режиме.
А кнопки: Блог Проекты Контент О сайте должны пропадать из шапки сайта в мобильном режиме. И появятся только на компьютере.
Для этого нужно делать медиазапрос
Вот его тело:
Дописал стиль заранее, его надо будет потом перенести в в тело запроса
Открываем Файл с HTML над главным меню в теге ul Ставим пробел
И пишем туда <div class="hidepc">
Ставим пробел тут перед кнопкой меню.
Ставим туда </Div>
Ставим курсор рядом с каждым тегом <li>, и нажимаем пробел 3раза, в итоге должно быть так когда кликнешь по диву мышкой.
Сохраняем и заходим в браузер чтобы посмотреть результат.
Можно оставить и такой вариант шапки, но я делаю именно мобильное меню Теперь обратно идём в файл стилей и переносим стиль скрытия в тело запроса.
Копируем написанный стиль
Нажимаем пробел три раза
вставляем стиль в тело запроса
Тот что сверху удаляем
Ставим курсор в конец внутренний скобки
Нажимаем на клаве Enter 2раза
Пишем .hidem {} и ставим курсор внутри скобок
нажимаем Enter 1 раз, должно быть так
Пишем display: block;
Это мы написали запрос внутри запроса на открытие
Ставим курсор перед запросом
И пишем код
.hidem {
display: none;
}
Тут он на скрине.
В HTML Файле ставим курсор сюда нажимаем Enter Чтобы сделать новую строку
Пишем туда <div class="hidem">
После тега <li> ставим курсор. Чтобы сделать пустую строчку.
Ставим туда </div> и сдвигаем его
И тег <li> Тоже сдвигаем
Сохраняем и смотрим результат это Режим компьютера
Это мобильный
Всё
Цель достигнута. Код HTML в итоге такой
Переходим к выпадающему списку при наведении на кнопку контент