Як створити список, що розкривається в html без java
категорія Комп'ютер
Відео: Як зробити слайдер для сайту на HTML + CSS
Ви створили дуже довгий список в HTML і хочете, щоб ваш відвідувач мав можливість згорнути або розгорнути його? Щоб налаштувати функцію, яка дозволяє відвідувачеві це зробити, прочитайте цю статтю, яка допомагає налаштувати код для виправдання цих очікувань.
кроки
1
Відкрийте просту програму для редагування тексту, таку як Notepad або WordPad (в ОС Windows), або TextEdit (в Mac).
2
Починайте свій сайт, як і будь-яку іншу веб-сторінку, додавши водночас тег і
3
створіть j 097; vascript-частина документа, яка вказує вашому браузеру відображати списки в розкривається / розширюється формі. Використовуйте наступний код, щоб створити цей сценарій.
lt;style type="text / css"gt; .row {vertical-align: top- height: auto! important-} .list {display: none; } .show {display: none; } .hide: target + .show {display: inline-} .hide: target {display: none; } .hide: target ~ .list {display: inline-} @media print {.hide, .show {display: none; }}lt;/stylegt;
4
Закрийте головну частину сторінки закриттям тега для заголовка сторінки ().
Відео: Просте меню, що випадає
5
Створіть тіло HTML коду. Введіть тег для запуску тіла () ..
6
Створіть зміст списку, в тому числі деякі дані по дизайну HTML для використання користувачами в браузері, щоб розгорнути або згорнути список. Використовуйте наступний код для створення цієї процедури. Пам`ятайте про необхідність дотримання правил по створенню списків і вкладених списків всередині коду.
lt;div class="row"gt;lt;a href="# hide1" class="hide" id="hide1"gt; Expandlt;/agt;lt;a href="# show1" class="show" id="show1"gt; Collapselt;/agt;lt;div class="list"gt;lt;ulgt;lt;ligt; Item 1lt;/ligt;lt;ligt; Item 2lt;/ligt;lt;ligt; Item 3lt;/ligt;lt;/ulgt;lt;/divgt;lt;/divgt;
7
Закрийте розділ body HTML-коду, ввівши тег.
8
Введіть закриває тег для завершення створення файлу.
9
Збережіть свою роботу у вигляді файлу або з розширенням .HTML, або розширенням .HTM, і перегляньте сторінку в браузері, перш ніж повністю завантажувати її в Інтернет.