Как скрыть блок на странице
{"ops":[{"insert":"Сегодня я расскажу вам как можно скрыть блок в разметке HTML. Все очень просто, самый простой способ это задать в стилях для нужного блока:\n.block {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" display: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Зачем нам это нужно, например у нас существует страница и при переходе на мобильную версию, мы хотим упростить ее и не показывать данные из какого-то блока, и этот способ может очень нам помочь, достаточно только добавить миксин в стили, с классом нашего блока, например:\n@media (max-width: 767px) {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .block {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" display: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Давайте создадим три блока и уберем один из разметки, средствами "},{"attributes":{"bold":true},"insert":"CSS"},{"insert":".\n"}]}
See the Pen Block1 by Aleksa (@mariamaskina) on CodePen.
{"ops":[{"insert":"Возможно вам пригодится ещё и такой вариант, если к существующему коду мы добавим немного "},{"attributes":{"bold":true},"insert":"JS"},{"insert":", то при клике по первому блоку у нас будет открываться второй. Для закрытия второго блока кликните по нему. Иногда это бывает очень полезно. \n"}]}
See the Pen Blocks 2 by Aleksa (@mariamaskina) on CodePen.
{"ops":[{"insert":"В "},{"attributes":{"bold":true},"insert":"CSS"},{"insert":" есть много различных способов сокрытия элементов. Можно установить opacity: 0, visibility: hidden, display: none или задать сверх большие значения при абсолютном позиционировании. При использовании свойства display: none блок полностью сворачивается и как-бы выпадает из разметки, давайте рассмотрим свойство opacity, с помощью которого задается прозрачность элемента. Данное свойство не изменяет границы элемента, т.е. если задать 0, то элемент будет скрыт только визуально. Элемент все так же будет занимать свое положение и пространство, влияя на расположение других элементов макета страницы. Кроме того, невидимый элемент будет отвечать на взаимодействие с ним.\nЕсли мы наведем курсор на второй блок, то он плавно поменяет свое состояние с полной прозрачности до полной непрозрачности. Блоку также задано свойство cursor: pointer, показывающее, что с ним можно взаимодействовать. В следующей статье расскажу еще о нескольких методах сокрытия элементов.\n"}]}
See the Pen Untitled by Aleksa (@mariamaskina) on CodePen.
Другие статьи этого автора
