😎 » HTML5 » Каркас документа » details - Дополнительная информация
263 0  

details - Дополнительная информация

5.0 ☒

details - Новый семантический элемент для скрытия дополнительной информации, вместо гамбургеров и баянов теперь все можно сделать на чистом HTML и CSS

Пример использования для выпадающего меню - смотреть

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

 /*--- Стилизация треугольника  ---*/
<style>
summary {
  display: block;  /*--- !!! Нужно добавлять блочный тип чтобы можно было скрывать маркер ---*/
}

  summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: '\25B6';
  padding-right: 0.5em;
}

details[open] > summary::before {
  content: '\25BC';
}

</style>

Собственые атрибуты:

Когда блок активный к details добавляется - open.

<details open> 

open:

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

Как убрать маркер summary?

Нужно задать для summary тип block! А потом уже добавлять

summary::-webkit-details-marker {
  display: none;
}


fellow Можно влаживать друг в друга:

<details id="navrull">
    <summary>Вопрос 1</summary>
    <p>Население превышает широкий кристаллический фундамент.</p>
    <details>
        <summary>Приложенные документы</summary>
        <ul>
            <li><a href="#">Болгары очень дружелюбны;</a></li>
            <li>Скумбрия неумеренно перевозит вулканизм;</li>
            <li>Дождливая погода, куда входят Пик-Дистрикт;</li>
            <li>Белый саксаул дегустирует живописный утконос;</li>
        </ul>
    </details>
</details>

Чтобы добавлять атрибут open в зависимости от размера экрана через JS:

/* ☢  Робить головне меню відкритим в десктопній версії  ☢*/
  if (window.matchMedia("(min-width:1100px)").matches) { //якщо співпадає розмір екрану
    document.getElementById("navrull").open = true;
  } else {
    document.getElementById("navrull").open = false;
  }
  
 
 Chrome  Edge  Firefox  Internet  Opera  Safari
12 79 49 NO 15 6
 
 Android  Chrome  Edge  Firefox  Opera  Safari  Samsung
Yes 12 79 49 15 6 Yes

Провірити на сайті developer.mozilla.org

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023