Разрабатываем меню контента с вертикальными вкладками при помощи jQuery » Techno-Co — Всё для вебмастера, для создание сайтов с нуля. {title}

16.03.2015
Без рубрики

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

В архиве BACKUP файлов для наших читателей

Приступаем

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






  jQuery Vertical Tabbed Content Sections

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

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

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

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

The Main Page!

      
I swear this has some really great stuff. Content is courtesy of Bluth Ipsum.

      
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.

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

      
Fun and failure both start out the same way.




      ...



      ...



      ...

Обратите внимание, что каждый внутренний 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, если вам потребуется.

В завершение

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