ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Темный и светлый фон вкладок на jQuery

Темный и светлый фон вкладок на jQuery

Прекрасно по дизайну в выполнены вкладки с минимальным дизайном, которые идут в темный и светлый фоне, что можно задействовать под переключатели. Если тебе надоел стандартный стиль для вкладок, то безусловно это стильное решение для тебя. Плюс в том, что они отлично смотрятся на мобильных аппаратах, ведь изначально настроены под большой монитор и самый малые экраны. Изначально вопрос состоял, это как мы можем создать минимальную вкладку, используя JS или любую библиотеку JavaScript.

В рассматриваем 2 оригинальных по своему стилю вкладки, где одна на светлом фоне, другая на темном фоне. В остальном эти две вкладки похожи, есть общие эффекты и дизайн. Вкладка имеет минимальный и сексуальный дизайн, есть связь между заголовком и содержимым. Когда вы щелкнете по любому заголовку, его содержимое будет видно, а стрелка нижней стороны добавит активный заголовок.

Темный вид:

Светлый вид:

Установка:

В HEAD установим

Код

HTML

Код

<div class="lightTab">
<div class="minimalTabs">

  <ul>
  <li><a href="#Web">
  <span>Web D</span></a></li>
  <li><a href="#Graphic">
  <span>Graphic D</span></a></li>
  <li><a href="#SEO">
  <span>SEO</span></a></li>
  </ul>

  <div class="contents">
  <div id="Web">
  <h2>Web</h2>
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/computer.png">
  <p>GameStop смело решает проблему массового снижения продаж в праздничные дни, но компания находится под ударом.</p>
  <p>Microsoft приняла много плохих решений относительно Xbox One в начале своей жизни, и никогда не было совершенно ясно, почему. Его фокус на Kinect, возможно, сыграл прямую роль.</p>

  </div>

  <div id="Graphic">
  <h2>Graphic</h2>
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/email.png">
  <p>Polygon опубликовал действительно превосходное глубокое погружение в дизайн и разработку Kinect, от концепции до Xbox One. История, которую они рассказывают, захватывающая.</p>

  </div>

  <div id="SEO">
  <h2>SEO</h2>
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/work.png">
  <p>Создание камеры для всего тела игрока (теоретически) станет радикальным скачком вперед в играх, открывая захватывающий опыт, который игра на основе контроллера просто не может повторить.</p>

  </div>
  </div>
</div>

</div>

<div class="darkTab">
<div class="minimalTabs dark">

  <ul>
  <li><a href="#Web">
  <span>Web D</span></a></li>
  <li><a href="#Graphic">
  <span>Graphic D</span></a></li>
  <li><a href="#SEO">
  <span>SEO</span></a></li>
  </ul>

  <div class="contents">
  <div id="Web">
  <h2>Web</h2>
  <img src="https://webdevtrick.com/wp-content/uploads/computer.png">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis dui quis convallis sagittis. Praesent nec varius dui. Nam sed fringilla diam. Donec sed ligula turpis.</p>
  <p>Maecenas ornare id orci in cursus. Phasellus eleifend, lorem lobortis placerat efficitur, dolor diam posuere elit, sit amet tempor massa tortor</p>

  </div>

  <div id="Graphic">
  <h2>Graphic</h2>
  <img src="https://webdevtrick.com/wp-content/uploads/email.png">
  <p>In mattis scelerisque tellus eget consectetur. Donec interdum sem arcu. Etiam molestie, ex nec pharetra vulputate, quam ante sodales nibh, quis consectetur metus neque at velit. Nam nec nibh vitae quam bibendum posuere non sit amet sapien.</p>

  </div>

  <div id="SEO">
  <h2>SEO</h2>
  <img src="https://webdevtrick.com/wp-content/uploads/work.png">
  <p>In mattis scelerisque tellus eget consectetur. Donec interdum sem arcu. Etiam molestie, ex nec pharetra vulputate, quam ante sodales nibh, quis consectetur metus neque at velit. Nam nec nibh vitae quam bibendum posuere non sit amet sapien. Pellentesque at nulla varius, malesuada nunc in, mattis lectus</p>

  </div>
  </div>
</div>

</div>

CSS

