Автор

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

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

Кнопка вызова к действию, которая анимируется и превращается в полноразмерное модальное окно.


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

Полностраничное меню, которое заменяет текущий контент, вытесняя его с экрана.


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close