Главное меню
Для обозначения важный событий или мероприятий вы можете использовать данный TimeLine. Он очень легко редактируется и наполняется новыми событиями.

Пример


Как разместить или редактировать:
В визуальном редакторе нажмите на клавишу "Источник" (Желательно изначально выбрать "Редактировать HTML код" вашей страницы) и в нужном месте на странице вставьте данный код:

<ul class="timeline">

 <li>
 <div class="direction-r">
 <div class="flag-wrapper">
 <span class="flag grey">Прошедшее событие</span>
 <span class="time-wrapper"><span class="time">25.01.14</span></span>
 </div>
 <div class="desc">Тут будет описание прошедшего события!</div>
 </div>
 </li>

 <li>
 <div class="direction-l">
 <div class="flag-wrapper">
 <span class="flag">Новое событие</span>
 <span class="time-wrapper"><span class="time">17.05.14</span></span>
 </div>
 <div class="desc"></div>
 </div>
 </li>

</ul>

Красным цветом выделены места, которые подлежат редактированию. Если событие уже прошло, используйте класс "grey" (впишите его в  <span class="flag grey">, выделено зеленым цветом). Для добавления новой даты скопируйте и добавьте данный код перед закрывающим тегом </ul>.
<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Название события</span>
<span class="time-wrapper"><span class="time">Дата</span></span>
</div>
<div class="desc">Описание события</div>
</div>
</li>
Для расположение блоков справа и слева от основной линии, следите за первым классом в списке <div class="direction-r"> и <div class="direction-l">. Где r - расположение справа (от английского right), а l - расположение слева (от английского left).