Добавить меню по дизайн макету на сайт
Ссылка на макет: https://www.figma.com/design/y0s0iwMazod6iP7wqzx12...
Наш сайт: https://h2h.ee/
Дизайн
- Чистый и современны дизайн прим. Youla.ru с единой цветовой схемой с текущим сайтом.
- Иконка меню вверху слева
- Всплывающее окно
- Категории с раскрывающимися подкатегориями
- Ссылки на разделы (Профиль Избранное Сообщения)
- Заметная кнопка “Разместить обьявление”
- Изображение профиля и имя пользователя, если авторизован
- Кнопка “Войти” если неавторизован.
- Выделение раздела в меню, где находится пользователь сейчас.
Разработка
- Динамическая загрузка категорий и подкатегорий из базы данных с помощью моделей Lavarel.
- Подержка многоуровневых категорий с рекурсивным рендерингом.
- Плавная анимация открытия и закрытия с помощью CSS / JavaScript
- Отсутствие задержек в работе, особенно на мобильных.
Тех. требования
Backend
- Использования мршрутов и контроллеров Lavarel для получения данных в меню.
- Предоставте конечную точку API для динамической загрузки категорий при использовании подхода на основе AJAX.
Frontend
- Используйте Vue.js или аналогичный фреймворк (если он уже является частью проекта) для динамической интерактивности.
- Если Vue.js не используется, реализуйте фукциональностью с помощью стандартного JavaScript или jQuery.
CSS
- Созавайте модульные и повторно используемые стили, используя CSS/SCSS.
- Следуйте методологии BEM для имен классов (если применимио).
Обработка ошибок
- Отображение удобного для пользователя сообщения или резервного меню в случая ошибок получения данных.
- Убедитесь, что функциональность доступна даже в случае сбоя JavaScript.
Тестирование
- Выполните коссбраузерное тестирование (Chrome, Firefox, Safari, Edge)
- Проверить адаптивность (Десктоп Планшет Мобильные)
- Проверка плавной работы на слабых и старых устройствах.
Результаты
- Полнофукциональное меню, интегрированное в сайт Lavarel.
- Модульный код (Фронт и Бекенд) с комментами и документацией.
- Адаптивный дизайн протестированный и оптимизированный для всех устройств.
- Готовые к развертыванию файлы передаются в систему контроля версий (Например Git)
- Краткое руководство о том, как управлять содержимым меню.
(Например добавлять / удалять категории)
Наш сайт: https://h2h.ee/
Дизайн
- Чистый и современны дизайн прим. Youla.ru с единой цветовой схемой с текущим сайтом.
- Иконка меню вверху слева
- Всплывающее окно
- Категории с раскрывающимися подкатегориями
- Ссылки на разделы (Профиль Избранное Сообщения)
- Заметная кнопка “Разместить обьявление”
- Изображение профиля и имя пользователя, если авторизован
- Кнопка “Войти” если неавторизован.
- Выделение раздела в меню, где находится пользователь сейчас.
Разработка
- Динамическая загрузка категорий и подкатегорий из базы данных с помощью моделей Lavarel.
- Подержка многоуровневых категорий с рекурсивным рендерингом.
- Плавная анимация открытия и закрытия с помощью CSS / JavaScript
- Отсутствие задержек в работе, особенно на мобильных.
Тех. требования
Backend
- Использования мршрутов и контроллеров Lavarel для получения данных в меню.
- Предоставте конечную точку API для динамической загрузки категорий при использовании подхода на основе AJAX.
Frontend
- Используйте Vue.js или аналогичный фреймворк (если он уже является частью проекта) для динамической интерактивности.
- Если Vue.js не используется, реализуйте фукциональностью с помощью стандартного JavaScript или jQuery.
CSS
- Созавайте модульные и повторно используемые стили, используя CSS/SCSS.
- Следуйте методологии BEM для имен классов (если применимио).
Обработка ошибок
- Отображение удобного для пользователя сообщения или резервного меню в случая ошибок получения данных.
- Убедитесь, что функциональность доступна даже в случае сбоя JavaScript.
Тестирование
- Выполните коссбраузерное тестирование (Chrome, Firefox, Safari, Edge)
- Проверить адаптивность (Десктоп Планшет Мобильные)
- Проверка плавной работы на слабых и старых устройствах.
Результаты
- Полнофукциональное меню, интегрированное в сайт Lavarel.
- Модульный код (Фронт и Бекенд) с комментами и документацией.
- Адаптивный дизайн протестированный и оптимизированный для всех устройств.
- Готовые к развертыванию файлы передаются в систему контроля версий (Например Git)
- Краткое руководство о том, как управлять содержимым меню.
(Например добавлять / удалять категории)