Адаптивные вкладки на jQuery
Реализация простых но в тоже время адаптивных вкладок основанных на jQuery
Так вкладки выглядят на мобильных разрешениях экрана
Как реализовать:
1. Разметка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<ul class="accordion-tabs"> <li class="tab-head-cont"> <a href="#" class="is-active">Вкладка</a> <section> <p>Отличные вкладки использующие несколько строк кода. Требуется подключение jQuery. Вкладки преобразуются в вертикальный аккордион при изменении размера окна браузера. Для изменения внешнего вида и параметров при которых происходит переход в адаптивный режим следует править файл стилей style.css</p> </section> </li> <li class="tab-head-cont"> <a href="#">Вторая вкладка</a> <section> <p>............</p> </section> </li> <li class="tab-head-cont"> <a href="#">Третья</a> <section> <p>.........</p> </section> </li> <li class="tab-head-cont"> <a href="#">Последняя</a> <section> <p>.........</p> </section> </li> </ul> |
2. Стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
/* TABS */ .accordion-tabs { *zoom: 1; width: 100%; border: 1px solid #dddddd; border-radius: 0.1875em; margin-bottom: 1.5em; margin-left:0; padding-left:0; } .accordion-tabs:before, .accordion-tabs:after { content: " "; display: table; } .accordion-tabs:after { clear: both; } .accordion-tabs li{ list-style:none; } .accordion-tabs li.tab-head-cont:first-child a { border-top-left-radius: 0.1875em; border-top-right-radius: 0.1875em; border-top: 0; } .accordion-tabs li.tab-head-cont:last-child a { border-bottom-left-radius: 0.1875em; border-bottom-right-radius: 0.1875em; } .accordion-tabs li.tab-head-cont a { text-decoration:none; border-top: 1px solid #dddddd; color: #888888; display: block; padding: 0.75em 0.809em; } .accordion-tabs li.tab-head-cont a:hover { color: #000000; } .accordion-tabs li.tab-head-cont a:focus { outline: none; } .accordion-tabs li.tab-head-cont a.is-active { background-color: #f7f7f7; border-bottom: 0; color:#333333; } .accordion-tabs li.tab-head-cont section { padding: 1.5em 1.618em; background: #f7f7f7; display: none; overflow: hidden; width: 100%; } /* RESPONSIVE */ @media screen and (min-width: 40em) { .accordion-tabs { border: none; position: relative; } .accordion-tabs li.tab-head-cont { display: inline; } .accordion-tabs li.tab-head-cont:last-child a { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .accordion-tabs li.tab-head-cont a { display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; border-top: 0; border-top-right-radius: 0.1875em; border-top-left-radius: 0.1875em; } .accordion-tabs li.tab-head-cont a.is-active { background-color: #f7f7f7; border: 1px solid #dddddd; border-bottom: 1px solid #f7f7f7; margin-bottom: -1px; } .accordion-tabs li.tab-head-cont section { border-bottom-left-radius: 0.1875em; border-bottom-right-radius: 0.1875em; border: 1px solid #dddddd; float: left; left: 0; padding: 0.75em 0.809em; } .accordion-tabs li.tab-head-cont section p { -webkit-columns: 2; -moz-columns: 2; columns: 2; } } |
3. Подключаем javascript и jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.accordion-tabs').children('li').first().children('a').addClass('is-active') .next().addClass('is-open').show(); $('.accordion-tabs').on('click', 'li > a', function(event) { if (!$(this).hasClass('is-active')) { event.preventDefault(); $('.accordion-tabs .is-open').removeClass('is-open').hide(); $(this).next().toggleClass('is-open').toggle(); $('.accordion-tabs').find('.is-active').removeClass('is-active'); $(this).addClass('is-active'); } else { event.preventDefault(); } }); }); </script> |
