Мобильная версияИтак, как следует из названия. Я работаю над школьным проектом. где мы хотим сделать адаптивный веб-дизайн. Я почти достиг цели нашей группы, но у меня есть еще одна проблема, которую, я надеюсь, Stackoverflow поможет мне решить.
Итак, в начальной загрузке 5. мы хотим, чтобы на небольших устройствах отображалось меню Burger. и покажем нашу панель навигации. но кажется, что когда я нажимаю на меню Burgermenu, оно разворачивается, а не раскрывается. и в результате наше раскрывающееся меню и функция закрытия скрыты в окне веб-сайта.
HTML/Bootstrap:
@import url('https://fonts.googleapis.com/css2?famil ... splay=swap'); [*] Главная
[*] ЛОББИ [*] РАСПОРЯЖЕНИЕ [*] ГАЛЕРЕЯ [*] Tilmeld Dig [*] КОНТАКТЫ Задание для утренней встречи ДжиммиЭтот сайт предназначен для образовательных целей
CSS:
/* Этот файл редактируется ChatGPT. https://chat.openai.com/share/0db9a9ce- ... 845b4f3c6c */ @import url('https://fonts.googleapis.com/css2?famil ... splay=swap'); /* Сбрасываем поля и отступы и устанавливаем семейство шрифтов */ * { маржа: 0; заполнение: 0; размер коробки: граница-коробка; семейство шрифтов: «Монтсеррат», без засечек; } /* Убедитесь, что тело и HTML занимают весь экран */ HTML, тело { высота: 100%; } /* Удалить поле по умолчанию в теле */ тело { маржа: 0; } /* Стиль элемента заголовка */ заголовок { цвет фона: #171d18; ширина: 100%; высота: 100 пикселей; /* Корректируем по мере необходимости */ цвет: #f9fbf3; /* Цвет текста для контраста */ дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: пространство между; отступ: 0 20 пикселей; /* Добавляет отступы слева и справа от содержимого */ } /* Настраиваем цвет навигационной панели */ nav.navbar { цвет фона: #171d18 !важно; /* Цвет фона навигационной панели */ } /* Настраиваем цвет текста на панели навигации */ nav.navbar а { цвет: #f9fbf3; /* Цвет текста в навигационной панели */ } /* Изменяем цвет фона кнопки меню гамбургера на черный */ .navbar-toggle { цвет фона: #171d18; /* Черный цвет фона */ граница: нет; /* Удалить границу */ } /* Отрегулируйте отступы слева, чтобы освободить место для логотипа */ центр { отступ слева: 20 пикселей; /* Корректируем по мере необходимости */ } /* Настройки логотипа и навигации */ центр { дисплей: гибкий; вес шрифта: шарик; /* Сделайте текст жирным */ оправдание-содержание: гибкий старт; выровнять элементы: вправо; } /* Настройки элементов навигации */ навигация { поле: 0 10 пикселей; цвет: #f9fbf3; текстовое оформление: нет; } /* Удалить эффект наведения для цвета элементов навигации */ навигация а: наведите { цвет: наследовать !важно; /* Сохраняем тот же цвет у копыта */ текстовое оформление: нет; /* Удалить подчеркивание при наведении */ } /* Настраиваем цвет ссылки регистрации */ навигация a.signup { цвет фона: #ffffff; /* Белый цвет фона */ отступы: 5 пикселей 10 пикселей; /* Отрегулируйте отступы по мере необходимости */ цвет: #171d18; /* Цвет текста */ текстовое оформление: нет; дисплей: гибкий; /* Включает Flexbox */ выровнять-элементы: по центру; /* Центрировать по вертикали */ оправдание-содержание: центр; /* Центрировать по горизонтали */ } /* Настраиваем цвет выпадающего меню */ .выпадающее меню { цвет фона: #171d18 !важно; /* Сохраняем тот же цвет, что и цвет фона */ граница: сплошная 1 пиксель #3d4246; максимальная высота: 200 пикселей; z-индекс: 1000; ширина: авто; /* или определенную ширину по мере необходимости */ максимальная ширина: нет; /* или конкретную максимальную ширину, если необходимо */ позиция: абсолютная !важная; } /* Настраиваем цвет содержимого раскрывающегося меню */ .выпадающее меню a { цвет: #f9fbf3 !важно; /* Цвет текста в выпадающем меню */ вес шрифта: шарик; маржа: 0; заполнение: 0; отступ слева: 10 пикселей; /* Добавляем отступы слева (отрегулируйте по мере необходимости) */ } /* Удалить эффект наведения для цвета содержимого раскрывающегося меню */ .выпадающее меню a:hover { цвет: наследовать !важно; /* Сохраняем тот же цвет у копыта */ текстовое оформление: нет; /* Удалить подчеркивание при наведении */ маржа: 0; заполнение: 0; отступ слева: 10 пикселей; /* Добавляем отступ слева при наведении (отрегулируйте по мере необходимости) */ } .container-fluid { дисплей: гибкий; оправдание-содержание: пространство между; } /* Настройки логотипа */ .logo { поле справа: 10 пикселей; /* Джастер после бега */ } /* Переход к элементу навигации */ навигация { поле: 0 10 пикселей; цвет: #f9fbf3; текстовое оформление: нет; } /* Стиль для элемента нижнего колонтитула */ нижний колонтитул { выравнивание текста: по центру; отступ: 10 пикселей; цвет фона: #171d18; белый цвет; } Да, кстати, извините, что комментарии не на английском, а на датском.
Мы пытались поговорить с ChatGPT, который дал нам много интересного, меняется, но в 9/10 раз он ничего не делает. Последняя единица уничтожает нашу структуру и функцию раскрывающегося списка на экране LG.
Мы безуспешно пытались найти ответы в Интернете.
Мы пытались расспросить друзей, но поскольку мы работаем с Webdesign, а они нет, они не помогли.
Мы надеялись, что бургер-меню после некоторых изменений будет работать как задумано, но прорыва пока не произошло. Хотя у меня есть идея. и именно поэтому выпадающее меню, возможно, является причиной того, почему это каким-то образом происходит.
