Различия

Показаны различия между двумя версиями страницы.

--- software:development:demo:cms:ucms:appendix:appendix_css:nav:responsive [2026/04/15 12:12] – создано VladPolskiy
+++ software:development:demo:cms:ucms:appendix:appendix_css:nav:responsive [2026/04/15 12:16] (текущий) – VladPolskiy
@@ Строка 3: / Строка 3: @@
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<!-- Загрузите библиотеку значков, чтобы отобразить меню гамбургера (бары) на маленьких экранах -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <style>
-body {
+/* Добавить черный цвет фона для верхней навигации */
-  margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
-}
 .topnav {
+  background-color: #333;
   overflow: hidden;
-  background-color: #333;
 }
+/* Стиль ссылок внутри панели навигации */
 .topnav a {
   float: left;
@@ Строка 25: / Строка 23: @@
 }
+/* Изменение цвета ссылок при наведении курсора */
 .topnav a:hover {
   background-color: #ddd;
@@ Строка 30: / Строка 29: @@
 }
+/* Добавить активный класс, чтобы выделить текущую страницу */
 .topnav a.active {
-  background-color: #04AA6D;
+  background-color: #4CAF50;
   color: white;
 }
+/* Скрыть ссылку, которая должна открывать и закрывать верхнюю навигационную панель на небольших экранах */
 .topnav .icon {
   display: none;
 }
+/* Если ширина экрана меньше 600 пикселей, скройте все ссылки, кроме первой ("Главная"). Показать ссылку, которая содержит должен открыть и закрыть верхнюю навигационную панель topnav (.icon) */
 @media screen and (max-width: 600px) {
   .topnav a:not(:first-child) {display: none;}
@@ Строка 47: / Строка 49: @@
 }
+/* Класс "responsive" добавляется в верхнюю навигационную панель используя JavaScript, когда пользователь нажимает на значок. Этот класс делает topnav хорошо выглядеть на небольших экранах (отображать ссылки по вертикали, а не по горизонтали) */
 @media screen and (max-width: 600px) {
   .topnav.responsive {position: relative;}
-  .topnav.responsive .icon {
+  .topnav.responsive a.icon {
     position: absolute;
     right: 0;
@@ Строка 80: / Строка 83: @@
 <script>
+/* Переключение между добавлением и удалением класса "responsive" в topnav, когда пользователь нажимает на значок */
 function myFunction() {
   var x = document.getElementById("myTopnav");
@@ Строка 97: / Строка 101: @@
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<!-- Загрузите библиотеку значков, чтобы отобразить меню гамбургера (бары) на маленьких экранах -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <style>
-body {
+/* Добавить черный цвет фона для верхней навигации */
-  margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
-}
 .topnav {
+  background-color: #333;
   overflow: hidden;
-  background-color: #333;
 }
+/* Стиль ссылок внутри панели навигации */
 .topnav a {
   float: left;
@@ Строка 119: / Строка 121: @@
 }
+/* Изменение цвета ссылок при наведении курсора */
 .topnav a:hover {
   background-color: #ddd;
@@ Строка 124: / Строка 127: @@
 }
+/* Добавить активный класс, чтобы выделить текущую страницу */
 .topnav a.active {
-  background-color: #04AA6D;
+  background-color: #4CAF50;
   color: white;
 }
+/* Скрыть ссылку, которая должна открывать и закрывать верхнюю навигационную панель на небольших экранах */
 .topnav .icon {
   display: none;
 }
+/* Если ширина экрана меньше 600 пикселей, скройте все ссылки, кроме первой ("Главная"). Показать ссылку, которая содержит должен открыть и закрыть верхнюю навигационную панель topnav (.icon) */
 @media screen and (max-width: 600px) {
   .topnav a:not(:first-child) {display: none;}
@@ Строка 141: / Строка 147: @@
 }
+/* Класс "responsive" добавляется в верхнюю навигационную панель используя JavaScript, когда пользователь нажимает на значок. Этот класс делает topnav хорошо выглядеть на небольших экранах (отображать ссылки по вертикали, а не по горизонтали) */
 @media screen and (max-width: 600px) {
   .topnav.responsive {position: relative;}
-  .topnav.responsive .icon {
+  .topnav.responsive a.icon {
     position: absolute;
     right: 0;
@@ Строка 174: / Строка 181: @@
 <script>
+/* Переключение между добавлением и удалением класса "responsive" в topnav, когда пользователь нажимает на значок */
 function myFunction() {
   var x = document.getElementById("myTopnav");