diff --git a/files/ru/conflicting/learn/javascript/asynchronous/index.md b/files/ru/conflicting/learn/javascript/asynchronous/index.md
index 0d8ad6e4c258f6..43f11b6cfd3fd4 100644
--- a/files/ru/conflicting/learn/javascript/asynchronous/index.md
+++ b/files/ru/conflicting/learn/javascript/asynchronous/index.md
@@ -622,12 +622,3 @@ if (posX > width/2) {
Вот и все — все основы асинхронных циклов и интервалов рассмотрены в статье. Вы найдёте эти методы полезными во многих ситуациях, но постарайтесь не злоупотреблять ими! Поскольку они по-прежнему выполняются в основном потоке, тяжёлые и интенсивные колбэки (особенно те, которые управляют DOM) могут действительно замедлить страницу, если вы не будете осторожны.
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
-
-## В этом модуле
-
-- [Основные понятия асинхронного программирования](/ru/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Введение в асинхронный JavaScript](/ru/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [Объединённый асинхронный JavaScript: Таймауты и интервалы](/ru/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Graceful asynchronous programming with Promises](/ru/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Сделайте асинхронное программирование легче с async и await](/ru/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choosing the right approach](/ru/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/ru/conflicting/learn/javascript/asynchronous/introducing/index.md b/files/ru/conflicting/learn/javascript/asynchronous/introducing/index.md
index 840a0ee76e0ff2..e5833c95be839c 100644
--- a/files/ru/conflicting/learn/javascript/asynchronous/introducing/index.md
+++ b/files/ru/conflicting/learn/javascript/asynchronous/introducing/index.md
@@ -163,12 +163,3 @@ Main thread: Task A Task B
## Заключение
При проектировании современных программ все больше используется асинхронное программирование, чтобы программа имела возможность выполнять несколько операций в конкретный момент времени. Как только вы начнёте использовать новые, более мощные возможности API, вы обнаружите множество ситуаций, где решить нужную задачу можно только асинхронно. Раньше было сложно писать асинхронный код. До сих пор, нужно время, чтобы привыкнуть к такому подходу, но процесс стал намного легче. Далее, в этом разделе, мы будем глубже исследовать вопрос, когда же асинхронный код необходим и как спроектировать программу, чтобы избежать проблем, описанных выше.
-
-## В этом модуле
-
-- [General asynchronous programming concepts](/ru/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Introducing asynchronous JavaScript](/ru/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [Cooperative asynchronous JavaScript: Timeouts and intervals](/ru/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Graceful asynchronous programming with Promises](/ru/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Making asynchronous programming easier with async and await](/ru/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choosing the right approach](/ru/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/ru/conflicting/learn/javascript/objects/classes_in_javascript/index.md b/files/ru/conflicting/learn/javascript/objects/classes_in_javascript/index.md
index 3cc674da283fad..042fdfb269a884 100644
--- a/files/ru/conflicting/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/ru/conflicting/learn/javascript/objects/classes_in_javascript/index.md
@@ -299,13 +299,3 @@ person1.bio()
В следующей статье мы рассмотрим прототипы объектов JavaScript.
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
-
-## В этом модуле
-
-- [Основы объекта](/ru/docs/Learn/JavaScript/Объекты/Основы)
-- [Объектно-ориентированный JavaScript для начинающих](/ru/docs/Learn/JavaScript/Объекты/Object-oriented_JS)
-- [Прототипы объектов](/ru/docs/Learn/JavaScript/Объекты/Object_prototypes)
-- [Наследование в JavaScript](/ru/docs/Learn/JavaScript/Объекты/Inheritance)
-- [Работа с данными JSON](/ru/docs/Learn/JavaScript/Объекты/JSON)
-- [Практика построения объектов](/ru/docs/Learn/JavaScript/Объекты/Object_building_practice)
-- [Добавление функций в нашу демонстрацию прыгающих шаров](/ru/docs/Learn/JavaScript/Объекты/Adding_bouncing_balls_features)
diff --git a/files/ru/learn/accessibility/accessibility_troubleshooting/index.md b/files/ru/learn/accessibility/accessibility_troubleshooting/index.md
index a231618e4a8dab..9e29a4ee9641ae 100644
--- a/files/ru/learn/accessibility/accessibility_troubleshooting/index.md
+++ b/files/ru/learn/accessibility/accessibility_troubleshooting/index.md
@@ -68,13 +68,3 @@ Can you list two more ideas for improvements that would make the website more ac
If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the [discussion thread for this exercise](https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691), or in the [#mdn](irc://irc.mozilla.org/mdn) IRC channel on [Mozilla IRC](https://wiki.mozilla.org/IRC). Try the exercise first — there is nothing to be gained by cheating!
{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}
-
-## В этом модуле
-
-- [Что такое доступность?](/ru/docs/Learn/Доступность/What_is_accessibility)
-- [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML)
-- [CSS и JavaScript доступность - лучшие практики](/ru/docs/Learn/Accessibility/CSS_and_JavaScript)
-- [Основы WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics)
-- [Доступность мультимедиа](/ru/docs/Learn/Accessibility/Multimedia)
-- [Мобильная доступность](/ru/docs/Learn/Accessibility/Mobile)
-- [Устранение проблем доступности](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting)
diff --git a/files/ru/learn/accessibility/css_and_javascript/index.md b/files/ru/learn/accessibility/css_and_javascript/index.md
index 91cfcd41349445..625a7eecd9c481 100644
--- a/files/ru/learn/accessibility/css_and_javascript/index.md
+++ b/files/ru/learn/accessibility/css_and_javascript/index.md
@@ -353,13 +353,3 @@ imgThumb.onblur = hideImg;
Далее WAI-ARIA!
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
-
-## В этом модуле
-
-- [Что такое доступность?](/ru/docs/Learn/Accessibility/What_is_accessibility)
-- [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML)
-- [CSS и JavaScript доступность - лучшие практики](/ru/docs/Learn/Accessibility/CSS_and_JavaScript)
-- [Основы WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics)
-- [Доступность мультимедиа](/ru/docs/Learn/Accessibility/Multimedia)
-- [Мобильная доступность](/ru/docs/Learn/Accessibility/Mobile)
-- [Устранение проблем доступности](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting)
diff --git a/files/ru/learn/accessibility/html/index.md b/files/ru/learn/accessibility/html/index.md
index 7a035959ae5b37..e5bc05b35010d5 100644
--- a/files/ru/learn/accessibility/html/index.md
+++ b/files/ru/learn/accessibility/html/index.md
@@ -512,13 +512,3 @@ HTML5 содержит два новых элемента — {{htmlelement("fig
Теперь вы должны хорошо разбираться в написании доступного HTML для большинства случаев. Наша статья про основы WAI-ARIA также заполнит пробелы в знаниях, но эта статья посвящена основам. Далее мы рассмотрим CSS и JavaScript, и как хорошо или плохое их использование влияет на доступность.
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
-
-## В этом модуле
-
-- [Что такое доступность?](/ru/docs/Learn/Доступность/What_is_accessibility)
-- [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML)
-- [CSS и JavaScript доступность - лучшие практики](/ru/docs/Learn/Accessibility/CSS_and_JavaScript)
-- [Основы WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics)
-- [Доступность мультимедиа](/ru/docs/Learn/Accessibility/Multimedia)
-- [Мобильная доступность](/ru/docs/Learn/Accessibility/Mobile)
-- [Устранение проблем доступности](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting)
diff --git a/files/ru/learn/accessibility/what_is_accessibility/index.md b/files/ru/learn/accessibility/what_is_accessibility/index.md
index bdadbd97d9dc59..f9fa4a1bdc4eba 100644
--- a/files/ru/learn/accessibility/what_is_accessibility/index.md
+++ b/files/ru/learn/accessibility/what_is_accessibility/index.md
@@ -148,13 +148,3 @@ slug: Learn/Accessibility/What_is_accessibility
Эта статья должна была дать вам полезный обзор специальных возможностей, показать, почему это так важно, и посмотреть, как вы можете вписать его в свой рабочий процесс. Теперь у вас также должна быть жажда узнать о деталях реализации, которые помогут сделать сайты доступными, и мы начнём с этого в следующем разделе, рассматривая, почему HTML является хорошей основой для доступности.
{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
-
-## В этом модуле
-
-- [Что такое доступность?](/ru/docs/Learn/Доступность/What_is_accessibility)
-- [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML)
-- [CSS и JavaScript доступность - лучшие практики](/ru/docs/Learn/Accessibility/CSS_and_JavaScript)
-- [Основы WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics)
-- [Доступность мультимедиа](/ru/docs/Learn/Accessibility/Multimedia)
-- [Мобильная доступность](/ru/docs/Learn/Accessibility/Mobile)
-- [Устранение проблем доступности](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting)
diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md
index a0f759953394f8..1f1fcfaf66ae1e 100644
--- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -293,24 +293,3 @@ background-position:
В следующем уроке мы узнаем, как Режим написания вашего документа взаимодействует с вашим CSS. Что происходит, если текст не перетекает слева направо?
{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
-
-## В этом модуле
-
-1. [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
-2. [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/Селекторы)
-
- - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors)
- - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/Селекторы/Attribute_selectors)
- - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements)
- - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators)
-
-3. [Модель коробки](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
-4. [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
-5. [Изменение направления текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
-6. [Перекрытие содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
-7. [Значения свойств CSS](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
-8. [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
-9. [Изображения, формы и прочие медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
-10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
-11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
-12. [Организация CSS-кода](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md
index 1814cbddd922ac..e9a2e73965a803 100644
--- a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md
+++ b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md
@@ -224,24 +224,3 @@ CSS предоставляет четыре специальных универ
Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете. Это может быть проблемой специфичности.
{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
-
-## В этом модуле
-
-1. [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
-2. [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B)
-
- - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors)
- - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors)
- - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements)
- - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators)
-
-3. [Модель коробки (The box model)](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
-4. [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
-5. [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
-6. [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
-7. [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
-8. [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
-9. [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
-10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
-11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
-12. [Организация вашей CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md
index ddfb9e9ebe4e9d..95291af0ae3586 100644
--- a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md
+++ b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md
@@ -75,19 +75,3 @@ slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путём: спросив в [теме обсуждения об этом упражнении](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682), или в канале [#mdn](irc://irc.mozilla.org/mdn) IRC на [Mozilla IRC](https://wiki.mozilla.org/IRC). Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путём обмана!
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
-
-## В этом модуле
-
-- [Вступление в CSS](/ru/docs/Learn/CSS/First_steps)
-- [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
-- [Синтаксис CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured)
-- [Введение в селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors)
-- [Простые селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
-- [Селекторы по атрибутам](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
-- [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
-- [Комбинаторы и множественные селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
-- [CSS значения и единицы](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
-- [Каскадность и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
-- [Блочная модель](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
-- [Отладка CSS](/ru/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS)
-- [Задание: Основы понимания CSS](/ru/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension)
diff --git a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md
index d4de0c3e210a1e..9ca9ff7af448a6 100644
--- a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md
+++ b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md
@@ -65,24 +65,3 @@ slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о [псевдоклассах и псевдоэлементах](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements).
{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}
-
-## В этом модуле
-
-1. [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
-2. [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B)
-
- - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors)
- - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors)
- - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements)
- - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators)
-
-3. [Модель коробки (The box model)](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
-4. [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
-5. [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
-6. [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
-7. [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
-8. [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
-9. [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
-10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
-11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
-12. [Организация вашей CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.md b/files/ru/learn/css/building_blocks/selectors/combinators/index.md
index fd3d49584573ce..d8ccf5b40a86e7 100644
--- a/files/ru/learn/css/building_blocks/selectors/combinators/index.md
+++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.md
@@ -85,24 +85,3 @@ ul > li[class="a"] {
Это последний раздел в наших уроках по селекторам. Далее мы перейдём к другой важной части CSS — [CSS модель коробки](/ru/docs/Learn/CSS/Building_blocks/The_box_model).
{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}
-
-## В этом модуле
-
-1. [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
-2. [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B)
-
- - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors)
- - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors)
- - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements)
- - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators)
-
-3. [Модель коробки](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
-4. [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
-5. [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
-6. [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
-7. [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
-8. [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
-9. [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
-10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
-11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
-12. [Организация вашей CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/selectors/index.md b/files/ru/learn/css/building_blocks/selectors/index.md
index f23a5d92a3f8ad..311d01d8bad5fe 100644
--- a/files/ru/learn/css/building_blocks/selectors/index.md
+++ b/files/ru/learn/css/building_blocks/selectors/index.md
@@ -171,24 +171,3 @@ article > p {
| [Селектор дочерних элементов](/ru/docs/Web/CSS/Child_combinator) | `article > p` | [Селектор дочерних элементов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%9a%d0%be%d0%bc%d0%b1%d0%b8%d0%bd%d0%b0%d1%82%d0%be%d1%80) |
| [Смежные селекторы](/ru/docs/Web/CSS/Adjacent_sibling_combinator) | `h1 + p` | [Смежные селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%bc%d0%b5%d0%b6%d0%bd%d1%8b%d0%b5_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b) |
| [Селектор братских элементов](/ru/docs/Web/CSS/General_sibling_combinator) | `h1 ~ p` | [Селектор братских элементов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%91%d1%80%d0%b0%d1%82%d1%81%d0%ba%d0%b8%d0%b5_%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d1%8b) |
-
-## В этом модуле
-
-1. [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
-2. [CSS-селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors)
-
- - [Селекторы по типу, классу и идентификатору](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
- - [Селекторы атрибутов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
- - [Псевдоклассы, псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
- - [Комбинации селекторов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
-
-3. [Блоки в CSS](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
-4. [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
-5. [Изменение направления текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
-6. [Перекрытие содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
-7. [Значения свойств CSS](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
-8. [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
-9. [Изображения, формы и прочие медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
-10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
-11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
-12. [Организация CSS-кода](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
index 08f3e4744aa758..8e07fdc2f3e12d 100644
--- a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
+++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
@@ -174,24 +174,3 @@ article p:first-child::first-line {
| {{ Cssxref("::spelling-error") }} | Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером. |
{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}
-
-## В этом модуле
-
-1. [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
-2. [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B)
-
- - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors)
- - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors)
- - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements)
- - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators)
-
-3. [Модель коробки](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
-4. [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
-5. [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
-6. [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
-7. [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
-8. [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
-9. [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
-10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
-11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
-12. [Организация вашей CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)[](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
index 82abeb9e5855ed..db71969529fca8 100644
--- a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
+++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
@@ -88,24 +88,3 @@ article *:first-child {
Мы продолжим изучение селекторов и рассмотрим [селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors).
{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}
-
-## В этом модуле
-
-1. [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
-2. [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B)
-
- - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors)
- - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors)
- - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements)
- - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators)
-
-3. [Модель коробки (The box model)](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
-4. [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
-5. [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
-6. [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
-7. [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
-8. [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
-9. [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
-10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
-11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
-12. [Организация вашей CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md
index 7597b215cb7da7..10b40f8dc93577 100644
--- a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md
+++ b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md
@@ -96,24 +96,3 @@ slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS
Этот урок дал вам краткое изложение некоторых ключевых проблем, с которыми вы можете столкнуться при определении размеров объектов в Интернете. Когда вы перейдете к [CSS раскладке](/ru/docs/Learn/CSS/CSS_layout), изменение размеров станет очень важным для освоения различных методов раскладки, поэтому перед тем, как двигаться дальше, стоит разобраться в концепциях.
{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
-
-## В этом модуле
-
-1. [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
-2. [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/Selectors)
-
- - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
- - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
- - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
- - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
-
-3. [Блочная модель(The box model)](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
-4. [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
-5. [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
-6. [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
-7. [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
-8. [Размеры в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
-9. [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
-10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
-11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
-12. [Организация вашей CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.md b/files/ru/learn/css/building_blocks/the_box_model/index.md
index bd97f5f26c2327..9bfaf3a0b5010b 100644
--- a/files/ru/learn/css/building_blocks/the_box_model/index.md
+++ b/files/ru/learn/css/building_blocks/the_box_model/index.md
@@ -287,24 +287,3 @@ html {
В следующем уроке мы рассмотрим, как можно использовать [фон и рамки](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders), чтобы сделать ваши простые блоки более интересными.
{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
-
-## В этом модуле
-
-1. [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
-2. [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/Selectors)
-
- - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
- - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
- - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
- - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
-
-3. [Блочная модель](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
-4. [Фон и рамки](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
-5. [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
-6. [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
-7. [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
-8. [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
-9. [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
-10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
-11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
-12. [Организация вашего CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)[](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/css_layout/floats/index.md b/files/ru/learn/css/css_layout/floats/index.md
index 82c56451a6bfd5..10e4bd1c8791db 100644
--- a/files/ru/learn/css/css_layout/floats/index.md
+++ b/files/ru/learn/css/css_layout/floats/index.md
@@ -668,18 +668,3 @@ body {
Теперь вы знаете все, что нужно знать о float в современной веб-разработке. См. Статью об [устаревших методах макета](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) устаревших методах макета для получения информации о том, как они использовались раньше, что может быть полезно, если вы работаете над старыми проектами.
{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
-
-## В этом модуле
-
-- [Введение в CSS макет](/ru/docs/Learn/CSS/CSS_layout/Introduction)
-- [Нормальный поток](/ru/docs/Learn/CSS/CSS_layout/Normal_Flow)
-- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
-- [Grid](/ru/docs/Learn/CSS/CSS_layout/Grids)
-- [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats)
-- [Позиционирование](/ru/docs/Learn/CSS/CSS_layout/Positioning)
-- [Макет с несколькими столбцами](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
-- [Отзывчивый дизайн](/ru/docs/Learn/CSS/CSS_layout/Responsive_Design)
-- [Руководство по медиавыражениям для новичков](/ru/docs/Learn/CSS/CSS_layout/Media_queries)
-- [Устаревшие методы макета](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
-- [Поддержка старых браузеров](/ru/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
-- [Базовая оценка понимания макета](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
diff --git a/files/ru/learn/css/css_layout/introduction/index.md b/files/ru/learn/css/css_layout/introduction/index.md
index 2a0bc24a5dc650..2537c7a01a20c0 100644
--- a/files/ru/learn/css/css_layout/introduction/index.md
+++ b/files/ru/learn/css/css_layout/introduction/index.md
@@ -746,16 +746,3 @@ body {
Эта статья предоставила короткое обобщение всех методов макетов о которых вам следует знать. Читайте далее для получения дополнительной информации по каждому методу!
{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
-
-## В этом модуле
-
-- [Введение в CSS вёрстку](/ru/docs/Learn/CSS/CSS_layout/Introduction)
-- [Нормальный поток](/ru/docs/Learn/CSS/CSS_layout/Normal_Flow)
-- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
-- [Grid](/ru/docs/Learn/CSS/CSS_layout/Grids)
-- [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats)
-- [Позиционирование](/ru/docs/Learn/CSS/CSS_layout/Positioning)
-- [Многоколоночный макет](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
-- [Устаревшие методы вёрстки](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
-- [Поддержка старых браузеров](/ru/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
-- [Оценка понимания базовых макетов](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.md b/files/ru/learn/css/css_layout/multiple-column_layout/index.md
index e4f9d69fc06c95..0f433e199dbb07 100644
--- a/files/ru/learn/css/css_layout/multiple-column_layout/index.md
+++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.md
@@ -518,18 +518,3 @@ body {
- [Применение макета с несколькими столбцами](/ru/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts)
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}
-
-## В этом модуле
-
-- [Введение в CSS макет](/ru/docs/Learn/CSS/CSS_layout/Introduction)
-- [Нормальный поток](/ru/docs/Learn/CSS/CSS_layout/Normal_Flow)
-- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
-- [Grid](/ru/docs/Learn/CSS/CSS_layout/Grids)
-- [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats)
-- [Позиционирование](/ru/docs/Learn/CSS/CSS_layout/Positioning)
-- [Макет с несколькими столбцами](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
-- [Отзывчивый дизайн](/ru/docs/Learn/CSS/CSS_layout/Responsive_Design)
-- [Руководство по медиавыражениям для новичков](/ru/docs/Learn/CSS/CSS_layout/Media_queries)
-- [Устаревшие методы макетов](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
-- [Поддержка старых браузеров](/ru/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
-- [Базовая оценка понимания макета](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
diff --git a/files/ru/learn/css/css_layout/normal_flow/index.md b/files/ru/learn/css/css_layout/normal_flow/index.md
index ee3cb7ede2a57d..9734a319d3419f 100644
--- a/files/ru/learn/css/css_layout/normal_flow/index.md
+++ b/files/ru/learn/css/css_layout/normal_flow/index.md
@@ -86,16 +86,3 @@ span {
Теперь, когда вы поняли нормальный поток и как браузер выкладывает содержимое по умолчанию, двигаемся дальше, чтобы понять как это изменить для создания макета согласно вашему дизайну.
{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
-
-## В этом модуле
-
-- [Введение в CSS layout](/ru/docs/Learn/CSS/CSS_layout/Introduction)
-- [Базовый поток](/ru/docs/Learn/CSS/CSS_layout/Normal_Flow)
-- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
-- [Сетка(Grid)](/ru/docs/Learn/CSS/CSS_layout/Grids)
-- [Поплавки]()
-- [Позиционирование(Positioning)](/ru/docs/Learn/CSS/CSS_layout/Positioning)
-- [Макет с несколькими столбцами](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
-- [Методы устаревших макетов](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
-- [Поддержка старых браузеров](/ru/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
-- [Фундаментальная оценка понимания макета](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
diff --git a/files/ru/learn/css/css_layout/positioning/index.md b/files/ru/learn/css/css_layout/positioning/index.md
index 68f331d89435c8..c439244ad40b15 100644
--- a/files/ru/learn/css/css_layout/positioning/index.md
+++ b/files/ru/learn/css/css_layout/positioning/index.md
@@ -665,18 +665,3 @@ dt {
- Справка свойства {{cssxref("position")}}.
- [Примеры практического позиционирования](/ru/docs/Learn/CSS/CSS_layout/Practical_positioning_examples), для дополнительных полезных идей
-
-## В этом модуле
-
-- [Введение в CSS макет](/ru/docs/Learn/CSS/CSS_layout/Introduction)
-- [Нормальный поток](/ru/docs/Learn/CSS/CSS_layout/Normal_Flow)
-- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
-- [Grid](/ru/docs/Learn/CSS/CSS_layout/Grids)
-- [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats)
-- [Позиционирование](/ru/docs/Learn/CSS/CSS_layout/Positioning)
-- [Макет с несколькими столбцами](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
-- [Отзывчивый дизайн](/ru/docs/Learn/CSS/CSS_layout/Responsive_Design)
-- [Руководство по медиавыражениям для новичков](/ru/docs/Learn/CSS/CSS_layout/Media_queries)
-- [Устаревшие методы макетов](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
-- [Поддержка старых браузеров](/ru/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
-- [Базовая оценка понимания макета](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
diff --git a/files/ru/learn/css/first_steps/getting_started/index.md b/files/ru/learn/css/first_steps/getting_started/index.md
index 468dc39039fc5a..f7c06c007eb37e 100644
--- a/files/ru/learn/css/first_steps/getting_started/index.md
+++ b/files/ru/learn/css/first_steps/getting_started/index.md
@@ -256,11 +256,3 @@ body h1 + p .special {
На следующем уроке мы рассмотрим структуру CSS.
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
-
-## В этом модуле
-
-1. [Что такое CSS?](/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS)
-2. [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started)
-3. [Как структурирован CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured)
-4. [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
-5. [Используя ваши новые знания](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge)
diff --git a/files/ru/learn/css/first_steps/how_css_is_structured/index.md b/files/ru/learn/css/first_steps/how_css_is_structured/index.md
index b8673babce6978..9db9a5ba1ccf6c 100644
--- a/files/ru/learn/css/first_steps/how_css_is_structured/index.md
+++ b/files/ru/learn/css/first_steps/how_css_is_structured/index.md
@@ -558,11 +558,3 @@ padding- left: 10px;
Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works) — мы рассмотрим этот процесс.
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
-
-## В этом модуле
-
-1. [Что такое CSS?](/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS)
-2. [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started)
-3. [Как структурирован CSS](/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS)
-4. [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
-5. [Использование ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge)
diff --git a/files/ru/learn/css/first_steps/how_css_works/index.md b/files/ru/learn/css/first_steps/how_css_works/index.md
index 7b563edf51cf12..a76c3aefd738e8 100644
--- a/files/ru/learn/css/first_steps/how_css_works/index.md
+++ b/files/ru/learn/css/first_steps/how_css_works/index.md
@@ -143,11 +143,3 @@ p {
Вы почти закончили модуль; осталось только одно. В следующей статье вы попрактикуетесь в [использовании ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge).
{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}
-
-## В этом модуле
-
-1. [Что такое CSS?](/ru/docs/Learn/CSS/First_steps/Что_такое_CSS)
-2. [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started)
-3. [Как структурирован CSS](/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS)
-4. [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
-5. [Использование ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge)
diff --git a/files/ru/learn/css/first_steps/styling_a_biography_page/index.md b/files/ru/learn/css/first_steps/styling_a_biography_page/index.md
index 7370b4a8169b1e..e5a0c3000a082d 100644
--- a/files/ru/learn/css/first_steps/styling_a_biography_page/index.md
+++ b/files/ru/learn/css/first_steps/styling_a_biography_page/index.md
@@ -65,10 +65,3 @@ slug: Learn/CSS/First_steps/Styling_a_biography_page
Поздравляем вас с завершением первого модуля! Теперь вы неплохо разбираетесь в CSS и можете разобраться в таблицах стилей. В следующем модуле, [Как устроен CSS](/ru/docs/Learn/CSS/Building_blocks), мы глубже разберёмся в некоторых аспектах языка.
{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
-
-## В этом модуле
-
-1. [Что такое CSS?](/ru/docs/Learn/CSS/First_steps/What_is_CSS)
-2. [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started)
-3. [Как структурирован CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
-4. [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
diff --git a/files/ru/learn/css/first_steps/what_is_css/index.md b/files/ru/learn/css/first_steps/what_is_css/index.md
index 8f975c5b843566..e9dc0bcdbdef8f 100644
--- a/files/ru/learn/css/first_steps/what_is_css/index.md
+++ b/files/ru/learn/css/first_steps/what_is_css/index.md
@@ -98,11 +98,3 @@ CSS ничем не отличается — он разработан груп
Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдём к [Началу работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started), где вы можете начать писать CSS самостоятельно.
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
-
-## В этом модуле
-
-1. [Что такое CSS?](/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS)
-2. [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps)
-3. [Как структурирован CSS](/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS)
-4. [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
-5. [Использование ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge)
diff --git a/files/ru/learn/css/styling_text/styling_lists/index.md b/files/ru/learn/css/styling_text/styling_lists/index.md
index afd1740be64b01..07b68446c7be46 100644
--- a/files/ru/learn/css/styling_text/styling_lists/index.md
+++ b/files/ru/learn/css/styling_text/styling_lists/index.md
@@ -411,11 +411,3 @@ window.addEventListener("load", drawOutput);
В плане стилизации списки сравнительно легко освоить, как только вы освоите несколько связанных базовых принципов и специфичные свойства. В следующей статье мы перейдём к методам стилизации ссылок.
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
-
-## В этом модуле
-
-- [Основы стилизации текста и шрифта](/ru/docs/Learn/CSS/Styling_text/Fundamentals)
-- [Стилизация списков](/ru/docs/Learn/CSS/Styling_text/Styling_lists)
-- [Стилизация ссылок](/ru/docs/Learn/CSS/Styling_text/Styling_links)
-- [Веб-шрифты](/ru/docs/Learn/CSS/Styling_text/Web_fonts)
-- [Вёрстка домашней страницы общественной школы](/ru/docs/Learn/CSS/Styling_text/Typesetting_a_homepage)
diff --git a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.md b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.md
index 995219cb0526e5..fa00624af1f91c 100644
--- a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.md
+++ b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.md
@@ -83,11 +83,3 @@ slug: Learn/CSS/Styling_text/Typesetting_a_homepage
- Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
-
-## В этом модуле
-
-- [Фундаментальная стилизация текста и шрифта](/ru/docs/Learn/CSS/Styling_text/Fundamentals)
-- [Стилизация списков](/ru/docs/Learn/CSS/Styling_text/Styling_lists)
-- [Стилизация ссылок](/ru/docs/Learn/CSS/Styling_text/Styling_links)
-- [Веб-шрифты](/ru/docs/Learn/CSS/Styling_text/Web_fonts)
-- [Задании: Стилизация школьного сайта](/ru/docs/Learn/CSS/Styling_text/Typesetting_a_homepage)
diff --git a/files/ru/learn/css/styling_text/web_fonts/index.md b/files/ru/learn/css/styling_text/web_fonts/index.md
index 2d9cbb84f1eceb..5cbd73d35aac67 100644
--- a/files/ru/learn/css/styling_text/web_fonts/index.md
+++ b/files/ru/learn/css/styling_text/web_fonts/index.md
@@ -165,11 +165,3 @@ font-family: "zantrokeregular", serif;
Теперь, когда вы ознакомились с нашими статьями об основах стилизации текста, пришло время проверить ваше понимание нашей оценкой модуля «Задание: стилизация школьного сайта».
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
-
-## В этом модуле
-
-- [Фундаментальная стилизация текста и шрифта](/ru/docs/Learn/CSS/Styling_text/Fundamentals)
-- [Стилизация списков](/ru/docs/Learn/CSS/Styling_text/Styling_lists)
-- [Стилизация ссылок](/ru/docs/Learn/CSS/Styling_text/Styling_links)
-- [Веб-шрифты](/ru/docs/Learn/CSS/Styling_text/Web_fonts)
-- [Задание: Стилизация школьного сайта](/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage)
diff --git a/files/ru/learn/forms/how_to_build_custom_form_controls/index.md b/files/ru/learn/forms/how_to_build_custom_form_controls/index.md
index 5aec1aaa9e9067..8f9b58e9902156 100644
--- a/files/ru/learn/forms/how_to_build_custom_form_controls/index.md
+++ b/files/ru/learn/forms/how_to_build_custom_form_controls/index.md
@@ -5,11 +5,9 @@ slug: Learn/Forms/How_to_build_custom_form_controls
{{LearnSidebar}}
-{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
-
-Существует много случаев, когда возможностей [стандартных виджетов HTML форм](/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC) недостаточно. Если вы хотите [придать лучший вид](/ru/docs/Advanced_styling_for_HTML_forms) каким-либо виджетам как, например, {{HTMLElement("select")}}, или вы хотите создать особое поведение виджета, то у вас нет другого выбора, кроме как создать собственные виджеты.
+Существует много случаев, когда возможностей стандартных элементов управления HTML форм недостаточно. Если вы хотите [придать лучший вид](/ru/docs/Advanced_styling_for_HTML_forms) каким-либо элементам управления (например, {{HTMLElement("select")}}) или вы хотите добавить особое поведение, то у вас нет другого выбора, кроме как создать собственные элементы управления.
-В этой статье мы рассмотрим как создать такой виджет. Для этого мы возьмём пример: переделка элемента {{HTMLElement("select")}} .
+В этой статье мы рассмотрим как создать собственный элемент управления. Для этого мы возьмём пример: переделка элемента {{HTMLElement("select")}} .
> **Примечание:** Мы сфокусируемся на создании виджетов, а не на том чтобы сделать код универсальным и многоразовым; поэтому будут использоваться некоторый нетривиальный JavaScript-код и манипуляции DOM в неизвестном контексте, что выходит за рамки этой статьи.
@@ -19,7 +17,7 @@ slug: Learn/Forms/How_to_build_custom_form_controls
В нашем примере мы будем переделывать элемент {{HTMLElement("select")}}. Вот такой результат мы хотим достичь:
-![The three states of a select box](/files/4481/custom-select.png)
+![Три состояния выпадающего списка](custom-select.png)
Этот скриншот показывает три основных состояния нашего виджета: нормальное состояние (слева); активное состояние (посередине) и развёрнутое состояние (справа).
@@ -87,11 +85,11 @@ slug: Learn/Forms/How_to_build_custom_form_controls
Cherry
-
+ как получить то значение, которое будет отправлено вместе с данными формы -->
Cherry
Lemon
Banana
@@ -283,297 +281,1007 @@ slug: Learn/Forms/How_to_build_custom_form_controls
}
```
-Итак, вот результат с нашими тремя состояниями:
-
-
-
-## Оживи свой виджет с JavaScript
+Итак, вот результат с нашими тремя состояниями ([исходный код можно посмотреть здесь](/ru/docs/Learn/Forms/How_to_build_custom_form_controls/Example_1)):
-Теперь, когда наш дизайн и структура готовы, мы можем написать код на JavaScript чтобы виджет действительно заработал.
+#### Основное состояние
-> **Предупреждение:** Следующий код представлен в образовательных целях и не может быть использован как-есть. Помимо прочего, как мы убедимся, он не пригоден для дальнейшего развития и не будет работать в устаревших браузерах. В нем также есть избыточность которую необходимо оптимизировать использования в рабочем режиме.
+```html hidden
+
+ Cherry
+
+
Cherry
+
Lemon
+
Banana
+
Strawberry
+
Apple
+
+
+```
-> **Примечание:** Создание многократно используемых виджетов может быть немного сложнее. [W3C Web Component draft](http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html) является одним из ответов на этот конкретный вопрос. [The X-Tag project](http://x-tags.org/) попытка реализовать эту спецификацию; пожалуйста, посмотрите этот проект.
+```css hidden
+.select {
+ position: relative;
+ display: inline-block;
+}
-### Почему он не работает?
+.select.active,
+.select:focus {
+ box-shadow: 0 0 3px 1px #227755;
+ outline-color: transparent;
+}
-Прежде чем мы начнём, запомните одну важную вещь о JavaScript: в браузере **это ненадёжная технология**. Когда вы создаёте пользовательские виджеты, вы будете полагаться на JavaScript потому что это необходимое звено для связки. Однако во многих случаях JavaScript невозможно запустить в браузере:
+.select .optList {
+ position: absolute;
+ top: 100%;
+ left: 0;
+}
-- Пользователь отключил JavaScript: Это самый редкий случай; сейчас очень мало людей отключают JavaScript.
-- Скрипт не загружается. Это один из самых распространённых случаев, особенно в мобильном мире, где сеть не очень надёжная.
-- Скрипт глючит.Вы должны всегда учитывать эту возможность.
-- Скрипт конфликтует со сторонним скриптом. Это может случиться со скриптами отслеживания или любыми букмарклетами (bookmarklets), которые использует пользователь.
-- Скрипт конфликтует с расширением браузера или зависит от него (такими как расширение [NoScript](https://addons.mozilla.org/fr/firefox/addon/noscript/) в Firefox, или расширение [NotScripts](https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn) в Chrome).
-- Пользователь использует устаревший браузер, и одна из требуемых функций не поддерживается. Это часто случается, когда вы используете передовые API.
+.select .optList.hidden {
+ max-height: 0;
+ visibility: hidden;
+}
-Из-за этого очень важно серьёзно подумать о том, что произойдёт, если JavaScript не сработает. Детальное рассмотрение этой проблемы выходит за рамки данной статьи, поскольку эта проблема тесно связана с тем, насколько универсальным и многократно используемым вы хотите сделать свой сценарий, но мы рассмотрим основы этого в нашем примере.
+.select {
+ font-size: 0.625em; /* 10px */
+ font-family: Verdana, Arial, sans-serif;
-В нашем примере, если наш JavaScript-код не работает, мы используем стандартный элемент {{HTMLElement("select")}}. Для этого, нам нужны две вещи.
+ box-sizing: border-box;
-Во-первых нам нужно добавить стандартный элемент {{HTMLElement("select")}} перед каждым использованием нашего пользовательского виджета. Это также необходимо, чтобы отправить данные из нашего пользовательского виджета вместе с остальными данными формы; подробнее рассмотрим это позже.
+ padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+ width: 10em; /* 100px */
-```html
-
-
-
-```
+ box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
-Во-вторых нам нужно два новых класса, чтобы скрыть ненужные элементы (то есть "настоящие" элементы {{HTMLElement("select")}}, если скрипт запустился, или наш пользовательский виджет, если скрипт не запустился). По умолчанию наш HTML код скрывает наш пользовательский виджет.
+ background: #f0f0f0;
+ background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
+}
-```css
-.widget select,
-.no-widget .select {
- /* Этот CSS селектор значит:
- - или мы присваиваем классу body значение "widget" и таким образом мы скрываем элемент {{HTMLElement("select")}}
- - или мы не меняем класс body, тогда класс body остаётся в значении "no-widget",
- и элементы, чей класс "select" будут скрыты */
- position: absolute;
- left: -5000em;
- height: 0;
+.select .value {
+ display: inline-block;
+ width: 100%;
overflow: hidden;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: top;
}
-```
-Теперь нам нужен модуль JavaScript, чтобы определить, запущен скрипт или нет. Этот модуль очень простой: если наш скрипт запустится во время загрузки страницы, то он удалит класс класс `no-widget` и добавит класс `widget`, чем поменяет видимость элемента {{HTMLElement("select")}} и нашего пользовательского виджета.
+.select::after {
+ content: "▼";
+ position: absolute;
+ z-index: 1;
+ height: 100%;
+ width: 2em; /* 20px */
+ top: 0;
+ right: 0;
-```js
-window.addEventListener("load", function () {
- document.body.classList.remove("no-widget");
- document.body.classList.add("widget");
-});
-```
+ padding-top: 0.1em;
-
+ box-sizing: border-box;
-> **Примечание:** Если вы действительно хотите сделать свой код универсальным и многоразовым, то вместо переключения классов гораздо лучше просто добавить класс элементам {{HTMLElement("select")}} чтобы их скрыть, и динамически добавлять дерево DOM представляющее пользовательский виджет после каждого элемента {{HTMLElement("select")}} на странице.
+ text-align: center;
-### Облегчение работы
+ border-left: 0.2em solid #000;
+ border-radius: 0 0.1em 0.1em 0;
-В коде который мы собираемся написать, для выполнения всех необходимых действий мы будем использовать стандартный DOM API. Однако, хотя поддержка DOM API в браузерах стала гораздо лучше, все ещё есть нюансы с устраевшеними браузерами (особенно со старым добрым Internet Explorer).
+ background-color: #000;
+ color: #fff;
+}
-Чтобы избежать неприятностей с устаревшими браузерами есть два способа: использовать отдельный фреймворк такой как [jQuery](http://jquery.com/), [$dom](https://github.com/julienw/dollardom), [prototype](http://prototypejs.org/), [Dojo](http://dojotoolkit.org/), [YUI](http://yuilibrary.com/), и т.п., или самостоятельно реализовать недостающие функции которые вам нужны (что можно легко сделать через условную загрузку, например используя библиотеку [yepnope](http://yepnopejs.com/)).
+.select .optList {
+ z-index: 2;
-Мы планируем использовать следующие функции (от самых рискованных до самых безопасных):
+ list-style: none;
+ margin: 0;
+ padding: 0;
-1. {{domxref("element.classList","classList")}}
-2. {{domxref("EventTarget.addEventListener","addEventListener")}}
-3. [`forEach`](/ru/docs/JavaScript/Reference/Global_Objects/Array/forEach) (This is not DOM but modern JavaScript)
-4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
+ background: #f0f0f0;
+ border: 0.2em solid #000;
+ border-top-width: 0.1em;
+ border-radius: 0 0 0.4em 0.4em;
-Помимо доступности этих специфических функций, остаётся ещё одна проблема чтобы начать. Объект возвращаемый функцией {{domxref("element.querySelectorAll","querySelectorAll()")}} имеет тип {{domxref("NodeList")}} что отличается от [`Array`](/ru/docs/JavaScript/Reference/Global_Objects/Array). Это важно потому, что объекты `Array` поддерживают функцию [`forEach`](/ru/docs/JavaScript/Reference/Global_Objects/Array/forEach), а {{domxref("NodeList")}} не поддерживает. Так как {{domxref("NodeList")}} очень похож на `Array` и нам очень удобно использовать `forEach`, мы можем просто добавить `forEach` к объекту {{domxref("NodeList")}} чтобы облегчить нам жизнь, например так:
+ box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
-```js
-NodeList.prototype.forEach = function (callback) {
- Array.prototype.forEach.call(this, callback);
-};
-```
+ box-sizing: border-box;
-Мы не шутили, когда сказали, что это легко сделать.
+ min-width: 100%;
+ max-height: 10em; /* 100px */
+ overflow-y: auto;
+ overflow-x: hidden;
+}
-### Создание процедур обработки событий
+.select .option {
+ padding: 0.2em 0.3em;
+}
-Итак, начало положено, и мы можем приступить к функциям, которые будут использоваться для взаимодействия с пользователем.
+.select .highlight {
+ background: #000;
+ color: #ffffff;
+}
+```
-```js
-// Эта функция будет вызываться каждый раз, когда наш виджет будет деактивирован
-// Ей передаётся один параметр
-// select : DOM нода класса `select` который должен быть деактивирован
-function deactivateSelect(select) {
- // Если виджет не активен, то и делать-то нечего
- if (!select.classList.contains("active")) return;
+{{EmbedLiveSample("Основное_состояние", 120, 130)}}
- // Получаем список опций для нашего виджета
- var optList = select.querySelector(".optList");
+#### Активное состояние
- // Закрываем список опций
- optList.classList.add("hidden");
+```html hidden
+
+ Cherry
+
+
Cherry
+
Lemon
+
Banana
+
Strawberry
+
Apple
+
+
+```
- // и деактивируем сам виджет
- select.classList.remove("active");
+```css hidden
+.select {
+ position: relative;
+ display: inline-block;
}
-// Эта функция будет вызываться каждый раз, когда пользователь захочет (де)активировать наш виджет
-// Ей передаются два параметра:
-// select : DOM нода класса `select` для активации
-// selectList : список всех DOM нод с классом `select`
-function activeSelect(select, selectList) {
- // Если виджет активен, то и делать-то нечего
- if (select.classList.contains("active")) return;
+.select.active,
+.select:focus {
+ box-shadow: 0 0 3px 1px #227755;
+ outline-color: transparent;
+}
- // Нам нужно отключить активное состояние всех наших виджетов
- // Так как функция deactivateSelect соответствует всем требованиям
- // функции forEach мы вызываем её без использования промежуточной анонимной функции
- selectList.forEach(deactivateSelect);
+.select .optList {
+ position: absolute;
+ top: 100%;
+ left: 0;
+}
- // А теперь мы возвращаем активное состояние нужного виджета
- select.classList.add("active");
+.select .optList.hidden {
+ max-height: 0;
+ visibility: hidden;
}
-// Эта функция будет вызываться каждый раз, когда пользователь будет открывать/закрывать список вариантов
-// Ей передаётся один параметр:
-// select : DOM нода со списком для переключения состояния
-function toggleOptList(select) {
- // Список хранится в виджете
- var optList = select.querySelector(".optList");
+.select {
+ font-size: 0.625em; /* 10px */
+ font-family: Verdana, Arial, sans-serif;
- // Мы меняем класс виджета чтобы показать/скрыть его
- optList.classList.toggle("hidden");
-}
+ box-sizing: border-box;
-// Эта функция будет вызываться каждый раз, когда нам нужно подсветить вариант
-// Ей передаются два параметра:
-// select : DOM нода класса `select` содержащая вариант для подсветки
-// option : DOM нода класса `option` для подсветки
-function highlightOption(select, option) {
- // Мы получаем список всех вариантов доступных в нашем элементе
- var optionList = select.querySelectorAll(".option");
+ padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+ width: 10em; /* 100px */
- // Мы удаляем подсветку всех вариантов
- optionList.forEach(function (other) {
- other.classList.remove("highlight");
- });
+ border: 0.2em solid #000; /* 2px */
+ border-radius: 0.4em; /* 4px */
- // Подсвечиваем нужный вариант
- option.classList.add("highlight");
+ box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+
+ background: #f0f0f0;
+ background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
}
-```
-Это все, что вам нужно для обработки различных состояний пользовательского виджета.
+.select .value {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
-Далее мы связываем эти функции с соответствующими событиями:
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: top;
+}
-```js
-// Мы обрабатываем событие при загрузке документа.
-window.addEventListener("load", function () {
- var selectList = document.querySelectorAll(".select");
+.select::after {
+ content: "▼";
+ position: absolute;
+ z-index: 1;
+ height: 100%;
+ width: 2em; /* 20px */
+ top: 0;
+ right: 0;
- // Каждый наш собственный виджет должен быть проинициализирован
- selectList.forEach(function (select) {
- // также как и его элементы `option`
- var optionList = select.querySelectorAll(".option");
+ padding-top: 0.1em;
- // Когда пользователь проводит мышью над элементом `option`, мы подсвечиваем этот вариант
- optionList.forEach(function (option) {
- option.addEventListener("mouseover", function () {
- // Замечание: использование переменных `select` и `option`
- // ограничено рамками нашей функции.
- highlightOption(select, option);
- });
- });
+ box-sizing: border-box;
+
+ text-align: center;
+
+ border-left: 0.2em solid #000;
+ border-radius: 0 0.1em 0.1em 0;
+
+ background-color: #000;
+ color: #fff;
+}
+
+.select .optList {
+ z-index: 2;
+
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ background: #f0f0f0;
+ border: 0.2em solid #000;
+ border-top-width: 0.1em;
+ border-radius: 0 0 0.4em 0.4em;
+
+ box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+
+ box-sizing: border-box;
+
+ min-width: 100%;
+ max-height: 10em; /* 100px */
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.select .option {
+ padding: 0.2em 0.3em;
+}
+
+.select .highlight {
+ background: #000;
+ color: #ffffff;
+}
+```
+
+{{EmbedLiveSample("Активное_состояние", 120, 130)}}
+
+#### Развёрнутое состояние
+
+```html hidden
+
+ Cherry
+
+
Cherry
+
Lemon
+
Banana
+
Strawberry
+
Apple
+
+
+```
+
+```css hidden
+.select {
+ position: relative;
+ display: inline-block;
+}
+
+.select.active,
+.select:focus {
+ box-shadow: 0 0 3px 1px #227755;
+ outline-color: transparent;
+}
+
+.select .optList {
+ position: absolute;
+ top: 100%;
+ left: 0;
+}
+
+.select .optList.hidden {
+ max-height: 0;
+ visibility: hidden;
+}
+
+.select {
+ font-size: 0.625em; /* 10px */
+ font-family: Verdana, Arial, sans-serif;
+
+ box-sizing: border-box;
+
+ padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+ width: 10em; /* 100px */
+
+ border: 0.2em solid #000; /* 2px */
+ border-radius: 0.4em; /* 4px */
+
+ box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+
+ background: #f0f0f0;
+ background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: top;
+}
+
+.select::after {
+ content: "▼";
+ position: absolute;
+ z-index: 1;
+ height: 100%;
+ width: 2em; /* 20px */
+ top: 0;
+ right: 0;
+
+ padding-top: 0.1em;
+
+ box-sizing: border-box;
+
+ text-align: center;
+
+ border-left: 0.2em solid #000;
+ border-radius: 0 0.1em 0.1em 0;
+
+ background-color: #000;
+ color: #fff;
+}
+
+.select .optList {
+ z-index: 2;
+
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ background: #f0f0f0;
+ border: 0.2em solid #000;
+ border-top-width: 0.1em;
+ border-radius: 0 0 0.4em 0.4em;
+
+ box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+
+ box-sizing: border-box;
+
+ min-width: 100%;
+ max-height: 10em; /* 100px */
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.select .option {
+ padding: 0.2em 0.3em;
+}
+
+.select .highlight {
+ background: #000;
+ color: #fff;
+}
+```
+
+{{EmbedLiveSample("Развёрнутое_состояние", 120, 130)}}
+
+## Оживляем виджет с помощью JavaScript
+
+Теперь, когда наш дизайн и структура готовы, мы можем написать код на JavaScript чтобы виджет действительно заработал.
+
+> **Предупреждение:** Следующий код представлен в образовательных целях и не может быть использован как-есть. Помимо прочего, как мы убедимся, он не пригоден для дальнейшего развития и не будет работать в устаревших браузерах. В нем также есть избыточность которую необходимо оптимизировать использования в рабочем режиме.
+
+> **Примечание:** Создание многократно используемых виджетов может быть немного сложнее. [W3C Web Component draft](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html) является одним из ответов на этот конкретный вопрос. [The X-Tag project](http://x-tags.org/) попытка реализовать эту спецификацию; пожалуйста, посмотрите этот проект.
+
+### Почему не работает?
+
+Прежде чем мы начнём, запомните одну важную вещь о JavaScript: в браузере **это ненадёжная технология**. Когда вы создаёте пользовательские виджеты, вы будете полагаться на JavaScript потому что это необходимое звено для связки. Однако во многих случаях JavaScript невозможно запустить в браузере:
+
+- Пользователь отключил JavaScript: Это самый редкий случай; сейчас очень мало людей отключают JavaScript.
+- Скрипт не загружается. Это один из самых распространённых случаев, особенно в мобильном мире, где сеть не очень надёжная.
+- Скрипт глючит.Вы должны всегда учитывать эту возможность.
+- Скрипт конфликтует со сторонним скриптом. Это может случиться со скриптами отслеживания или любыми букмарклетами (bookmarklets), которые использует пользователь.
+- Скрипт конфликтует с расширением браузера или зависит от него (такими как расширение [NoScript](https://addons.mozilla.org/fr/firefox/addon/noscript/) в Firefox, или расширение [NotScripts](https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn) в Chrome).
+- Пользователь использует устаревший браузер, и одна из требуемых функций не поддерживается. Это часто случается, когда вы используете передовые API.
+
+Из-за этого очень важно серьёзно подумать о том, что произойдёт, если JavaScript не сработает. Детальное рассмотрение этой проблемы выходит за рамки данной статьи, поскольку эта проблема тесно связана с тем, насколько универсальным и многократно используемым вы хотите сделать свой сценарий, но мы рассмотрим основы этого в нашем примере.
+
+В нашем примере, если наш JavaScript-код не работает, мы используем стандартный элемент {{HTMLElement("select")}}. Для этого, нам нужны две вещи.
+
+Во-первых нам нужно добавить стандартный элемент {{HTMLElement("select")}} перед каждым использованием нашего пользовательского виджета. Это также необходимо, чтобы отправить данные из нашего пользовательского виджета вместе с остальными данными формы; подробнее рассмотрим это позже.
+
+```html
+
+
+
+```
+
+Во-вторых нам нужно два новых класса, чтобы скрыть ненужные элементы (то есть "настоящие" элементы {{HTMLElement("select")}}, если скрипт запустился, или наш пользовательский виджет, если скрипт не запустился). По умолчанию наш HTML код скрывает наш пользовательский виджет.
+
+```css
+.widget select,
+.no-widget .select {
+ /* Этот CSS селектор значит:
+ - или мы присваиваем классу body значение "widget" и таким образом мы скрываем элемент {{HTMLElement("select")}}
+ - или мы не меняем класс body, тогда класс body остаётся в значении "no-widget",
+ и элементы, чей класс "select" будут скрыты */
+ position: absolute;
+ left: -5000em;
+ height: 0;
+ overflow: hidden;
+}
+```
+
+Теперь нам нужен модуль JavaScript, чтобы определить, запущен скрипт или нет. Этот модуль очень простой: если наш скрипт запустится во время загрузки страницы, то он удалит класс класс `no-widget` и добавит класс `widget`, чем поменяет видимость элемента {{HTMLElement("select")}} и нашего пользовательского виджета.
+
+```js
+window.addEventListener("load", function () {
+ document.body.classList.remove("no-widget");
+ document.body.classList.add("widget");
+});
+```
+
+#### Без JS
+
+Посмотрите [полный исходный код](/ru/docs/Learn/Forms/How_to_build_custom_form_controls/Example_2#no_js).
+
+```html hidden
+
+```
+
+```css hidden
+.widget select,
+.no-widget .select {
+ position: absolute;
+ left: -5000em;
+ height: 0;
+ overflow: hidden;
+}
+```
+
+{{EmbedLiveSample("Без_JS",120,130)}}
+
+#### Вместе с JS
+
+Посмотрите [полный исходный код](/ru/docs/Learn/Forms/How_to_build_custom_form_controls/Example_2#js).
+
+```html hidden
+
+```
+
+```css hidden
+.widget select,
+.no-widget .select {
+ position: absolute;
+ left: -5000em;
+ height: 0;
+ overflow: hidden;
+}
+
+.select {
+ position: relative;
+ display: inline-block;
+}
+
+.select.active,
+.select:focus {
+ box-shadow: 0 0 3px 1px #227755;
+ outline-color: transparent;
+}
+
+.select .optList {
+ position: absolute;
+ top: 100%;
+ left: 0;
+}
+
+.select .optList.hidden {
+ max-height: 0;
+ visibility: hidden;
+}
+
+.select {
+ font-size: 0.625em; /* 10px */
+ font-family: Verdana, Arial, sans-serif;
+
+ box-sizing: border-box;
+
+ padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+ width: 10em; /* 100px */
+
+ border: 0.2em solid #000; /* 2px */
+ border-radius: 0.4em; /* 4px */
+
+ box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+
+ background: #f0f0f0;
+ background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: top;
+}
+
+.select::after {
+ content: "▼";
+ position: absolute;
+ z-index: 1;
+ height: 100%;
+ width: 2em; /* 20px */
+ top: 0;
+ right: 0;
+
+ padding-top: 0.1em;
+
+ box-sizing: border-box;
+
+ text-align: center;
+
+ border-left: 0.2em solid #000;
+ border-radius: 0 0.1em 0.1em 0;
+
+ background-color: #000;
+ color: #fff;
+}
+
+.select .optList {
+ z-index: 2;
+
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ background: #f0f0f0;
+ border: 0.2em solid #000;
+ border-top-width: 0.1em;
+ border-radius: 0 0 0.4em 0.4em;
+
+ box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+
+ box-sizing: border-box;
+
+ min-width: 100%;
+ max-height: 10em; /* 100px */
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.select .option {
+ padding: 0.2em 0.3em;
+}
+
+.select .highlight {
+ background: #000;
+ color: #ffffff;
+}
+```
+
+```js hidden
+window.addEventListener("load", () => {
+ const form = document.querySelector("form");
+
+ form.classList.remove("no-widget");
+ form.classList.add("widget");
+});
+```
+
+{{EmbedLiveSample("Вместе_с_JS", 120, 130)}}
+
+> **Примечание:** Если вы действительно хотите сделать свой код универсальным и многоразовым, то вместо переключения классов гораздо лучше просто добавить класс элементам {{HTMLElement("select")}} чтобы их скрыть, и динамически добавлять дерево DOM представляющее пользовательский виджет после каждого элемента {{HTMLElement("select")}} на странице.
+
+### Облегчение работы
+
+В коде который мы собираемся написать, для выполнения всех необходимых действий мы будем использовать стандартный DOM API. Однако, хотя поддержка DOM API в браузерах стала гораздо лучше, все ещё есть нюансы с устраевшеними браузерами (особенно со старым добрым Internet Explorer).
+
+Чтобы избежать неприятностей с устаревшими браузерами есть два способа: использовать отдельный фреймворк такой как [jQuery](https://jquery.com/), [$dom](https://github.com/julienw/dollardom), [prototype](http://prototypejs.org/), [Dojo](http://dojotoolkit.org/), [YUI](http://yuilibrary.com/), и т.п., или самостоятельно реализовать недостающие функции которые вам нужны (что можно легко сделать через условную загрузку, например используя библиотеку [yepnope](http://yepnopejs.com/)).
+
+Мы планируем использовать следующие функции (от самых рискованных до самых безопасных):
+
+1. {{domxref("element.classList","classList")}}
+2. {{domxref("EventTarget.addEventListener","addEventListener")}}
+3. [`forEach`](/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) (This is not DOM but modern JavaScript)
+4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
+
+Помимо доступности этих специфических функций, остаётся ещё одна проблема чтобы начать. Объект возвращаемый функцией {{domxref("element.querySelectorAll","querySelectorAll()")}} имеет тип {{domxref("NodeList")}} что отличается от [`Array`](/ru/docs/Web/JavaScript/Reference/Global_Objects/Array). Это важно потому, что объекты `Array` поддерживают функцию [`forEach`](/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), а {{domxref("NodeList")}} не поддерживает. Так как {{domxref("NodeList")}} очень похож на `Array` и нам очень удобно использовать `forEach`, мы можем просто добавить `forEach` к объекту {{domxref("NodeList")}} чтобы облегчить нам жизнь, например так:
+
+```js
+NodeList.prototype.forEach = function (callback) {
+ Array.prototype.forEach.call(this, callback);
+};
+```
+
+Мы не шутили, когда сказали, что это легко сделать.
+
+### Создание процедур обработки событий
+
+Итак, начало положено, и мы можем приступить к функциям, которые будут использоваться для взаимодействия с пользователем.
+
+```js
+// Эта функция будет вызываться каждый раз, когда наш виджет будет деактивирован
+// Ей передаётся один параметр
+// select : DOM нода класса `select` который должен быть деактивирован
+function deactivateSelect(select) {
+ // Если виджет не активен, то и делать-то нечего
+ if (!select.classList.contains("active")) return;
+
+ // Получаем список опций для нашего виджета
+ var optList = select.querySelector(".optList");
+
+ // Закрываем список опций
+ optList.classList.add("hidden");
+
+ // и деактивируем сам виджет
+ select.classList.remove("active");
+}
+
+// Эта функция будет вызываться каждый раз, когда пользователь захочет (де)активировать наш виджет
+// Ей передаются два параметра:
+// select : DOM нода класса `select` для активации
+// selectList : список всех DOM нод с классом `select`
+function activeSelect(select, selectList) {
+ // Если виджет активен, то и делать-то нечего
+ if (select.classList.contains("active")) return;
+
+ // Нам нужно отключить активное состояние всех наших виджетов
+ // Так как функция deactivateSelect соответствует всем требованиям
+ // функции forEach мы вызываем её без использования промежуточной анонимной функции
+ selectList.forEach(deactivateSelect);
+
+ // А теперь мы возвращаем активное состояние нужного виджета
+ select.classList.add("active");
+}
+
+// Эта функция будет вызываться каждый раз, когда пользователь будет открывать/закрывать список вариантов
+// Ей передаётся один параметр:
+// select : DOM нода со списком для переключения состояния
+function toggleOptList(select) {
+ // Список хранится в виджете
+ var optList = select.querySelector(".optList");
+
+ // Мы меняем класс виджета чтобы показать/скрыть его
+ optList.classList.toggle("hidden");
+}
+
+// Эта функция будет вызываться каждый раз, когда нам нужно подсветить вариант
+// Ей передаются два параметра:
+// select : DOM нода класса `select` содержащая вариант для подсветки
+// option : DOM нода класса `option` для подсветки
+function highlightOption(select, option) {
+ // Мы получаем список всех вариантов доступных в нашем элементе
+ var optionList = select.querySelectorAll(".option");
+
+ // Мы удаляем подсветку всех вариантов
+ optionList.forEach(function (other) {
+ other.classList.remove("highlight");
+ });
+
+ // Подсвечиваем нужный вариант
+ option.classList.add("highlight");
+}
+```
+
+Это все, что вам нужно для обработки различных состояний пользовательского виджета.
+
+Далее мы связываем эти функции с соответствующими событиями:
+
+```js
+// Мы обрабатываем событие при загрузке документа.
+window.addEventListener("load", function () {
+ var selectList = document.querySelectorAll(".select");
+
+ // Каждый наш собственный виджет должен быть проинициализирован
+ selectList.forEach(function (select) {
+ // также как и его элементы `option`
+ var optionList = select.querySelectorAll(".option");
+
+ // Когда пользователь проводит мышью над элементом `option`, мы подсвечиваем этот вариант
+ optionList.forEach(function (option) {
+ option.addEventListener("mouseover", function () {
+ // Замечание: использование переменных `select` и `option`
+ // ограничено рамками нашей функции.
+ highlightOption(select, option);
+ });
+ });
+
+ // Когда пользователь кликает на наш виджет
+ select.addEventListener("click", function (event) {
+ // Замечание: использование переменной `select`
+ // ограничено рамками нашей функции.
+
+ // Мы переключаем видимость списка вариантов
+ toggleOptList(select);
+ });
+
+ // Когда виджет получает фокус
+ // Виджет получает фокус когда пользователь кликает на него
+ // или переходит на него клавишей табуляции
+ select.addEventListener("focus", function (event) {
+ // Замечание: использование переменных `select` и `selectList`
+ // ограничено рамками нашей функции.
+
+ // Мы активируем наш виджет
+ activeSelect(select, selectList);
+ });
+
+ // Когда виджет теряет фокус
+ select.addEventListener("blur", function (event) {
+ // Замечание: использование переменной `select`
+ // ограничено рамками нашей функции.
+
+ // Мы деактивируем виджет
+ deactivateSelect(select);
+ });
+ });
+});
+```
+
+В этот момент наш виджет будет изменять состояние в соответствии с нашим дизайном, но не будет обновлять его значение. С этим мы разберёмся дальше.
+
+#### Живой пример
+
+Посмотрите [полный исходный код](/ru/docs/Learn/Forms/How_to_build_custom_form_controls/Example_3).
+
+```html hidden
+
+```
+
+```css hidden
+.widget select,
+.no-widget .select {
+ position: absolute;
+ left: -5000em;
+ height: 0;
+ overflow: hidden;
+}
+
+.select {
+ position: relative;
+ display: inline-block;
+}
+
+.select.active,
+.select:focus {
+ box-shadow: 0 0 3px 1px #227755;
+ outline-color: transparent;
+}
+
+.select .optList {
+ position: absolute;
+ top: 100%;
+ left: 0;
+}
+
+.select .optList.hidden {
+ max-height: 0;
+ visibility: hidden;
+}
+
+.select {
+ font-size: 0.625em; /* 10px */
+ font-family: Verdana, Arial, sans-serif;
+
+ box-sizing: border-box;
+
+ padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+ width: 10em; /* 100px */
+
+ border: 0.2em solid #000; /* 2px */
+ border-radius: 0.4em; /* 4px */
+
+ box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+
+ background: #f0f0f0;
+ background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: top;
+}
+
+.select::after {
+ content: "▼";
+ position: absolute;
+ z-index: 1;
+ height: 100%;
+ width: 2em; /* 20px */
+ top: 0;
+ right: 0;
+
+ padding-top: 0.1em;
+
+ box-sizing: border-box;
+
+ text-align: center;
+
+ border-left: 0.2em solid #000;
+ border-radius: 0 0.1em 0.1em 0;
+
+ background-color: #000;
+ color: #fff;
+}
+
+.select .optList {
+ z-index: 2;
+
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ background: #f0f0f0;
+ border: 0.2em solid #000;
+ border-top-width: 0.1em;
+ border-radius: 0 0 0.4em 0.4em;
+
+ box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+
+ box-sizing: border-box;
+
+ min-width: 100%;
+ max-height: 10em; /* 100px */
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.select .option {
+ padding: 0.2em 0.3em;
+}
+
+.select .highlight {
+ background: #000;
+ color: #ffffff;
+}
+```
+
+```js hidden
+function deactivateSelect(select) {
+ if (!select.classList.contains("active")) return;
- // Когда пользователь кликает на наш виджет
- select.addEventListener("click", function (event) {
- // Замечание: использование переменной `select`
- // ограничено рамками нашей функции.
+ const optList = select.querySelector(".optList");
- // Мы переключаем видимость списка вариантов
- toggleOptList(select);
+ optList.classList.add("hidden");
+ select.classList.remove("active");
+}
+
+function activeSelect(select, selectList) {
+ if (select.classList.contains("active")) return;
+
+ selectList.forEach(deactivateSelect);
+ select.classList.add("active");
+}
+
+function toggleOptList(select, show) {
+ const optList = select.querySelector(".optList");
+
+ optList.classList.toggle("hidden");
+}
+
+function highlightOption(select, option) {
+ const optionList = select.querySelectorAll(".option");
+
+ optionList.forEach((other) => {
+ other.classList.remove("highlight");
+ });
+
+ option.classList.add("highlight");
+}
+
+window.addEventListener("load", () => {
+ const form = document.querySelector("form");
+
+ form.classList.remove("no-widget");
+ form.classList.add("widget");
+});
+
+window.addEventListener("load", () => {
+ const selectList = document.querySelectorAll(".select");
+
+ selectList.forEach((select) => {
+ const optionList = select.querySelectorAll(".option");
+
+ optionList.forEach((option) => {
+ option.addEventListener("mouseover", () => {
+ highlightOption(select, option);
+ });
});
- // Когда виджет получает фокус
- // Виджет получает фокус когда пользователь кликает на него
- // или переходит на него клавишей табуляции
- select.addEventListener("focus", function (event) {
- // Замечание: использование переменных `select` и `selectList`
- // ограничено рамками нашей функции.
+ select.addEventListener(
+ "click",
+ (event) => {
+ toggleOptList(select);
+ },
+ false,
+ );
- // Мы активируем наш виджет
+ select.addEventListener("focus", (event) => {
activeSelect(select, selectList);
});
- // Когда виджет теряет фокус
- select.addEventListener("blur", function (event) {
- // Замечание: использование переменной `select`
- // ограничено рамками нашей функции.
-
- // Мы деактивируем виджет
+ select.addEventListener("blur", (event) => {
deactivateSelect(select);
});
+
+ select.addEventListener("keyup", (event) => {
+ if (event.key === "Escape") {
+ deactivateSelect(select);
+ }
+ });
});
});
```
-В этот момент наш виджет будет изменять состояние в соответствии с нашим дизайном, но не будет обновлять его значение. С этим мы разберёмся дальше.
-
-| Пример |
-| ------------------------------------------------------------------------------------------------------------- |
-| {{ EmbedLiveSample("Change_states",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_3") }} |
-| [Посмотреть исходный код](/ru/docs/Learn/Forms/How_to_build_custom_form_controls/Example_3) |
+{{EmbedLiveSample("Живой_пример", 120, 130)}}
### Обработка значения виджета
@@ -593,76 +1301,339 @@ function updateValue(select, index) {
// В нашем примере стандартный виджет является братом (sibling) пользовательского виджета
var nativeWidget = select.previousElementSibling;
- // Нам также нужно получить значение заполнителя нашего пользовательского виджета
- var value = select.querySelector(".value");
+ // Нам также нужно получить значение заполнителя нашего пользовательского виджета
+ var value = select.querySelector(".value");
+
+ // И нам нужен весь список вариантов
+ var optionList = select.querySelectorAll(".option");
+
+ // Установим значение текущего номера выбранного элемента равным index
+ nativeWidget.selectedIndex = index;
+
+ // Соответственно установим значение заполнителя
+ value.innerHTML = optionList[index].innerHTML;
+
+ // И мы подсвечиваем соответствующий вариант нашего пользовательского виджета
+ highlightOption(select, optionList[index]);
+}
+
+// Эта функция возвращает текущий номер выбранного элемента в стандартном виджете
+// Ей передаётся один параметр:
+// select : DOM нода класса `select` соответствующая стандартному виджету
+function getIndex(select) {
+ // Нам нужно получить доступ к стандартному виджету соответствующему данному
+ // пользовательскому виджету
+ // В нашем примере стандартный виджет - брат (sibling) пользовательского виджета
+ var nativeWidget = select.previousElementSibling;
+
+ return nativeWidget.selectedIndex;
+}
+```
+
+Используя эти две функции мы можем связать стандартный виджет с пользовательским:
+
+```js
+// Мы обрабатываем привязку события при загрузке документа.
+window.addEventListener("load", function () {
+ var selectList = document.querySelectorAll(".select");
+
+ // Каждый пользовательский виджет необходимо инициализировать:
+ selectList.forEach(function (select) {
+ var optionList = select.querySelectorAll(".option"),
+ selectedIndex = getIndex(select);
+
+ // Мы делаем наш пользовательский виджет фокусируемым
+ select.tabIndex = 0;
+
+ // Мы делаем стандартный виджет более не фокусируемым
+ select.previousElementSibling.tabIndex = -1;
+
+ // Убеждаемся, что выбранное по умолчанию значение корректно отображено
+ updateValue(select, selectedIndex);
+
+ // Каждый раз, когда пользователь кликает на вариант, мы соответственно обновляем значение
+ optionList.forEach(function (option, index) {
+ option.addEventListener("click", function (event) {
+ updateValue(select, index);
+ });
+ });
+
+ // Когда виджет находится в фокусе, при каждом нажатии клавиши на клавиатуре, мы соответственно
+ // обновляем значение
+ select.addEventListener("keyup", function (event) {
+ var length = optionList.length,
+ index = getIndex(select);
+
+ // Когда пользователь нажимает стрелку вниз, мы переходим на следующий вариант
+ if (event.keyCode === 40 && index < length - 1) {
+ index++;
+ }
+
+ // Когда пользователь нажимает стрелку вверх, мы переходим на предыдущий вариант
+ if (event.keyCode === 38 && index > 0) {
+ index--;
+ }
+
+ updateValue(select, index);
+ });
+ });
+});
+```
+
+В приведённом выше коде стоить отметить свойство [`tabIndex`](/ru/docs/Web/API/HTMLElement/tabIndex). Использование этого свойства необходимо чтобы стандартный виджет никогда не получил фокус, и чтобы убедиться, что наш пользовательский виджет получает фокус когда пользователь использует клавиатуру или мышь.
+
+С этим мы закончили! Вот результат:
+
+#### Живой пример
+
+Посмотрите [полный исходный код](/ru/docs/Learn/Forms/How_to_build_custom_form_controls/Example_4).
+
+```html hidden
+
+```
+
+```css hidden
+.widget select,
+.no-widget .select {
+ position: absolute;
+ left: -5000em;
+ height: 0;
+ overflow: hidden;
+}
+
+.select {
+ position: relative;
+ display: inline-block;
+}
+
+.select.active,
+.select:focus {
+ box-shadow: 0 0 3px 1px #227755;
+ outline-color: transparent;
+}
+
+.select .optList {
+ position: absolute;
+ top: 100%;
+ left: 0;
+}
+
+.select .optList.hidden {
+ max-height: 0;
+ visibility: hidden;
+}
+
+.select {
+ font-size: 0.625em; /* 10px */
+ font-family: Verdana, Arial, sans-serif;
+
+ box-sizing: border-box;
+
+ padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+ width: 10em; /* 100px */
+
+ border: 0.2em solid #000; /* 2px */
+ border-radius: 0.4em; /* 4px */
+
+ box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+
+ background: #f0f0f0;
+ background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: top;
+}
+
+.select::after {
+ content: "▼";
+ position: absolute;
+ z-index: 1;
+ height: 100%;
+ width: 2em; /* 20px */
+ top: 0;
+ right: 0;
+
+ padding-top: 0.1em;
+
+ box-sizing: border-box;
+
+ text-align: center;
+
+ border-left: 0.2em solid #000;
+ border-radius: 0 0.1em 0.1em 0;
+
+ background-color: #000;
+ color: #fff;
+}
+
+.select .optList {
+ z-index: 2;
+
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ background: #f0f0f0;
+ border: 0.2em solid #000;
+ border-top-width: 0.1em;
+ border-radius: 0 0 0.4em 0.4em;
+
+ box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+
+ box-sizing: border-box;
+
+ min-width: 100%;
+ max-height: 10em; /* 100px */
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.select .option {
+ padding: 0.2em 0.3em;
+}
+
+.select .highlight {
+ background: #000;
+ color: #ffffff;
+}
+```
+
+```js hidden
+function deactivateSelect(select) {
+ if (!select.classList.contains("active")) return;
+
+ const optList = select.querySelector(".optList");
+
+ optList.classList.add("hidden");
+ select.classList.remove("active");
+}
+
+function activeSelect(select, selectList) {
+ if (select.classList.contains("active")) return;
+
+ selectList.forEach(deactivateSelect);
+ select.classList.add("active");
+}
+
+function toggleOptList(select, show) {
+ const optList = select.querySelector(".optList");
+
+ optList.classList.toggle("hidden");
+}
+
+function highlightOption(select, option) {
+ const optionList = select.querySelectorAll(".option");
+
+ optionList.forEach((other) => {
+ other.classList.remove("highlight");
+ });
- // И нам нужен весь список вариантов
- var optionList = select.querySelectorAll(".option");
+ option.classList.add("highlight");
+}
- // Установим значение текущего номера выбранного элемента равным index
- nativeWidget.selectedIndex = index;
+function updateValue(select, index) {
+ const nativeWidget = select.previousElementSibling;
+ const value = select.querySelector(".value");
+ const optionList = select.querySelectorAll(".option");
- // Соответственно установим значение заполнителя
+ nativeWidget.selectedIndex = index;
value.innerHTML = optionList[index].innerHTML;
-
- // И мы подсвечиваем соответствующий вариант нашего пользовательского виджета
highlightOption(select, optionList[index]);
}
-// Эта функция возвращает текущий номер выбранного элемента в стандартном виджете
-// Ей передаётся один параметр:
-// select : DOM нода класса `select` соответствующая стандартному виджету
function getIndex(select) {
- // Нам нужно получить доступ к стандартному виджету соответствующему данному
- // пользовательскому виджету
- // В нашем примере стандартный виджет - брат (sibling) пользовательского виджета
- var nativeWidget = select.previousElementSibling;
+ const nativeWidget = select.previousElementSibling;
return nativeWidget.selectedIndex;
}
-```
-Используя эти две функции мы можем связать стандартный виджет с пользовательским:
+window.addEventListener("load", () => {
+ const form = document.querySelector("form");
-```js
-// Мы обрабатываем привязку события при загрузке документа.
-window.addEventListener("load", function () {
- var selectList = document.querySelectorAll(".select");
+ form.classList.remove("no-widget");
+ form.classList.add("widget");
+});
- // Каждый пользовательский виджет необходимо инициализировать:
- selectList.forEach(function (select) {
- var optionList = select.querySelectorAll(".option"),
- selectedIndex = getIndex(select);
+window.addEventListener("load", () => {
+ const selectList = document.querySelectorAll(".select");
- // Мы делаем наш пользовательский виджет фокусируемым
- select.tabIndex = 0;
+ selectList.forEach((select) => {
+ const optionList = select.querySelectorAll(".option");
- // Мы делаем стандартный виджет более не фокусируемым
+ optionList.forEach((option) => {
+ option.addEventListener("mouseover", () => {
+ highlightOption(select, option);
+ });
+ });
+
+ select.addEventListener("click", (event) => {
+ toggleOptList(select);
+ });
+
+ select.addEventListener("focus", (event) => {
+ activeSelect(select, selectList);
+ });
+
+ select.addEventListener("blur", (event) => {
+ deactivateSelect(select);
+ });
+ });
+});
+
+window.addEventListener("load", () => {
+ const selectList = document.querySelectorAll(".select");
+
+ selectList.forEach((select) => {
+ const optionList = select.querySelectorAll(".option");
+ const selectedIndex = getIndex(select);
+
+ select.tabIndex = 0;
select.previousElementSibling.tabIndex = -1;
- // Убеждаемся, что выбранное по умолчанию значение корректно отображено
updateValue(select, selectedIndex);
- // Каждый раз, когда пользователь кликает на вариант, мы соответственно обновляем значение
- optionList.forEach(function (option, index) {
- option.addEventListener("click", function (event) {
+ optionList.forEach((option, index) => {
+ option.addEventListener("click", (event) => {
updateValue(select, index);
});
});
- // Когда виджет находится в фокусе, при каждом нажатии клавиши на клавиатуре, мы соответственно
- // обновляем значение
- select.addEventListener("keyup", function (event) {
- var length = optionList.length,
- index = getIndex(select);
+ select.addEventListener("keyup", (event) => {
+ let index = getIndex(select);
- // Когда пользователь нажимает стрелку вниз, мы переходим на следующий вариант
- if (event.keyCode === 40 && index < length - 1) {
+ if (event.key === "Escape") {
+ deactivateSelect(select);
+ }
+ if (event.key === "ArrowDown" && index < optionList.length - 1) {
index++;
}
-
- // Когда пользователь нажимает стрелку вверх, мы переходим на предыдущий вариант
- if (event.keyCode === 38 && index > 0) {
+ if (event.key === "ArrowUp" && index > 0) {
index--;
}
@@ -672,22 +1643,15 @@ window.addEventListener("load", function () {
});
```
-В приведённом выше коде стоить отметить свойство [`tabIndex`](/ru/docs/Web/API/HTMLElement/tabIndex). Использование этого свойства необходимо чтобы стандартный виджет никогда не получил фокус, и чтобы убедиться, что наш пользовательский виджет получает фокус когда пользователь использует клавиатуру или мышь.
-
-С этим мы закончили! Вот результат:
-
-| Пример |
-| ------------------------------------------------------------------------------------------------------------- |
-| {{ EmbedLiveSample("Change_states",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_4") }} |
-| [Посмотреть исходный код](/ru/docs/Learn/Forms/How_to_build_custom_form_controls/Example_4) |
+{{EmbedLiveSample("Живой_пример", 120, 130)}}
-Но секундочку, мы точно закончили?
+Но подождите, мы точно закончили?
-## Делаем доступным
+## Добавляем доступность
Мы создали нечто работающее, и, хотя это далеко от полнофункционального выпадающего списка, работает это хорошо. Однако то, что мы сделали, это не более, чем возня с DOM. У него нет настоящей семантики, и хотя оно выглядит как раскрывающейся список, с точки зрения браузера - это не так, поэтому вспомогательные технологии не смогут понять что это он и есть. Короче говоря, этот хорошенький список для выбора фруктов не является доступным для людей с ограниченными возможностями!
-К счастью существует решение, и оно называется [ARIA](/ru/docs/Accessibility/ARIA). ARIA - аббревиатура для "Accessible Rich Internet Application" (Доступное всем интернет приложение), и представляет собой [W3C спецификацию](http://www.w3.org/TR/wai-aria/) специально разработанную для того, что мы здесь делаем: делаем веб приложения и пользовательские виджеты ассистивными (доступными для людей с ограниченными возможностями). В основном, это набор атрибутов, которые расширяют HTML, чтобы мы смогли лучше описать роли, состояния и свойства, так что только что изобретённый элемент выглядит как будто он был тем стандартным, за которого он себя выдаёт. Использовать эти атрибуты очень просто, поэтому давайте сделаем это.
+К счастью существует решение, и оно называется [ARIA](/ru/docs/Accessibility/ARIA). ARIA - аббревиатура для "Accessible Rich Internet Application" (Доступное всем интернет приложение), и представляет собой [W3C спецификацию](https://www.w3.org/TR/wai-aria/) специально разработанную для того, что мы здесь делаем: делаем веб приложения и пользовательские виджеты ассистивными (доступными для людей с ограниченными возможностями). В основном, это набор атрибутов, которые расширяют HTML, чтобы мы смогли лучше описать роли, состояния и свойства, так что только что изобретённый элемент выглядит как будто он был тем стандартным, за которого он себя выдаёт. Использовать эти атрибуты очень просто, поэтому давайте сделаем это.
### Атрибут `role`
@@ -741,12 +1705,264 @@ function updateValue(select, index) {
}
```
-Вот окончательный результат всех этих изменений (вы сможете это лучше прочувствовать если испробуете это со вспомогательными технологиями, такими как [NVDA](http://www.nvda-project.org/) или [VoiceOver](http://www.apple.com/accessibility/voiceover/)):
+Ниже окончательный результат всех этих изменений (для большей наглядности попробуйте эти примеры со вспомогательными технологиями, такими как [NVDA](http://www.nvda-project.org/) или [VoiceOver](https://www.apple.com/accessibility/voiceover/)).
+
+#### Живой пример
+
+Посмотрите [полный исходный код](/ru/docs/Learn/Forms/How_to_build_custom_form_controls/Example_5).
+
+```html hidden
+
+```
+
+```css hidden
+.widget select,
+.no-widget .select {
+ position: absolute;
+ left: -5000em;
+ height: 0;
+ overflow: hidden;
+}
+
+.select {
+ position: relative;
+ display: inline-block;
+}
+
+.select.active,
+.select:focus {
+ box-shadow: 0 0 3px 1px #227755;
+ outline-color: transparent;
+}
+
+.select .optList {
+ position: absolute;
+ top: 100%;
+ left: 0;
+}
+
+.select .optList.hidden {
+ max-height: 0;
+ visibility: hidden;
+}
+
+.select {
+ font-size: 0.625em; /* 10px */
+ font-family: Verdana, Arial, sans-serif;
+
+ box-sizing: border-box;
+
+ padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+ width: 10em; /* 100px */
+
+ border: 0.2em solid #000; /* 2px */
+ border-radius: 0.4em; /* 4px */
+
+ box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */
+
+ background: #f0f0f0;
+ background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: top;
+}
+
+.select::after {
+ content: "▼";
+ position: absolute;
+ z-index: 1;
+ height: 100%;
+ width: 2em; /* 20px */
+ top: 0;
+ right: 0;
+
+ padding-top: 0.1em;
+
+ box-sizing: border-box;
+
+ text-align: center;
+
+ border-left: 0.2em solid #000;
+ border-radius: 0 0.1em 0.1em 0;
+
+ background-color: #000;
+ color: #fff;
+}
+
+.select .optList {
+ z-index: 2;
+
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ background: #f0f0f0;
+ border: 0.2em solid #000;
+ border-top-width: 0.1em;
+ border-radius: 0 0 0.4em 0.4em;
+
+ box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
+
+ box-sizing: border-box;
+
+ min-width: 100%;
+ max-height: 10em; /* 100px */
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.select .option {
+ padding: 0.2em 0.3em;
+}
+
+.select .highlight {
+ background: #000;
+ color: #ffffff;
+}
+```
+
+```js hidden
+function deactivateSelect(select) {
+ if (!select.classList.contains("active")) return;
+
+ const optList = select.querySelector(".optList");
+
+ optList.classList.add("hidden");
+ select.classList.remove("active");
+}
+
+function activeSelect(select, selectList) {
+ if (select.classList.contains("active")) return;
+
+ selectList.forEach(deactivateSelect);
+ select.classList.add("active");
+}
+
+function toggleOptList(select, show) {
+ const optList = select.querySelector(".optList");
+
+ optList.classList.toggle("hidden");
+}
+
+function highlightOption(select, option) {
+ const optionList = select.querySelectorAll(".option");
+
+ optionList.forEach((other) => {
+ other.classList.remove("highlight");
+ });
+
+ option.classList.add("highlight");
+}
+
+function updateValue(select, index) {
+ const nativeWidget = select.previousElementSibling;
+ const value = select.querySelector(".value");
+ const optionList = select.querySelectorAll(".option");
+
+ optionList.forEach((other) => {
+ other.setAttribute("aria-selected", "false");
+ });
+
+ optionList[index].setAttribute("aria-selected", "true");
+
+ nativeWidget.selectedIndex = index;
+ value.innerHTML = optionList[index].innerHTML;
+ highlightOption(select, optionList[index]);
+}
+
+function getIndex(select) {
+ const nativeWidget = select.previousElementSibling;
+
+ return nativeWidget.selectedIndex;
+}
+
+window.addEventListener("load", () => {
+ const form = document.querySelector("form");
+
+ form.classList.remove("no-widget");
+ form.classList.add("widget");
+});
+
+window.addEventListener("load", () => {
+ const selectList = document.querySelectorAll(".select");
+
+ selectList.forEach((select) => {
+ const optionList = select.querySelectorAll(".option");
+ const selectedIndex = getIndex(select);
+
+ select.tabIndex = 0;
+ select.previousElementSibling.tabIndex = -1;
-| Пример |
-| ------------------------------------------------------------------------------------------------------------- |
-| {{ EmbedLiveSample("Change_states",120,130, "", "Learn/Forms/How_to_build_custom_form_controls/Example_5") }} |
-| [Посмотреть исходный код](/ru/docs/Learn/Forms/How_to_build_custom_form_controls/Example_5) |
+ updateValue(select, selectedIndex);
+
+ optionList.forEach((option, index) => {
+ option.addEventListener("mouseover", () => {
+ highlightOption(select, option);
+ });
+
+ option.addEventListener("click", (event) => {
+ updateValue(select, index);
+ });
+ });
+
+ select.addEventListener("click", (event) => {
+ toggleOptList(select);
+ });
+
+ select.addEventListener("focus", (event) => {
+ activeSelect(select, selectList);
+ });
+
+ select.addEventListener("blur", (event) => {
+ deactivateSelect(select);
+ });
+
+ select.addEventListener("keyup", (event) => {
+ let index = getIndex(select);
+
+ if (event.key === "Escape") {
+ deactivateSelect(select);
+ }
+ if (event.key === "ArrowDown" && index < optionList.length - 1) {
+ index++;
+ }
+ if (event.key === "ArrowUp" && index > 0) {
+ index--;
+ }
+
+ updateValue(select, index);
+ });
+ });
+});
+```
+
+{{EmbedLiveSample("Живой_пример", 120, 130)}}
## Заключение
@@ -762,17 +1978,3 @@ function updateValue(select, index) {
Если вы хотите двигаться далее, то код в этом примере нуждается в некотором улучшении прежде чем станет универсальным и многоразовым. Это упражнение, которое вы можете попробовать выполнить. Две подсказки, которые помогут вам в этом: первый аргумент всех наших функций одинаков, это значит что эти функции должны быть в одном контексте. Было бы разумным создать объект для совместного использования этого контекста. Также вам нужно сделать его функциональным; это значит, что ему необходимо одинаково хорошо работать с различными браузерами, чья совместимость с Web стандартами очень отличается. Повеселись!
{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
-
-## В этом модуле
-
-- [Ваша первая HTML форма](/ru/docs/Learn/HTML/Forms/Your_first_HTML_form)
-- [Как структурировать HTML форму](/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form)
-- [The native form widgets](/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC)
-- [Отправка данных формы](/ru/docs/Learn/HTML/Forms/%D0%9E%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0_%D0%B8_%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85_%D1%84%D0%BE%D1%80%D0%BC%D1%8B)
-- [Проверка данных формы](/ru/docs/Learn/HTML/Forms/Form_validation)
-- [Как создавать пользовательские виджеты форм](/ru/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets)
-- [Sending forms through JavaScript](/ru/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript)
-- [HTML forms in legacy browsers](/ru/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers)
-- [Styling HTML forms](/ru/docs/Learn/HTML/Forms/Styling_HTML_forms)
-- [Advanced styling for HTML forms](/ru/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms)
-- [Property compatibility table for form widgets](/ru/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets)
diff --git a/files/ru/learn/forms/sending_and_retrieving_form_data/index.md b/files/ru/learn/forms/sending_and_retrieving_form_data/index.md
index 4539ef4b970651..580f46ec236f20 100644
--- a/files/ru/learn/forms/sending_and_retrieving_form_data/index.md
+++ b/files/ru/learn/forms/sending_and_retrieving_form_data/index.md
@@ -311,17 +311,3 @@ SQL -вброс представляет собой тип атак, при ко
- [Веб-безопасность от Mozilla](https://infosec.mozilla.org/guidelines/web_security)
{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}
-
-## В этом модуле
-
-- [Ваша первая HTML-форма](/ru/docs/Learn/Forms/Your_first_form)
-- [Как структурировать HTML-форму](/ru/docs/Learn/Forms/How_to_structure_a_web_form)
-- [Предопределённые виджеты](/ru/docs/Learn/Forms/Basic_native_form_controls)
-- [Отправка данных формы](/ru/docs/Learn/Forms/Sending_and_retrieving_form_data)
-- [Валидация данных формы](/ru/docs/Learn/Forms/Form_validation)
-- [Как создавать кастомные виджеты](/ru/docs/Learn/Forms/How_to_build_custom_form_controls)
-- [Отправка форм с помощью JavaScript](/ru/docs/Learn/Forms/Sending_forms_through_JavaScript)
-- [HTML-формы в старых версиях браузеров](/ru/docs/Learn/Forms/HTML_forms_in_legacy_browsers)
-- [Стилизация HTML-форм](/ru/docs/Learn/Forms/Styling_web_forms)
-- [Продвинутая стилизация для HTML-форм](/ru/docs/Learn/Forms/Advanced_form_styling)
-- [Таблица совместимости свойств виджетов форм](/ru/docs/Learn/Forms/Property_compatibility_table_for_form_controls)
diff --git a/files/ru/learn/getting_started_with_the_web/css_basics/index.md b/files/ru/learn/getting_started_with_the_web/css_basics/index.md
index d6a63832f89130..c191423fff6ded 100644
--- a/files/ru/learn/getting_started_with_the_web/css_basics/index.md
+++ b/files/ru/learn/getting_started_with_the_web/css_basics/index.md
@@ -241,14 +241,3 @@ img {
Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу [страницу изучения CSS](/ru/docs/Learn/CSS).
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
-
-## В этом модуле
-
-- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
-- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
-- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
-- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
-- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
-- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
-- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
-- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md
index 2746d7d533ed9b..7c188809096318 100644
--- a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -78,14 +78,3 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files
![A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file](file-structure.png)
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
-
-## В этом модуле
-
-- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
-- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
-- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
-- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
-- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
-- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
-- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
-- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md
index c0bb010545c20a..121e3790cb8842 100644
--- a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md
+++ b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md
@@ -70,14 +70,3 @@ _Как работает Веб_ даст упрощённое представ
Фото улицы: [Street composing](https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ), [Kevin D](https://www.flickr.com/photos/kdigga/).
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
-
-## В этом модуле
-
-- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
-- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
-- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
-- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
-- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
-- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
-- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
-- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/html_basics/index.md b/files/ru/learn/getting_started_with_the_web/html_basics/index.md
index 473dc7482d8b52..32d57206c3ceb4 100644
--- a/files/ru/learn/getting_started_with_the_web/html_basics/index.md
+++ b/files/ru/learn/getting_started_with_the_web/html_basics/index.md
@@ -224,14 +224,3 @@ HTML не является языком программирования; это
Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу [Обучение HTML: руководства и уроки](/ru/Learn/HTML).
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
-
-## В этом модуле
-
-- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
-- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
-- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
-- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
-- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
-- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
-- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
-- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md
index 37a365d3697962..bb29ac982f8579 100644
--- a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md
+++ b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md
@@ -44,14 +44,3 @@ slug: Learn/Getting_started_with_the_web/Installing_basic_software
Некоторые примеры для успешной работы необходимо будет запустить на веб-сервере. Вы можете узнать, как это сделать в статье [Как настроить локальный сервер для тестирования?](/ru/docs/Learn/Common_questions/set_up_a_local_testing_server)
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
-
-## В этом модуле
-
-- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
-- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
-- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
-- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
-- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
-- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
-- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
-- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md
index 6490842dd7e413..f4091c4a318ced 100644
--- a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md
+++ b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md
@@ -325,14 +325,3 @@ myHTML.onclick = function () {};
Здесь мы узнали только самую поверхность JavaScript. Если вам понравился этот язык и вы хотите изучить его поглубже, перейдите к нашему разделу [изучение JavaScript](/ru/docs/Learn/JavaScript).
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
-
-## В этом модуле
-
-- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
-- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
-- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
-- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
-- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
-- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
-- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
-- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md
index 5e06ace3509df9..e7a00ff7ca7700 100644
--- a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md
+++ b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md
@@ -152,14 +152,3 @@ git push
- [Cheap or Free Static Website Hosting](http://alignedleft.com/resources/cheap-web-hosting), статья написанная Скоттом Мюрреем содержит некоторые полезные идеи о доступных сервисах.
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
-
-## В этом модуле
-
-- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
-- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
-- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
-- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
-- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
-- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
-- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
-- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
index 997b672afdda02..a27925e343d746 100644
--- a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
+++ b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
@@ -73,14 +73,3 @@ _Каким должен быть ваш веб-сайт?_ обсудите пл
![](font2.png)
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
-
-## В этом модуле
-
-- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
-- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
-- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
-- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
-- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
-- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
-- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
-- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
index 7d1887184d0f8d..46bcdd6ffa22e3 100644
--- a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -721,15 +721,3 @@ HTML также содержит элемент {{htmlelement ("time")}} для
На этом мы подошли к концу нашего изучения семантики текста HTML. Имейте в виду, что то, что вы видели во время этого курса, не является исчерпывающим списком текстовых элементов HTML. Мы попытались охватить основные из них, с которыми вы, скорее всего, столкнётесь в практической деятельности или, по крайней мере, сочтёте их интересными. Чтобы найти больше элементов HTML, вы можете взглянуть на нашу ссылку на [Элемент](/ru/docs/Web/HTML/Element). В следующей статье мы рассмотрим элементы HTML, которые вы будете использовать для структурирования различных частей HTML-документа.
{{PreviousMenuNext ("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
-
-## В этом модуле
-
-- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
-- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
-- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
-- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
-- [Продвинутое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
-- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
-- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
-- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
-- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/debugging_html/index.md b/files/ru/learn/html/introduction_to_html/debugging_html/index.md
index 2045564b309c8d..f08806d3e9a539 100644
--- a/files/ru/learn/html/introduction_to_html/debugging_html/index.md
+++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.md
@@ -147,15 +147,3 @@ HTML можно проверить по адресу, загрузив файл
Теперь вы умеете отлаживать HTML. С новыми знаниями вам будет проще разобраться и в отладке более сложных языков — например, CSS и JavaScript. На этом мы заканчиваем вводный модуль курса HTML — время попробовать свои силы в упражнениях.
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
-
-## В этом модуле
-
-- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
-- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
-- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
-- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
-- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
-- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
-- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
-- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
-- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
index f9afd9b74a3bab..09f8628c09290d 100644
--- a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
+++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -283,15 +283,3 @@ slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
- [Using HTML sections and outlines](/ru/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines): Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
-
-## В этом модуле
-
-- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
-- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
-- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
-- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
-- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
-- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
-- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
-- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
-- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.md b/files/ru/learn/html/introduction_to_html/getting_started/index.md
index fff1049e7f75ed..5bcf236dd3dd3f 100644
--- a/files/ru/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/ru/learn/html/introduction_to_html/getting_started/index.md
@@ -724,15 +724,3 @@ textarea.onkeyup = function () {
- [Применение цвета к элементам HTML с помощью CSS](/ru/docs/Web/HTML/Applying_color)
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}}
-
-## В этом модуле
-
-- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
-- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
-- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
-- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
-- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
-- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
-- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
-- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
-- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
index de0293a93507d1..d481055832ef29 100644
--- a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
+++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
@@ -1010,15 +1010,3 @@ HTML5 переопределил \, \ и \ с новыми, неско
Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как [создавать гиперссылки](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), возможно, самый важный элемент в Интернете.
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
-
-## В этом модуле
-
-- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
-- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
-- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
-- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
-- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
-- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
-- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
-- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
-- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.md b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.md
index b7f0c24e92c6ca..e32eb439cd90d1 100644
--- a/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.md
+++ b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.md
@@ -60,15 +60,3 @@ slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на [форум, в тему этого задания](https://discourse.mozilla.org/t/marking-up-a-letter-assignment/24676), или по тегу [#mdn](irc://irc.mozilla.org/mdn) в нашем IRC-канале ([Mozilla IRC](https://wiki.mozilla.org/IRC)). Сделайте это задание сами — вам некого обманывать, кроме себя самого.
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
-
-## В этом модуле
-
-- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
-- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
-- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
-- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
-- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
-- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
-- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
-- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
-- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.md b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
index ad9ee11ff963d2..55599829e856cf 100644
--- a/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
+++ b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
@@ -60,15 +60,3 @@ slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на [форум, задав тему обсуждения этого упражнения, или в IRC-канале #mdn в IRC Mozilla](https://discourse.mozilla.org/t/structuring-a-page-of-content-assessment/24678), или в IRC-канале [#mdn](irc://irc.mozilla.org/mdn) в [IRC Mozilla](https://wiki.mozilla.org/IRC). Попробуйте выполнить задание сами, ведь вам некого обманывать, кроме себя самого!
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
-
-## В этом модуле
-
-- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
-- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
-- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
-- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
-- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
-- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
-- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
-- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
-- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index 7fdb513737131f..312bee3df99c44 100644
--- a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -281,15 +281,3 @@ slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
На этом заканчивается наш беглый обзор по HTML-блоку head — с его помощью вы можете делать гораздо больше, но исчерпывающий обзор будет скучным и запутанным на этом этапе, мы же сейчас хотели дать вам представление о самых распространённых вещах, которые вы можете там найти! В следующей статье мы рассмотрим основы разметки текста в HTML.
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
-
-## В этом модуле
-
-- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
-- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
-- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
-- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
-- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
-- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
-- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
-- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
-- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
index bbcdfcc31fcf99..4d88904e9042a0 100644
--- a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
@@ -320,12 +320,3 @@ textarea.onkeyup = function () {
- [How to scale SVGs](https://css-tricks.com/scale-svg/) (it's not as simple as raster graphics!)
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
-
-## В этом модуле
-
-- [Изображения в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
-- [Видео и аудио контент](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
-- [От \