меню на два подменю и выстроить их в иерархическую структуру

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

### HTML: Разделим меню на две основные группы

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item" class="dropdown">
<a href="#" itemprop="url">Каталог</a>
<ul class="dropdown-content" itemscope itemtype="http://schema.org/ItemList">

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="#" itemprop="url">Утилизация техники</a>
<ul class="submenu">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="/bankomat.html" itemprop="url">Утилизация банкоматов</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="/magadan.html" itemprop="url">Утилизация Магадан</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="/uslugi.html" itemprop="url">Утилизация электроники</a>
</li>
</ul>
</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="#" itemprop="url">Утилизация материалов</a>
<ul class="submenu">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="/avtoshin.html" itemprop="url">Утилизация автошин</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="/ytil_ognetushiteli.html" itemprop="url">Утилизация огнетушителей</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="/index.php?page=parafin.html" itemprop="url">Парафин</a>
</li>
</ul>
</li>
</ul>
</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item" class="dropdown">
<a href="#" itemprop="url">Документы</a>
<ul class="dropdown-content" itemscope itemtype="http://schema.org/ItemList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="#doc_iskra" itemprop="url">Документ 1</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="#doc_example" itemprop="url">Документ 2</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
```

### CSS: Стиль для подменю

Чтобы подменю отображались корректно, нам нужно скрыть их по умолчанию и показывать при наведении:

```css
/* Скрытие подменю по умолчанию */
.submenu {
display: none;
list-style: none;
padding-left: 20px; /* Отступ для подменю */
}

/* Показ подменю при наведении */
.dropdown:hover .submenu {
display: block;
}

/* Дополнительные стили для dropdown */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown-content li {
padding: 8px 16px;
}

.dropdown-content li a {
text-decoration: none;
color: black;
}

.dropdown-content li a:hover {
background-color: #ddd;
}
```

### JavaScript: Скрытие/показ подменю при клике (если нужно)

Чтобы подменю открывались и закрывались по клику, а не по наведению, можно использовать JavaScript:

```javascript
// Получаем все элементы с классом "dropdown"
document.querySelectorAll('.dropdown').forEach(function(dropdown) {
dropdown.addEventListener('click', function(event) {
// Закрываем все открытые подменю
document.querySelectorAll('.submenu').forEach(function(submenu) {
if (submenu !== dropdown.querySelector('.submenu')) {
submenu.style.display = 'none';
}
});

// Открываем/закрываем текущее подменю
const submenu = dropdown.querySelector('.submenu');
if (submenu.style.display === 'block') {
submenu.style.display = 'none';
} else {
submenu.style.display = 'block';
}

// Предотвращаем распространение клика
event.stopPropagation();
});
});

