Переключатель вкладок на CSS для сайта
 | |
| Вашему вниманию оригинальный по функциям переключатели вкладок или как еще называют (Табы) где можно поставить на ответ комментарий. Но также вы можете их увидеть в работе по информации, что просто прописываем в каждую вкладку статью или можно поставить генератор под скриптом и здесь же на втором размещаем картинку. Все безусловно зависит от тематики, но больше всего можно увидит в ответе, где устанавливают как по умолчанию таблицу и к ним ставят на другие вкладки от социальных сетей. Что каждая площадка предоставляет свой код и под табы они отлично подходят и можно ответить быстро не регистрируясь на интернет ресурсе. Здесь чистый код и стили, дизайн не добавлен, что сами можете сделать и прикрепить шрифтовые иконки и выставить совершенно другой оттенок. Но главное в нем, это эффект переключение, здесь нет клика, просто вы наводите и автоматически открывается и не будет закрываться, пока сами не переключите, что очень удобно сделано для пользователя. Если говорить про адаптацию, то с описанием отлично смотрится на любом размере монитора или мобильного аппарата. Так что установка у него простая и если его преображать, то все делается в CSS, что идет с материалом. Вот добавлен стиль, который закругляет углы, чтоб поняли, вы можете сделать в стилистике больше.  Приступаем к установке: Ставим в ответ или там где вам нужно для информации. Код <div id="raz"> <div><span>CSS</span>ZORNET.RU HTML #1</div> <div><span>ZORNET.RU HTML #2</span><center> <img border="0" align="absmiddle" src="http://image.prntscr.com/image/f786a5b9763448b4942ed5f39fd5f220.png"> <br> Здесь может всякое по тематике написано, так как можно переключить или установить то что вам нужно для функциональности портала.</center> </div> <div><span>Дополнительно</span>ZORNET.RU HTML #3</div> </div> CSS: Код #raz { /* корпус */ position: relative; height: 250px; border-top: 30px solid #fff; } #raz > div { /* вкладка */ position: absolute; z-index: 1; height: 100%; width: 100%; visibility: collapse; transition: 0s 9999999s; box-sizing: border-box; background: #fff; padding: 5px; } #raz > div:before { /* рамка вкладки */ content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; border: #808080 solid 1px; border-top: none; } #raz > div:hover, #raz > div:nth-of-type(1) { visibility: visible; transition: 0s; } #raz:hover > div:not(:hover) { visibility: hidden; transition: 0s; } #raz > div > span { /* кнопка */ position: absolute; top: -30px; line-height: 30px; height: 30px; width: 33.33%; /* 4 вкладки, а значит 100/4 */ text-align: center; box-sizing: border-box; border: 1px solid rgb(128,128,128); border-left-color: rgba(0,0,0,0); visibility: visible; transition: 0s 9999999s; cursor: pointer; } #raz > div:nth-of-type(1) > span {left: 0; border-left-color: rgb(128,128,128);} #raz > div:nth-of-type(2) > span {left: 33.33%;} #raz > div:nth-of-type(3) > span {left: 66.66%;} #raz > div:hover > span, #raz > div:nth-of-type(1) > span { border-bottom-color: rgba(0,0,0,0); transition: 0s; } #raz:hover > div:not(:hover) > span { border-bottom-color: rgba(128,128,128,.99); transition: 0s; } #raz > div:not(:nth-of-type(1)):not(:hover):after { /* появляется нижняя граница у первой кнопки */ content: ""; left: 0; position: absolute; top: -1px; width: 33.33%; border-top: 1px solid rgb(128,128,128); } В стилях все указано и написано под каждую функцию, что и где отвечает и где можно что то добавить или отредактировать под свой дизайн. Но и предоставлена демонстрация на вкладки, чтоб было понятно как работает. Автор: NMitra | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
