|
|
| Рядок 1: |
Рядок 1: |
| == <style> /* Основний контейнер */ ==
| | <div class="info-box"> |
| #toc {
| | <strong>Порада:</strong> Тут текст поради або важливої інформації. |
| width: 90%;
| |
| max-width: 28em;
| |
| margin: 0 auto 1em auto;
| |
| background: rgba(135,206,250,0.1);
| |
| padding: 0.8em;
| |
| border: 1px solid #007BFF;
| |
| border-radius: 10px;
| |
| font-size: 1rem;
| |
| line-height: 1.35;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| /* Приховування підпунктів на мобільних */
| |
| @media (max-width: 768px) {
| |
| .toc ul ul {
| |
| display: none;
| |
| padding-left: 1em;
| |
| }
| |
| .toc li.expandable > span {
| |
| cursor: pointer;
| |
| display: inline-block;
| |
| position: relative;
| |
| padding-right: 1.2em;
| |
| }
| |
| .toc li.expandable > span::after {
| |
| content: "▶";
| |
| position: absolute;
| |
| right: 0;
| |
| transition: transform 0.2s ease;
| |
| }
| |
| .toc li.expandable.open > span::after {
| |
| transform: rotate(90deg);
| |
| }
| |
| .toc li.expandable.open > ul {
| |
| display: block;
| |
| }
| |
| }
| |
| </style>
| |
| | |
| <div id="toc" class="toc"> | |
| <h3 style="text-align: center; color: #00008B;">Merchant API</h3>
| |
| <ul>
| |
| <li><a href="#">Головна сторінка</a></li> | |
| <li class="expandable">
| |
| <span>Загальні відомості</span>
| |
| <ul>
| |
| <li><a href="#">Заголовки запитів</a></li>
| |
| <li><a href="#">URL</a></li>
| |
| <li><a href="#">Налаштування безпеки</a></li>
| |
| <li><a href="#">Реєстрація партнера</a></li>
| |
| </ul>
| |
| </li>
| |
| <li class="expandable">
| |
| <span>Основні запити та відповіді</span>
| |
| <ul>
| |
| <li><a href="#">Створення замовлення</a></li>
| |
| <li><a href="#">Перевірка статусу</a></li>
| |
| </ul>
| |
| </li>
| |
| </ul>
| |
| </div> | | </div> |
|
| |
| <script>
| |
| // JS для відкриття/закриття підпунктів на мобільних
| |
| document.querySelectorAll('#toc li.expandable > span').forEach(item => {
| |
| item.addEventListener('click', () => {
| |
| item.parentElement.classList.toggle('open');
| |
| });
| |
| });
| |
| </script>
| |
Порада: Тут текст поради або важливої інформації.