Как скрыть NavBar моего сайта при использовании в мобильном телефоне с реагировать?

Question

Я создаю веб-сайт с реагированием и хочу достичь чего-то вроде Instagram. Поэтому, когда пользователь заходит на этот веб-сайт на ПК, он должен видеть панель навигации, а если пользователь обращается к ней по телефону Thier, то он должен видеть навигацию в нижней вкладке, а панель навигации должна быть скрыта. Я также прилагаю свои дизайнерские фотографии как для настольного компьютера, так и для мобильного интерфейса, чтобы вы, ребята, могли иметь лучшее представление. Кроме того, я не использую какую-либо библиотеку пользовательского интерфейса, а просто простые реагирующие файлы.

Answer 1

Вместо того, чтобы делать что-либо другое, я бы порекомендовал вам использовать медиа-запрос CSS.Это сделает вашу жизнь легкой.Вам просто нужно указать, какую часть кода вы хотите скрыть.Предположим, что класс вашей панели навигации будет просто помещен, как показано ниже в медиа-запросе, и поместит CDN начальной загрузки на вашу страницу.т.е.

 @media query("Size for what you want to hide navbar)(i.e. 480px or 320px)
          .nav {
               visibility; hidden;
           }

Answer 2

Самым простым решением для этого было бы иметь две версии навигационных панелей.

Nav и NavMobile.

Вы можете использовать медиа-запросы CSS, чтобы скрыть / показать их в соответствии с минимальным / максимальным размером экрана, это одна из самых распространенных практик