—»     —»   Разрабатываем меню контента с вертикальными вкладками при помощи jQuery
  Раздел: Меню и Навигация   Нет комментариев  

Разрабатываем меню контента с вертикальными вкладками при помощи jQuery



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

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

Разрабатываем меню контента с вертикальными вкладками при помощи jQuery

Демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


Приступаем

Для реализации динамических разделов с контентом нам понадобится всего 2 файла. Первый – это jQuery, который можно скачать в сжатом формате. А второй – Font Awesome, который представляет собой иконический веб-шрифт на CSS3, распространяющийся по принципу open source. Это нужно для того, чтобы мы могли использовать различные шрифты при помощи @import и генерировать иконки в виде шрифтов на странице.

<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>jQuery Vertical Tabbed Content Sections</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://designm.ag/favicon.ico">
<link rel="icon" href="http://designm.ag/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<link rel="stylesheet" type="text/css" media="all" href="css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>

Именно поэтому шапка нашего документа выглядит так. Мы включили эти два элемента рядом с основной таблицей стилей styles.css. Вы также можете быть уверенными, что когда вы включаете CSS-файл Font Awesome, его также следует скопировать в директорию /font/. Он включает в себя все необходимые форматы файлов вроде TTF и OTF, необходимые для распознавания иконических символов.

Создаем внутреннее содержимое

Два основных раздела страницы будут храниться в отдельной внутренней div-оболочке. Очевидно, навигация значительно меньше, чем контент, поэтому мы задали navbar свойство floating:left без привязки к фону. #sidemenu представляет собой ненумерованный список пунктов, которые отображаются в виде блочных элементов внутри контейнера с фиксированной шириной.

<ul id="sidemenu">
<li>
<a href="#home-content" class="open"><i class="icon-home icon-large"></i><strong>Home</strong></a>
</li>

<li>
<a href="#about-content"><i class="icon-info-sign icon-large"></i><strong>About</strong></a>
</li>

<li>
<a href="#ideas-content"><i class="icon-lightbulb icon-large"></i><strong>Ideas</strong></a>
</li>

<li>
<a href="#contact-content"><i class="icon-envelope icon-large"></i><strong>Contact</strong></a>
</li>
</ul>

Что касается других элементов страницы, то они используют ID #content, который привязан к количеству внутрениих div-элементов. Везде выставлены названия в соответствии с анкорными ссылками в навигации, с использованием разных id вроде home, about, ideas и contact.

<div id="content">
<div id="home-content" class="contentblock">
<h1>The Main Page!</h1>
<p>I swear this has some really great stuff. Content is courtesy of <a href="http://bluthipsum.com/">Bluth Ipsum</a>.</p>

<p>Smack of ham. What is she doing at a beauty pageant? Is she running the lights or something? She's always got to wedge herself in the middle of us so that she can control everything. Yeah. Mom's awesome.</p>

<p>Probably out there without a flipper, swimming around in a circle, freaking out his whole family.</p>

<p>Fun and failure both start out the same way.</p>
</div><!-- @end #home-content -->


<div id="about-content" class="contentblock hidden">
...
</div><!-- @end #about-content -->

<div id="ideas-content" class="contentblock hidden">
...
</div><!-- @end #ideas-content -->

<div id="contact-content" class="contentblock hidden">
...
</div><!-- @end #contact-content -->
</div><!-- @end #content -->

Обратите внимание, что каждый внутренний div-элемент использует .contentblock в качестве дополнительного класса стилизации. #home-content представляет собой единственный элемент без дополнительного класса .hidden, потому что это и есть содержимое основной страницы, которое отображается сразу после загрузки страницы. Мы можем использовать jQuery, чтобы раскрывать остальные области с контентом, а затем снова скрывать их при переходам по навигационному меню.

CSS-стили дизайна

Так как мы уже включили Font Awesome CSS, мы можем использовать это семейство шрифтов в любое время. Мы также указали ссылку на еще одно семейство шрифтов под названием Cantora One, которое хранится в Google Web Fonts. Кроме этого, мы используем несколько базовых сбросов стилей для каждого внутреннего div’а.

@import url('http://fonts.googleapis.com/css?family=Cantora+One');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-size: 62.5%;
line-height: 1;
padding: 45px 20px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #fff url('../images/bg.png'); /* http://subtlepatterns.com/connected/ */
}

br { display: block; line-height: 1.6em; }
img { border: 0; max-width: 100%; }

