Автор

Создание адаптивных вкладок с помощью 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;
    /*...*/
}

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

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


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

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


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

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


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close