Автор

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

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

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


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

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


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

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


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

Версия скрипта от TRANE73. Скрипт показывает время существования сайта, с указанной вами даты. Сам по себе скрипт простой, но он удобный и небольшой. В зависимости от даты меняются слова например сайт существует 2 дня 7 дней 101 день. Если вам надоело каждый день менять цифры, то просто установите этот скрипт:


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close