h1 {
font-family: 'Cantora One', Arial, sans-serif;
font-size: 3.0em;
line-height: 1.6em;
margin-bottom: 10px;
color: #787878;
}

p {
font-size: 1.4em;
line-height: 1.25em;
color: #575757;
font-weight: normal;
margin-bottom: 10px;
}

a { color: #8dadd8; }
a:hover { color: #7299cf; }

/* main page */
#w {
display: block;
width: 900px;
margin: 0 auto;
background: none;
}


#content {
display: block;
background: #fff;
padding: 0px 15px;
margin-left: 80px;
-webkit-box-shadow: 1px 2px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 2px 1px rgba(0,0,0,0.4);
box-shadow: 1px 2px 1px rgba(0,0,0,0.4);
min-height: 300px;
}


.contentblock {
display: block;
padding: 15px 20px;
}

.contentblock.hidden {
display: none;
}

Вы наверняка заметили, что мы используем только белый фон в основном div #content, который позволяет удерживать навигацию в виде отдельного элемента. Существует огромное множество способов, посредством которых вы можете оформить этот интерфейс, мы решили, что будет лучше использовать белый фон для активной ссылки, так как он сочетается с фоном самой страницы. Мы также выставили contentblock.hidden на no-display, и это можно регулировать посредством jQuery напрямую.

/* side navigation */
#sidemenu {
margin: 0;
padding: 0;
width: 80px;
float: left;
background: #e8e8e8;
border-right: 1px solid #c9c9c9;
}


#sidemenu li { display: block; text-align: center; border-top: 1px solid #fff; font-size: 1.1em; }

#sidemenu li a {
display: block;
padding: 6px 2px;
color: #555;
text-decoration: none;
border-bottom: 1px solid #d1d1d1;

}
#sidemenu li a:hover {
background: #f2f2f2;
}

#sidemenu li a strong {
display: block;
margin-top: 5px;
}

#sidemenu li a.open {
width: 101%;
background: #fff;
}

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

Любая анкорная ссылка с дополнительным классом .open будет иметь 101% ширины. Это означает, что она будет шире границы, и при этом будет как будто естественным образом сливаться с основной областью контента. Весь остальной CSS-код для nav относится к стилизации иконок и текста, которые будут содержаться в двух отдельных HTML-элементах.

jQuery-анимации

Наконец, мы подошли к концу файла index.html, где у нас имеется небольшой фрагмент кода jQuery. Основной обработчик событий запускается, когда пользователь кликает по ссылкам в навигации. Сначала нам нужно отключить click-событие при помощи e.preventDefault(). Так как контент загружается динамическим образом, нам не нужно, чтобы id вписывался в URL страницы, когда имеется поддержка javascript.

$(function(){
$('#sidemenu a').on('click', function(e){
e.preventDefault();

if($(this).hasClass('open')) {
// do nothing because the link is already open
} else {
var oldcontent = $('#sidemenu a.open').attr('href');
var newcontent = $(this).attr('href');

$(oldcontent).fadeOut('fast', function(){
$(newcontent).fadeIn().removeClass('hidden');
$(oldcontent).addClass('hidden');
});


$('#sidemenu a').removeClass('open');
$(this).addClass('open');
}
});
});

Вдаваясь в подробности логики, мы сначала проверяем, не приставлен ли к пункту, по которому производится клик, класс .open. Если да, то ссылка уже видима, поэтому ничего не происходит. В противном случае, мы создаем 2 новые переменные под названием oldcontent и newcontent. Используя jQuery .fadeOut() на старом контенте, мы можем воспользоваться callback-функцией, которая добавит класс .hidden, одновременно отобразив новый контент при помощи .fadeIn().

Две последние строки кода отображают пункт меню сразу после того, как весь внутренний контент перестает двигаться. Мы убираем все классы .open из ссылок в меню, а затем применяем его к новым нажатым ссылкам. Все это происходит примерно за 1-2 секунды, и выглядит при этом очень слаженно. Вы всегда можете воспользоваться задержкой в jQuery, если вам потребуется.

В завершение

Надеемся, что данное руководство будет полезным вам, и вы найдете применение подобному эффекту в собственных будущих проектах! Все эти коды довольно просто понять и собственноручно доработать. Конечно же, функционал плагина может быть не таким прямолинейным, если вам захочется, но зачастую большего функционала просто не требуется. Обязательно поделитесь вашими примерами использования данного эффекта, и не забудьте рассказать про руководство своим друзьям!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 5809   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Декабрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031