Содержание материала

Горизонтальное расположение контента

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

Мы будем использовать несколько полезных плагинов jQuery:

В демо мы используем книгу Чарльза Дарвина "Происхождение видов путем естественного отбора", 6-е издание которого вы можете найти в Project Gutenberg.

HTML-разметка

HTML-код будет состоять из меню, которое будет зафиксированно в левой части экрана и контейнера, который будет содержать панели с контентом. Все это будет обернуто в основной контейнер:

<div id="hs-container" class="hs-container">
 
 <!-- ... -->
 
</div>

Меню будет иметь следующую структуру:

<aside class="hs-menu" id="hs-menu">
 
 <div class="hs-headline">
 <h1>
 <small>The</small>
 Origin <small>of</small>
 Species
 </h1>
 <small>6<sup>th</sup> Edition</small>
 <span class="author">by Charles Darwin</span>
 </div>
 
 <nav>
 <a href="#introduction">
 <span>Introduction</span>
 </a>
 <a href="#chapter1">
 <span>Chapter I.</span>
 <span>Variation under Domestication</span>
 </a>
 <a href="#chapter2">
 <span>Chapter II.</span>
 <span>Variation Under Nature </span>
 </a>
 <!-- ... -->
 </nav>
 
</aside>
 
<a href="#hs-menu" class="hs-totop-link">Go to the top</a>

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

Содержание будет иметь следующую структуру:

<div class="hs-content-scroller">
 
 <div class="hs-content-wrapper">
 
 <article class="hs-content" id="introduction">
 <div class="hs-inner">
 <h2>Introduction</h2>
 <p>...</p>
 </div>
 </article>
 
 <article class="hs-content" id="chapter1">
 <div class="hs-inner">
 <h2>Chapter I.</h2>
 <h3>Variation Under Domestication</h3>
 <h4>Causes of Variability</h4>
 <p>...</p>
 </div>
 </article>
 
 <!-- ... -->
 
 </div>
 
</div>

Первая оболочка с классом hs-content-scroller будет действовать как маска, которая имеет ширину и высоту и которая видна только в окне просмотра. Это будет область, которую мы будем видеть при горизонтальной прокрутке, вторая же оболочка с классом hs-content-wrapper будет так велика, как сумма ширины всех статей.

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

Теперь перейдем к написанию стилей.


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

You have no rights to post comments