Код

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);
body {
  font-size: 1em;
  background: #fafafa;
  font-family: Lato;
  font-weight: 300;
}
h1 {
  text-align: center;
  font-size: 20px;
}
.minimalTabs {
  width: 90%;
  min-width: 360px;
  margin: auto;
}
.contents {
  padding: 20px 50px;
  min-height: 200px;
}
.darkTab {
  background: #333;
  color: white;
}
.darkTab,
.lightTab {
  padding: 50px 0;
}
img {
  width: 60px;
  float: left;
  margin: 0 1em 1em 0;
}
.minimalTabs > ul {
  text-align: center;
  font-weight: 500;
  margin: 50px 0 0;
  padding: 0;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.minimalTabs > ul > li {
  display: inline-block;
  background: #fafafa;
  padding: 0.6em 0;
  position: relative;
  width: 33%;
  margin: 0 0 0 -4px;
}
.minimalTabs > ul > li:before, .minimalTabs > ul > li:after {
  opacity: 0;
  transition: 0.3s ease;
}
.minimalTabs > ul > li.ui-tabs-active:before, .minimalTabs > ul > li.ui-tabs-active:after, .minimalTabs > ul > li.ui-state-hover:before, .minimalTabs > ul > li.ui-state-hover:after, .minimalTabs > ul > li.ui-state-focus:before, .minimalTabs > ul > li.ui-state-focus:after {
  opacity: 1;
}
.minimalTabs > ul > li:before, .minimalTabs > ul > li.ui-state-active.ui-state-hover:before, .minimalTabs > ul > li.ui-state-active.ui-state-focus:before {
  content: "";
  position: absolute;
  z-index: -1;
  box-shadow: 0 2px 3px rgba(22, 195, 255, 0.5);
  top: 50%;
  bottom: 0px;
  left: 5px;
  right: 5px;
  border-radius: 100px / 10px;
}
.minimalTabs > ul > li:after, .minimalTabs > ul > li.ui-state-active.ui-state-hover:after, .minimalTabs > ul > li.ui-state-active.ui-state-focus:after {
  content: "";
  background: #fafafa;
  position: absolute;
  width: 12px;
  height: 12px;
  left: 50%;
  bottom: -6px;
  margin-left: -6px;
  transform: rotate(45deg);
  box-shadow: inset 3px 3px 3px rgba(22, 195, 255, 0.5), inset 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.minimalTabs > ul > li.ui-state-hover:before, .minimalTabs > ul > li.ui-state-focus:before {
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
.minimalTabs > ul > li.ui-state-hover:after, .minimalTabs > ul > li.ui-state-focus:after {
  box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.2), inset 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.minimalTabs > ul > li.ui-state-focus a {
  text-decoration: underline;
}
.minimalTabs > ul > li:focus {
  outline: none;
}
.minimalTabs > ul > li a {
  color: #444;
  text-decoration: none;
}
.minimalTabs > ul > li a:focus {
  outline: none;
}
.minimalTabs > ul > li a span {
  position: relative;
  top: -0.5em;
}

.minimalTabs.dark > ul {
  border-bottom-color: rgba(255, 255, 255, 0.3);
}
.minimalTabs.dark > ul > li {
  background: #333;
}
.minimalTabs.dark > ul > li:before, .minimalTabs.dark > ul > li.ui-state-active.ui-state-hover:before, .minimalTabs.dark > ul > li.ui-state-active.ui-state-focus:before {
  box-shadow: 0 2px 3px rgba(255, 255, 255, 0.3);
}
.minimalTabs.dark > ul > li:after, .minimalTabs.dark > ul > li.ui-state-active.ui-state-hover:after, .minimalTabs.dark > ul > li.ui-state-active.ui-state-focus:after {
  background: #333;
  box-shadow: inset 3px 3px 3px rgba(255, 255, 255, 0.3), inset 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.minimalTabs.dark > ul > li.ui-state-hover:before, .minimalTabs.dark > ul > li.ui-state-focus:before {
  box-shadow: none;
}
.minimalTabs.dark > ul > li.ui-state-hover:after, .minimalTabs.dark > ul > li.ui-state-focus:after {
  box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.4);
}
.minimalTabs.dark > ul > li a {
  color: white;
}
@media screen and (min-width: 1000px) {
  .darkTab,
  .lightTab {
  width: 50%;
  float: left;
  padding: 0;
  }
}

Код

$(".minimalTabs").tabs({
  show: { effect: "slide", direction: "left", duration: 200, easing: "easeOutBack" } ,
  hide: { effect: "slide", direction: "right", duration: 200, easing: "easeInQuad" }
});

Где также вкладки или Tab, считается это графический элемент управления, который позволяет нескольким документам или панелям содержаться в одном окне.

Демонстрация

Видео обзор:

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

20 Января 2020 Загрузок: 1 Просмотров: 782 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0