Автор

19 06.2015
Создание адаптивных вкладок с помощью jQuery

Создание адаптивных вкладок с помощью jQuery


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

 

ДЕМО
ИСХОДНИКИ

 

Мы будем использовать достаточно простой код, чтобы максимально упростить структуризацию панелей и интеграцию ее в ваш проект. Кроме этого мы учли, что данный дизайн разрабатывается не только для десктопного отображения, но и для мобильных устройств, что отобразится на масштабировании и адаптивности наших вкладок. И так, давайте приступим.

 

HTML

Для начала подключаем в шапку документа, где вы планируете разместить вкладки-скрипты, лучше всего это делать в начале документа, до тега body, это позволит загружать вкладки в первую очередь, что облегчит отображение страницы.

<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script>

 

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

 

<div class="cd-tabs">
    <nav>
        <ul class="cd-tabs-navigation">
            <li><a data-content="inbox" class="selected" href="#0">Входящие</a></li>

            <li><!-- ... --></li>
        </ul> <!-- cd-tabs-navigation -->
    </nav>

    <ul class="cd-tabs-content">
        <li data-content="inbox" class="selected">
            <p>Текстовое описание</p>
        </li>

        <li><!-- ... --></li>
    </ul> <!-- cd-tabs-content -->
</div> <!-- cd-tabs -->

 

Шаг 2. СSS

Мы использовали CSS медиа-запросы для изменения навигации и позиционирования от горизонтального до вертикального, и наоборот. Поскольку мы приняли первый мобильный подход, элемент имеет определение: авто, чтобы скрыть часть неупорядоченного списка — ширина которого выше. Кроме того, мы использовали -webkit для прокрутки: сенсорное отображение иметь плавную прокрутку которое применяется к элементу:

.cd-tabs nav {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /*...*/
}

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

Вот и все. Готово!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

13 03.2013
Создание адаптивных вкладок с помощью jQuery

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

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


27 04.2013
Создание адаптивных вкладок с помощью jQuery

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


19 01.2016
Создание адаптивных вкладок с помощью jQuery

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


20 03.2013
Создание адаптивных вкладок с помощью jQuery

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

Для создания этой галереи будут использованы две бесплатные библиотеки JQuery: Quicksand и PrettyPhoto. Они значительно упрощают создание галереи. Как всегда результат работы Вы можете увидеть на демонстрационной странице, а также скачать архив с работающей галерей и все исходные файлы. Единственным минусом, если можно так сказать, является создание в ручную миниатюр для больших изображений. А во всем остальном эта галерея достойна внимания.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close