// Закрываем все подменю при клике вне меню
document.addEventListener('click', function() {
document.querySelectorAll('.submenu').forEach(function(submenu) {
submenu.style.display = 'none';
});
});
```

### Объяснение:
1. **HTML**: Мы создали два подменю внутри одного меню с помощью `<ul class="submenu">`. Это позволяет разделить пункты в иерархическую структуру: первое подменю — для "Утилизации техники", второе — для "Утилизации материалов". Также добавлено подменю для "Документов".

2. **CSS**: Мы скрываем подменю по умолчанию и показываем их, когда пользователь наводит курсор на родительский элемент. Вы также можете настроить стиль подменю с помощью дополнительных стилей.

3. **JavaScript**: Скрипт позволяет открывать и закрывать подменю по клику. Это делает меню более интерактивным и удобным для пользователя.

Теперь ваше меню с подменю будет разделено на два уровня, и оно будет работать как на основе наведения, так и по клику (в зависимости от того, какой способ вам нужен).

.

Конечно! Вот переписанное меню с использованием HTML и PHP, чтобы оно динамически отображалось на основе параметра `page`:

```php
<ul>
<li><a href="/index.php?page=ytil_holodilnikov" <?php echo ($_GET['page'] == 'ytil_holodilnikov' ? 'class="active"' : ''); ?>>Холодильники</a></li>
<li><a href="/index.php?page=ytil_chetchik" <?php echo ($_GET['page'] == 'ytil_chetchik' ? 'class="active"' : ''); ?>>Измерительные приборы</a></li>
<li><a href="/index.php?page=ytil_maining" <?php echo ($_GET['page'] == 'ytil_maining' ? 'class="active"' : ''); ?>>Обслуживание</a></li>
<li><a href="/index.php?page=ytil_disk" <?php echo ($_GET['page'] == 'ytil_disk' ? 'class="active"' : ''); ?>>Диски</a></li>
<li><a href="/index.php?page=ytil_led" <?php echo ($_GET['page'] == 'ytil_led' ? 'class="active"' : ''); ?>>Светодиоды</a></li>
<li><a href="/index.php?page=ytil_radio" <?php echo ($_GET['page'] == 'ytil_radio' ? 'class="active"' : ''); ?>>Радиоустройства</a></li>
<li><a href="/index.php?page=ytil_tnvd" <?php echo ($_GET['page'] == 'ytil_tnvd' ? 'class="active"' : ''); ?>>Тех. характеристики</a></li>
</ul>
```

### Объяснение:
1. **Активный класс:** В каждом элементе меню я добавил условие `<?php echo ($_GET['page'] == 'название_страницы' ? 'class="active"' : ''); ?>`. Это позволяет выделить активный пункт меню, если текущий параметр `page` совпадает с названием страницы.

Например, если пользователь на странице "Холодильники", то ссылка на "Холодильники" будет иметь класс `active`.

2. **CSS для активного элемента:**
Чтобы визуально выделить активную ссылку, вам нужно добавить стили для класса `.active`. Например:

```css
a.active {
font-weight: bold;
color: #ff5733; /* Цвет активной ссылки */
}
```

### Полный пример (HTML + PHP + CSS):

```php
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Меню сайта</title>
<style>
a.active {
font-weight: bold;
color: #ff5733;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline;
margin-right: 20px;
}
</style>
</head>
<body>

<ul>
<li><a href="/index.php?page=ytil_holodilnikov" <?php echo ($_GET['page'] == 'ytil_holodilnikov' ? 'class="active"' : ''); ?>>Холодильники</a></li>
<li><a href="/index.php?page=ytil_chetchik" <?php echo ($_GET['page'] == 'ytil_chetchik' ? 'class="active"' : ''); ?>>Измерительные приборы</a></li>
<li><a href="/index.php?page=ytil_maining" <?php echo ($_GET['page'] == 'ytil_maining' ? 'class="active"' : ''); ?>>Обслуживание</a></li>
<li><a href="/index.php?page=ytil_disk" <?php echo ($_GET['page'] == 'ytil_disk' ? 'class="active"' : ''); ?>>Диски</a></li>
<li><a href="/index.php?page=ytil_led" <?php echo ($_GET['page'] == 'ytil_led' ? 'class="active"' : ''); ?>>Светодиоды</a></li>
<li><a href="/index.php?page=ytil_radio" <?php echo ($_GET['page'] == 'ytil_radio' ? 'class="active"' : ''); ?>>Радиоустройства</a></li>
<li><a href="/index.php?page=ytil_tnvd" <?php echo ($_GET['page'] == 'ytil_tnvd' ? 'class="active"' : ''); ?>>Тех. характеристики</a></li>
</ul>

