Як створити список, що розкривається в html без java

Відео: Як зробити слайдер для сайту на HTML + CSS

Ви створили дуже довгий список в HTML і хочете, щоб ваш відвідувач мав можливість згорнути або розгорнути його? Щоб налаштувати функцію, яка дозволяє відвідувачеві це зробити, прочитайте цю статтю, яка допомагає налаштувати код для виправдання цих очікувань.

кроки

Зображення з назвою 2967479 1
1
Відкрийте просту програму для редагування тексту, таку як Notepad або WordPad (в ОС Windows), або TextEdit (в Mac).
  • Зображення з назвою 2967479 2
    2
    Починайте свій сайт, як і будь-яку іншу веб-сторінку, додавши водночас тег і
  • Зображення з назвою 2967479 3
    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;
  • Зображення з назвою 2967479 4
    4
    Закрийте головну частину сторінки закриттям тега для заголовка сторінки ().

    Відео: Просте меню, що випадає

  • Зображення з назвою 2967479 5
    5
    Створіть тіло HTML коду. Введіть тег для запуску тіла () ..
  • Зображення з назвою 2967479 6
    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;
  • Зображення з назвою 2967479 7
    7
    Закрийте розділ body HTML-коду, ввівши тег.
  • Зображення з назвою 2967479 8
    8
    Введіть закриває тег для завершення створення файлу.
  • Зображення з назвою 2967479 9
    9
    Збережіть свою роботу у вигляді файлу або з розширенням .HTML, або розширенням .HTM, і перегляньте сторінку в браузері, перш ніж повністю завантажувати її в Інтернет.


  • Увага, тільки СЬОГОДНІ!

    Увага, тільки СЬОГОДНІ!
    » » Як створити список, що розкривається в html без java