Как создать адаптивную панель навигации с переключением на Темный и Светлый режим

Всем Привет! Сегодня вы узнаете как создать адаптивную панель навигации с Темным или Светлым режим используя HTML, CSS и JavaScript. Вы можете посмотреть видео демонстрацию, скопировать готовый код ниже, попробовать сверстать самому или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент. 

Интересной особенностью этого меню является то, что выбранная тема не изменится, если мы обновим страницу или снова откроем файл, и вы можете закрыть боковую панель, щелкнув любую область веб-страницы. Добавлена панель поиска в эту панель навигации, и эта панель навигации полностью адаптивна и отзывчива. 

Интересно в этом меню панели навигации то, что выбранный пользователем режим не изменится при повторном открытии страницы с обновленным файлом. Существует множество строк меню навигации, но эта панель навигации имеет некоторые расширенные функции с красивым пользовательским интерфейсом и дизайном UX.

Панель навигации — это горизонтальная часть, содержащая ссылки навигации по логотипу, расположенные в верхней части веб-страницы. 

Основная цель этой панели навигации — облегчить пользователям перенаправление с одной веб-страницы на другую.

Давайте бегло взглянем на данное изображение нашей строки меню навигации. 

В верхней части мы видим меню панели навигации. С правой стороны мы видим логотип, в центре несколько навигационных ссылок, а с левой стороны мы видим темный светлый режим и кнопку переключения панели поиска. На самом деле это облегченная версия навигационной панели, и, нажав кнопку переключения темного и светлого цвета, мы можем применить темный режим.

Как вы видели в видеоуроке, сначала мы увидели, что наше навигационное меню расположено в верхней части веб-страницы. В строке меню навигации мы видим логотип справа, несколько навигационных ссылок в центре и режим «день-ночь», а также кнопку переключения панели поиска слева.

Кроме того, я показал им, как панель поиска появляется и исчезает при нажатии кнопки переключения. Вы заметили? наш примененный режим (темный или светлый) не изменился, даже если я обновил веб-страницу или снова открыл файл.

Дизайн пользовательского интерфейса навигационного меню выполнен с использованием HTML и CSS, а функция переключения панели поиска и режима темного света я использовал некоторый код JavaScript, а для сохранения выбранного пользователем режима (темный свет) я использовал локальное хранилище.

Я надеюсь, что теперь вы можете легко создать эту панель меню навигации. Если у вас возникли трудности с созданием этой панели навигации, я предоставил весь HTML-код CSS и JavaScript для этой панели навигации ниже;

Чтобы получить следующий HTML-код CSS и JavaScript для панели навигации с функциями темного/светлого режима. Вам необходимо создать два файла: один — HTML-файл, а другой — CSS-файл. После создания этих двух файлов вы можете скопировать и вставить данные коды в свой документ. Вы также можете скачать все файлы исходного кода с помощью данной кнопки загрузки.