</body>
</html>
```

### Как это работает:
- Когда вы переходите на страницу с параметром `page`, например, `/index.php?page=ytil_holodilnikov`, активный пункт меню будет подсвечен, так как ссылка "Холодильники" получит класс `active`.
- Класс `active` задается для выделения активной ссылки. В CSS примере мы делаем активную ссылку жирной и меняем цвет на оранжевый.

Теперь ваше меню будет динамически отображать, какая страница активна, и визуально выделять текущую ссылку.

Ваш пример с HTML-меню показывает, как пользователи могут переходить между различными страницами сайта, добавляя параметр `page` в URL. Давайте разберемся, как это адаптировать на стороне PHP для динамического отображения соответствующих страниц.

### 1. **Создание динамической навигации (HTML)**

Вы уже правильно настроили ссылки для навигации между различными страницами. Каждая ссылка будет направлять на `index.php` с параметром `page`, который указывает, какой файл нужно загрузить. Ваш HTML выглядит так:

```html
<ul>
<li><a href="/index.php?page=ytil_holodilnikov">Холодильники</a></li>
<li><a href="/index.php?page=ytil_chetchik">Измерительные приборы</a></li>
<li><a href="/index.php?page=ytil_maining">Обслуживание</a></li>
<li><a href="/index.php?page=ytil_disk">Диски</a></li>
<li><a href="/index.php?page=ytil_led">Светодиоды</a></li>
<li><a href="/index.php?page=ytil_radio">Радиоустройства</a></li>
<li><a href="/index.php?page=ytil_tnvd">Тех. характеристики</a></li>
</ul>
```

Когда пользователь кликает по одной из этих ссылок, например, "Холодильники", параметр `page=ytil_holodilnikov` передается в `index.php`. Это позволяет динамически изменять содержимое страницы.

### 2. **Обработка параметра `page` в PHP**

Чтобы обработать этот параметр и подгрузить соответствующие файлы, вам нужно в `index.php` добавить код, который будет включать нужный PHP-файл в зависимости от значения параметра `page`.

Вот пример обработки запроса в `index.php`:

```php
<?php
// Определяем переменную для страницы, по умолчанию будет загружаться страница 'ytil_holodilnikov'
$page = $_GET['page'] ?? 'ytil_holodilnikov';

// Массив разрешенных страниц
$valid_pages = [
'ytil_holodilnikov',
'ytil_chetchik',
'ytil_maining',
'ytil_disk',
'ytil_led',
'ytil_radio',
'ytil_tnvd'
];

