ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивные вкладки для аккордеона в CSS

Адаптивные вкладки для аккордеона в CSS

Адаптивные вкладки для аккордеона в CSS
Вашему вниманию материал отзывчивые вкладки аккордеон, которые начнут изменение В браузере, где адаптивность создана при помощи стилей CSS. Если говорить вообще, то Tabs, это плагин jQuery, который обеспечивает функциональность адаптивных вкладок и все что находится в них, все автоматически становится адаптивным по форме. Можно взять кино сайт, где основном можно увидеть их работу, это переключатели плееров.

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

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

Так на demo странице выглядит:

Отзывчивый аккордеон с помощью jQuery

Немного доработан, что можно изменение заметить, которое в материале идет:

Красивые табы-вкладки для сайта

Это вид с мобильного аппарата с небольшого экрана:

Мобильные вкладки (табы) с переходом в аккордеон

Приступаем к установке:

HTML

Код
<ul id="codavetonas">
  <li><a href="#">Вкладка 1</a>
  <section>
  <p>Первое описание которое находится вкладке, что можно разместить как можно больше материала! Ключевые слова с длинным хвостом являются одним из лучших способов привлечь больше нужного трафика.</p>
  </section>
  </li>
  <li><a href="#">Вкладка 2</a>
  <section>
  <p>Другими словами, они привлекают больше нужных клиентов, которые заинтересованы в ведении бизнеса с вами, и они могут помочь вам получить более высокий рейтинг. </p>
  </section>
  </li>
  <li><a href="#">Вкладка 3</a>
  <section>
  <p>В этой статье мы рассмотрим, почему ключевые слова с длинным хвостом так важны, а также как их найти и использовать для увеличения трафика.</p>  
  </section>
  </li>
  <li><a href="#">Вкладка 4</a>
  <section>
  <p>Каждый раз, когда пользователь вводит фразу в Google, поисковая система автоматически предлагает соответствующие предложения. </p>
  </section>
  </li>
</ul>

CSS

Код
#codavetonas {
  margin: 24px auto;
  border-top: 1px solid #807c7c;
  border-right: 1px solid #8a8787;
  border-left: 1px solid #888383;
  width: 95%;
}
ul#codavetonas {
  padding: 0;
}

#codavetonas li {
  list-style: none;  
}

#codavetonas li a {
  display: block;
  padding: 10px 12px;
  background: #656565;
  border-top: 1px solid #615d5d;
  border-bottom: 1px solid #3e3a3a;
  text-decoration: none;
  color: #fdf8f8;
  border: 2px solid #a59f9f;
  border-radius: 5px 5px 0px 0px;
}

#codavetonas li a:hover, #codavetonas li a .pagemeansages {
  background: #4a4646;
  color: #efeaea;
}

#codavetonas section {
  display: none;
  float: left;
  background: #333232;
  overflow: hidden;
  padding: 1% 3% 0 3%;
  border: 2px solid #a59f9f;
  color: #dcdcdc;
  font-size: 14px;
  border-radius: 0px 5px 5px 5px;
}

.no-js #codavetonas section {
  display: block;  
}
#codavetonas li ul li a {
  padding: 10px 25px;
  border-bottom: 1px dotted #ccc;
}

@media only screen and (min-width: 30em) {  
  #codavetonas {width: 80%; position: relative; border: none; }
  #codavetonas li { display: inline; }
  #codavetonas li a {display: inline-block; }  
  #codavetonas section { padding: 1%; position: absolute; top: 42px; left: 0;}
   
}

JS

Код
$(document).ready(function () {
   
  $('#codavetonas').children('li').first().children('a').addClass('pagemeansages')
  .next().addClass('is-open').show();
   
  $('#codavetonas').on('click', 'li > a', function() {
   
  if (!$(this).hasClass('pagemeansages')) {

  $('#codavetonas .is-open').removeClass('is-open').hide();
  $(this).next().toggleClass('is-open').toggle();
   
  $('#codavetonas').find('.pagemeansages').removeClass('pagemeansages');
  $(this).addClass('pagemeansages');
  } else {
  $('#codavetonas .is-open').removeClass('is-open').hide();
  $(this).removeClass('pagemeansages');
  }
  });
});

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

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

Демонстрация
24 Февраля 2019 Загрузок: 1 Просмотров: 1465 Комментариев: (2)

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

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

Оставь свой отзыв

Комментарии: 2
noavatar
kakbychat 14 Ноября 2021 22:521
0
Поменяйте в стилях position: absolute, на position: relative. В противном случае материал во вкладках будет накладываться на всё, что расположено под ним. А так, нормальный переключатель, на телефоне пока не смотрел, но в адаптивном шаблоне должно норм быть.
Kosten
Kosten 15 Ноября 2021 22:452
0
У меня корректно показывает, но все же вашем посту отметил элементы, что нужно поменять, если так случится, как вы описали.

Это в самом низу CSS

Код
#codavetonas section { padding: 1%; position: absolute; top: 42px; left: 0;}


Поменять position: absolute, на position: relative
avatar