// Проверяем, что запрашиваемая страница существует в списке разрешенных
if (in_array($page, $valid_pages)) {
// Включаем нужный файл
include "$page.php";
} else {
// Если страница не существует, можно показать ошибку или загрузить страницу по умолчанию
echo "Страница не найдена.";
}
?>
```

### 3. **Что происходит в этом коде:**

- **Получение параметра `page`:**
Мы получаем параметр `page` из URL через `$_GET['page']`. Если параметр не передан, по умолчанию загружается страница `ytil_holodilnikov`.

- **Проверка допустимых значений:**
Мы создаем массив `$valid_pages`, в котором содержатся все допустимые значения параметра `page`. Это защитит ваш сайт от возможных попыток подгрузить опасные или несуществующие файлы.

- **Включение страницы:**
Если значение параметра `page` допустимо, загружается соответствующий файл с помощью `include "$page.php";`. Это позволит динамически подгружать контент.

- **Обработка ошибок:**
Если параметр `page` не соответствует ни одному из допустимых значений, выводится сообщение о том, что страница не найдена. Это можно заменить на редирект на главную страницу или вывод 404.

### 4. **Дополнительные меры безопасности:**

Чтобы усилить безопасность, помимо проверки массива `$valid_pages`, можно использовать функцию `basename()` для предотвращения атак с использованием пути к файлу:

```php
$page = basename($_GET['page'] ?? 'ytil_holodilnikov'); // Убираем путь и оставляем только имя файла
if (in_array($page, $valid_pages)) {
include "$page.php";
} else {
echo "Страница не найдена.";
}
```

### 5. **Пример страницы `ytil_holodilnikov.php`:**

Каждая из страниц (например, `ytil_holodilnikov.php`) может быть обычным PHP файлом, который содержит необходимую информацию. Пример:

```php

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Холодильники</title>
</head>
<body>
<h1>Информация о холодильниках</h1>
<p>Здесь можно разместить описание различных холодильников и их характеристик.</p>
</body>
</html>
```

### 6. **Визуальная структура**

Весь сайт будет динамически подгружать страницы в зависимости от параметра, передаваемого в URL. Например, если пользователь нажимает на ссылку "Холодильники", в URL будет `index.php?page=ytil_holodilnikov`, и на странице отобразится контент из файла `ytil_holodilnikov.php`.

---

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

Чтобы адаптировать информацию, которую вы предоставили, давайте приведем пример, как это может выглядеть в контексте сайта или кода:

### 1. **PHP файлы**
Если эти файлы являются модулями на вашем сайте, вы можете организовать их таким образом:

```php
// Пример использования файлов на сайте
include 'ytil_chetchik.php'; // Страница, посвященная измерительным приборам
include 'ytil_maining.php'; // Страница, посвященная обслуживанию и монтажу
include 'ytil_disk.php'; // Страница с информацией о дисках и запчастях
include 'ytil_led.php'; // Страница, посвященная светодиодам
include 'ytil_radio.php'; // Страница для радиоустройств
include 'ytil_tnvd.php'; // Страница с техническими характеристиками
```

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

### 2. **Адаптация записи в XML-сайте (Sitemap)**

Вам нужно адаптировать URL-адрес и метаданные для использования в **sitemap**. Пример адаптированного файла `sitemap.xml`:

```xml
<url>
<loc>https://xn----8sbislgdtbp8l.xn--p1ai/ytil_holodilnikov.html</loc>
<lastmod>2024-11-01T00:00:15+01:00</lastmod>
<priority>0.80</priority>
</url>
<url>
<loc>https://xn----8sbislgdtbp8l.xn--p1ai/ytil_chetchik.php</loc>
<lastmod>2024-11-10T12:00:00+01:00</lastmod>
<priority>0.75</priority>
</url>
<url>
<loc>https://xn----8sbislgdtbp8l.xn--p1ai/ytil_maining.php</loc>
<lastmod>2024-11-15T09:30:00+01:00</lastmod>
<priority>0.70</priority>
</url>

```

### 3. **Адаптация структуры сайта**

Если вы хотите создать структуру для представления всех этих страниц на вашем сайте, можно использовать HTML и CSS:

```html
<ul>
<li><a href="/ytil_holodilnikov.html">Информация о холодильниках</a></li>
<li><a href="/ytil_chetchik.php">Измерительные приборы</a></li>
<li><a href="/ytil_maining.php">Обслуживание и монтаж</a></li>
<li><a href="/ytil_disk.php">Запчасти и диски</a></li>
<li><a href="/ytil_led.php">Светодиоды</a></li>
<li><a href="/ytil_radio.php">Радиоустройства</a></li>
<li><a href="/ytil_tnvd.php">Технические характеристики</a></li>
</ul>
```

### 4. **Пример обработки в PHP**
Если вы хотите динамически отображать эти страницы, вы можете использовать PHP для включения различных разделов. Пример:

```php
<?php
$page = $_GET['page'] ?? 'ytil_holodilnikov'; // Устанавливаем страницу по умолчанию

switch ($page) {
case 'ytil_chetchik':
include 'ytil_chetchik.php';
break;
case 'ytil_maining':
include 'ytil_maining.php';
break;
case 'ytil_disk':
include 'ytil_disk.php';
break;
case 'ytil_led':
include 'ytil_led.php';
break;
case 'ytil_radio':
include 'ytil_radio.php';
break;
case 'ytil_tnvd':
include 'ytil_tnvd.php';
break;
default:
include 'ytil_holodilnikov.php';
}
?>
```

Этот код позволит пользователю динамически переключаться между различными страницами, передавая их через параметр `?page=` в URL.

Если вам нужно больше информации по адаптации для конкретной задачи или платформы, дайте знать!

Для создания выпадающего меню с несколькими уровнями, вы можете использовать HTML и CSS. Ниже приведён пример, как это можно сделать для вашего меню:

### HTML:

```html
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<div class="menu">
<div class="logo">
<img src="/logo.png" alt="Логотип" />
<a href="/" itemprop="url" class="logo-text">Мир Эколога РФ</a>
</div>
<ul>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="mailto:zakaz@мир-эколога.рф" itemprop="url">email: zakaz@мир-эколога.рф</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item" class="dropdown">
<a href="#" itemprop="url">Каталог</a>
<ul class="dropdown-content" itemscope itemtype="http://schema.org/ItemList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="/bankomat.html" itemprop="url">Утилизация банкоматов</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="/magadan.html" itemprop="url">Утилизация Магадан</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="/uslugi.html" itemprop="url">Утилизация электроники</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="/ytil_ognetushiteli.html" itemprop="url">Утилизация огнетушителей</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="/avtoshin.html" itemprop="url">Утилизация автошин</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="/parafin.html" itemprop="url">Утилизация парафина</a>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="/ytil_holodilnikov.html" itemprop="url">Утилизация холодильников</a>
</li>
</ul>
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Item">
<a href="#doc_iskra" itemprop="url">Документы</a>
</li>
</ul>
</div>
</nav>
```

### CSS:

```css
/* Основное меню */
.menu {
background-color: #333;
padding: 10px;
font-family: Arial, sans-serif;
}

.menu .logo {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.menu .logo img {
height: 50px;
margin-right: 10px;
}

.menu ul {
list-style: none;
margin: 0;
padding: 0;
}

.menu ul li {
display: inline-block;
position: relative;
margin-right: 20px;
}

.menu a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
}

.menu a:hover {
background-color: #555;
}

/* Стиль для выпадающего меню */
.dropdown {
position: relative;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #333;
top: 100%;
left: 0;
min-width: 200px;
z-index: 1;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.dropdown-content li {
display: block;
text-align: left;
}

.dropdown:hover .dropdown-content {
display: block;
}

/* Добавление анимации при появлении меню */
.dropdown-content a {
padding: 12px 16px;
}

.dropdown-content a:hover {
background-color: #444;
}

/* Мобильная версия: скрыть меню */
@media (max-width: 768px) {
.menu ul {
display: none;
width: 100%;
}

.menu ul li {
display: block;
width: 100%;
}

.menu ul li a {
padding: 10px;
text-align: center;
width: 100%;
}

.menu .menu-toggle {
display: block;
cursor: pointer;
}

.menu.active ul {
display: block;
}
}
```

### Объяснение:

1. **HTML структура**:
- В меню используется элемент `ul` для списка, а также `li` для каждого элемента.
- В блоке `dropdown` добавлено выпадающее меню с вложенным списком (`<ul class="dropdown-content">`).
- Для того, чтобы сделать подменю видимым при наведении, мы используем классы и стили CSS.

2. **CSS стили**:
- Главное меню стилизовано с фоном, выравниванием и эффектами при наведении.
- Выпадающее меню (класс `.dropdown-content`) скрыто по умолчанию с помощью `display: none`, а при наведении на родительский элемент `.dropdown` оно становится видимым с помощью `display: block`.
- Добавлены стили для анимации при наведении и улучшенного визуального восприятия.

3. **Мобильная версия**:
- При ширине экрана менее 768 пикселей меню будет скрываться и открываться по клику. Это позволит адаптировать меню для мобильных устройств.

Для работы мобильной версии потребуется добавить JavaScript, чтобы включить переключение видимости меню. Пример:

### JavaScript для мобильного меню (по клику):

```javascript
document.querySelector('.menu-toggle').addEventListener('click', function() {
document.querySelector('.menu').classList.toggle('active');
});
```

Вам нужно будет добавить кнопку в HTML для открытия меню на мобильных устройствах (например, гамбургер-меню):

```html
<div class="menu-toggle">☰</div>
```

Этот код добавляет выпадающее меню с подменю и адаптирует его для мобильных устройств.