Интересная статья по созданию навигации в виде “хлебных крошек” (breadcrumbs).

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

Видов такой навигации может быть множество, все зависит от дизайна. Но принцип построения на CSS стандартный - с помощью списков

1
ul
.

Статья была опубликована на одном из моих любимых сайтов CSS-Tricks. Ниже привожу вольный перевод ее автора (Chris Coyier):

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

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

1
:before
,
1
:after
или оба сразу можно сгенерировать блочные элементы и с их помощью создать треугольники.

А вот последние можно применять для создания навигации в стиле “хлебные крошки”. Как выглядит одна из таких навигаций (чтобы иметь представление, что это такое), показано на рисунке ниже:

Один из видов навигации хлебные крошки

HTML разметка

Начнем создание такого меню с HTML-разметки, которая максимально проста и представляет собой обычный неупорядоченный список с классом breadcrumb:

<ul class="breadcrumb">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">Vehicles</a>
  </li>
  <li>
    <a href="#">Vans</a>
  </li>
  <li>
    <a href="#">Camper Vans</a>
  </li>
  <li>
    <a href="#">1989 VW Westfalia Vanagon</a>
  </li>
</ul>

CSS код

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

1
overflow
для всего списка в целом - он применяется здесь по двум причинам.

Первая - наш список должен иметь высоту. Контейнеры, которые содержат только плавающие элементы, схлопываются (

1
collapse
), что совсем не то, что нам нужно. Второе - когда мы будем создавать треугольники, мы сделаем их достаточно большими:

.breadcrumb {
  list-style-type: none;
  overflow: hidden;
  font: 18px Helvetica, Arial, sans-serif;
}

.breadcrumb li {
  float: left;
}

.breadcrumb li a {
  float: left;
  position: relative;
  color: #fff;
  text-decoration: none;
  padding: 10px 0 10px 65px;
  background-color: brown;
  background-color: hsla(34, 85%, 35%, 1);
}

Для создания треугольника мы воспользуемся псевдо-элементом

1
:after
. Для него установим высоту и ширину, равную нулю; и абсолютно спозиционируем его на 100% влево, что означает - он будет располагаться у правого края своего блока родителя.

Затем сместим треугольник вниз на 50% и “вернем” назад на -50px для точного позиционирования по центру (это классический прием - перевод здесь). Есть только один момент, на который нужно обратить внимание.

Граница, которую мы создаем сверху, равна 50px, нижняя граница также равна 50px, а ширина левой границы равна 30px. Это сделано для того, чтобы треугольник получился более “плоским”, с не такой острой вершиной. Если мы сделаем левую границу равной остальным сторонам в 50px, угол треугольника будет слишком острый.

Так как верхняя и нижняя границы равны по 50px, то общая высота треугольника получается в 100px. Это гораздо больше, чем высота нашего меню, в котором высота шрифта

1
18px
и
1
padding-top: 10px
,
1
padding-bottom: 10px
. Однако, это хорошо, что треугольник больше высоты меню. Это означает, что у нас остается достаточно свободного пространства, чтобы “поиграться” с размером шрифта:

.breadcrumb li a:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
  width: 0;
  height: 0;
  border-left: 30px solid hsla(34, 85%, 35%, 1);
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

Все хорошо. Но на примере, который нужно воссоздать в коде, есть тонкая полоска шириной в 1px, идущая по краю треугольника. Чтобы “нарисовать” ее в CSS-коде, нам потребуется еще “поколдовать”, так как напрямую создать границу для треугольника не получиться. Ведь треугольник как раз сам и является границей!

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

1
:before
.

Обратите внимание на важную вещь -

1
z-index
. С помощью этого свойства можно “тасовать” элементы
1
:before
и
1
:after
(точнее - созданные ими треугольники) в нужном порядке - какой треугольник над каким должен располагаться:

.breadcrumb li a:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  margin: -50px 0 0 1px;
  left: 100%;
  z-index: 1;
  width: 0;
  height: 0;
  border-left: 30px solid #fff;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

Примечание переводчика:

Изменения минимальны. Цвет границы задан белым

1
#fff
и добавлено смещение треугольника влево на 1px
1
margin-left: 1px
, чтобы разделительная черта была более заметна.

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

1
nth-child
и HSLa.

  • Чем полезно
    1
    
    nth-child
    
    - можно задать цвета для различных элементов навигации без добавления дополнительной разметки в HTML-код;
  • Чем полезно HSLa - основываясь только на одном цвете, можно легко задать различные оттенки для элементов навигации.

Помимо этого, для первой ссылки мы уменьшим отступ слева с помощью

1
padding-left
, чтобы все элементы меню имели одинаковый размер; для последней ссылки совсем уберем цвет, сделаем некликабельной и вернем вид курсора по умолчанию. Все это мы выполним без какой-либо дополнительной разметки, с помощью псевдо-элементов
1
:first-child
и
1
:last-child
(плюс к двум предыдущим):

.breadcrumb li:first-child a {padding-left: 10px;}
.breadcrumb li:nth-child(2) a {background-color: hsla(34,85%,45%,1);}
.breadcrumb li:nth-child(2) a:after {border-left-color: hsla(34,85%,45%,1);}
.breadcrumb li:nth-child(3) a {background-color: hsla(34,85%,55%,1);}
.breadcrumb li:nth-child(3) a:after {border-left-color: hsla(34,85%,55%,1);}
.breadcrumb li:nth-child(4) a {background-color: hsla(34,85%,65%,1);}
.breadcrumb li:nth-child(4) a:after {border-left-color: hsla(34,85%,65%,1);}
.breadcrumb li:nth-child(5) a {background-color: hsla(34,85%,75%,1);}
.breadcrumb li:nth-child(5) a:after {border-left-color: hsla(34,85%,75%,1);}
.breadcrumb li:last-child {background-color: transparent !important; color: #000; pointer-events: none; cursor: default;}

Примечание переводчика:

Нумерация в

1
nth-child
начинается с единицы, а не с нуля, как принято в языках программирования.

И наконец, состояния элементов навигации при наведении курсора мыши. Здесь единственная особенность - нам нужно задать цвет треугольника точно таким же, как и ссылка. Не проблема:

.breadcrumb li a:hover {background-color: hsla(34,85%,25%,1);}
.breadcrumb li a:hover:after {border-left-color: hsla(34,85%,25%,1) !important;}

Совместимость с браузерами

Назовите меня ленивым, но я не занимался вопросом проверки данного кода на кросс-браузерную совместимость. Я был слишком захвачен самой идеей создания меню “хлебные крошки” на чистом CSS, чтобы думать его практическом использовании. Но если вас волнует мысль о его поддержке более старыми версиями браузеров, то стоит обратить внимание на следующие вещи:

  • используйте для передачи цвета HEX-код вместо HSLa;
  • для каждого из пунктов меню
    1
    
    li
    
    создайте свои классы, вместо использования
    1
    
    nth-child
    
    ;
  • для браузеров, не поддерживающих псевдо-классы
    1
    
    :after
    
    /
    1
    
    :before
    
    используйте схему создания навигационного меню, основанную на изображениях;
  • применяйте библиотеку Modernizr для определения поддержки браузерами тех или иных свойств (например, HSLa);
  • используйте дополнительные стилевые правила для IE.

Результат, созданный с помощью приведенного выше кода, показан ниже:

Меню хлебные крошки с помощью CSS-треугольников

Эффект при наведении курсора мыши на один из пунктов меню:

[Эффект при наведении курсора мыши на меню навигации][3]
Эффект при наведении курсора мыши на меню навигации

Эффект при наведении курсора мыши на меню навигации

На этом все и перевод закончен.


Создание приподнятых теней (

1
lifted shadow
) с помощью CSS.

Такие тени создаются с помощью двух псевдо-элементов

1
:before
и
1
:after
. Дополнительной HTML-разметки при этом не требуется. Оба псевдо-элемента применяются только к одному элементу, который должен быть блочным. Ниже показана последовательность действий, которая совсем несложная.

Статья написана по мотивам известного блога Николаса Галлахера, где показаны самые разнообразные виды таких сложных теней.

Приступаем к написанию кода. Создаем элемент

1
p
и для него прописываем правила (чтобы смотрелся хорошо):

<p class="lifted">
  Lifted Corners
</p>
.lifted{
  width: 400px;
  background-color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  line-height: 70px;
  box-shadow: 0 0 40px rgba(0,0,0,0.3) inset;
  position: relative;
}

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

Такой интересный момент в этом коде - нужно обязательно явно установить фоновый цвет для блока

1
background-color: #fff
. Иначе он будет прозрачным по умолчанию и сквозь него будут проступать наши тени.

Необходимо получить две тени, одна из которых располагается под левым углом блока, а другая - под правым. Поэтому нам потребуются два псевдо-элемента -

1
:before
и
1
:after
. Создаем правила, общие для обоих псевдо-элементов:

.lifted:before, .lifted:after{
  content: '';
  position: absolute;
  width: 50%;
  height: 10%;
  bottom: 15px;
  left: 4px;
  z-index: -1;
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0,0.6);
     -moz-box-shadow: 0 15px 10px rgba(0,0,0,0.6);
       -o-box-shadow: 0 15px 10px rgba(0,0,0,0.6);
          box-shadow: 0 15px 10px rgba(0,0,0,0.6);
}

Немного “расшифруем” показанный выше код. Устанавливаем для обоих псевдо-элементов абсолютное позиционирование и координаты: от нижней границы 15px (

1
bottom: 15px
) и от левой границы 4px (
1
left: 4px;
). Ширину элемента устанавливаем в половину от ширины элемента-родителя (
1
width: 50%;
), высоту - 10% от ширины этого же элемента. Один интересный момент, про который не нужно забыть - “подсовываем” тени под блок-родитель с помощью свойства
1
z-index: -1
. Ну и создаем сами тени правилом
1
box-shadow: 0 15px 10px rgba(0,0,0,0.6)
, указав браузерные префиксы.

Теперь у нас есть обе тени, но выглядят они как одна, так как первая накладывается на другую, ибо их координаты одинаковы. Поэтому нужно “разнести” их по разным углам, установив для псевдо-элемента

1
:after
иное позиционирование по оси X:

.lifted:after{
  left: auto;
  right: 4px;
}

Почти все готово. Осталось только сделать для обеих теней “косину”, то есть развернуть их на определенное количество градусов. Левую тень развернем против часовой стрелки, чтобы ее внутренний угол оказался под блоком-родителем. Правую развернем точно также, только по часовой стрелке, чтобы ее внутренний угол также “спрятался” под блоком. Разворачивание будем выполнять с помощью правила

1
transform: rotate
для псевдо-элемента
1
:before
-

-webkit-transform: rotate(-3deg);
   -moz-transform: rotate(-3deg);
     -o-transform: rotate(-3deg);
        transform: rotate(-3deg);

и для псевдо-элемента

1
:after
-

-webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
     -o-transform: rotate(3deg);
        transform: rotate(3deg);

Результат нашей работы можно посмотреть ниже. Красиво!

Блок с тенями под углами

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

1
border-radius
есть два параметра, а не одно.

То есть, для одного угла можно задать два радиуса скругления, и тогда само скругление получиться не таким “правильным”, но более реалистичным. Первый радиус делаем большого размера, а второй немного меньше.

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

border-bottom-left-radius: 40px 12px;
border-bottom-right-radius: 40px 12px;

Итогом получается картинка листочка бумаги с завернутыми уголками:

Завернутые уголки на чистом CSS

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

На этом все.


В предыдущей статье “Создаем вертикальное меню на CSS” был освещен вопрос построения вертикального меню с подменю.

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

1
display
со значениями
1
none
и
1
block
.

При построении горизонтального меню нужно быть внимательным с принципом специфичности CSS, то есть - с вложенностью и каскадностью правил. Хорошим подспорьем в этом вопросе является SASS (SCSS), благодаря которому исключаются ошибки при соблюдении каскадности и наследовании свойств.

Код, написанный на SASS (SCSS) короче и логически читается проще, чем CSS. Поэтому, рекомендую изучить этот вопрос в статьях “SASS (SCSS) в картинках - Часть 1”, “SASS (SCSS) в картинках - Часть 2”.

Мы же приступим к созданию горизонтального меню с подменю “на коленках”. Почему говорю так? Дело в том, что существует масса готовых примеров и кода, а также генераторов различных меню. Но они неинтересны - нам нужно разобраться в принципе построения и возможности самому написать такую навигацию. Как обычно, начинаем с каркаса меню, выполненного на HTML:

<ul class="hormenu">
  <li>
    <a class="arrow" href="#">Link_1</a>
      <ul class="sub-hormenu">
      <li>
        <a href="#">Link_1-1</a>
      </li>
      <li>
        <a href="#">Link_1-2</a>
      </li>
      <li>
        <a href="#">Link_1-3</a>
      </li>
      <li>
        <a href="#">Link_1-4</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link_2</a>
  </li>
  <li>
    <a class="arrow" href="#">Link_3</a>
      <ul class="sub-hormenu">
      <li>
        <a href="#">Link_3-1</a>
      </li>
      <li>
        <a href="#">Link_3-2</a>
      </li>
      <li>
        <a href="#">Link_3-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link_4</a>
  </li>
  <li>
    <a class="arrow" href="#">Link_5</a>
      <ul class="sub-hormenu">
      <li>
        <a href="#">Link_5-1</a>
      </li>
      <li>
        <a href="#">Link_5-2</a>
      </li>
      <li>
        <a href="#">Link_5-3</a>
      </li>
      <li>
        <a href="#">Link_5-4</a>
      </li>
      <li>
        <a href="#">Link_5-5</a>
      </li>
    </ul>
  </li>
</ul>

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

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

1
arrow
, но о нем мы поговорим позже.

Приступим к оформлению нашего меню с помощью CSS. Сразу оговорюсь, что примеры кода, представленного здесь, написаны на SASS (SCSS). Начнем с того, что расположим навигацию горизонтально:

.hormenu{
  margin: 50px 0 0 50px;
  overflow: hidden;
  li{
    float: left;
    margin-left: 1px;
    &:first-child{
      margin-left: 0;
    }

Думаю, ничего загадочного в этой части кода нет. Делаем отступ для меню и располагаем элементы

1
li
внутри него горизонтально с помощью свойства
1
float: left
. Предотвращаем схлопывание (
1
collapse
) блока-родителя
1
ul
, прописав для него
1
overflow: hidden
.

Чтобы пункты меню были легко различимы, сделаем промежуток между ними с помощью левого

1
margin
в 1px. И для аккуратности уберем левый
1
margin
у первого элемента
1
li
.

Далее оформляем ссылки внутри пунктов

1
li
. Делаем ссылки блочными, чтобы кликабельной была вся область пункта навигации и задаем для нее высоту. Также указываем интерлиньяж, чтобы выровнять текст по вертикали и
1
text-align
для выравнивания по горизонтали. Цвет фона и цвет текста - как обычно.

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

Возможна ситуация, когда пункт подменю по ширине будет больше, чем пункт основного меню, и тогда ребенок “растянет” своего родителя.

При скрытии же подменю пункты основного меню будут “сжиматься”, уменьшая ширину до своей собственной. Вот для этой цели и применяется явное задание ширины элемента

1
a
:

a{
  display: block;
  line-height: 25px;
  height: 25px;
  width: 130px;
  text-align: center;
  background-color: #ccc;
  color: #ccc - #555;
  position: relative;
}

Продолжим стилизацию нашей навигации и займемся подменю, а точнее - его подпунктами

1
li
. Уберем у этих элементов плавание влево
1
float
и левый
1
margin
, чтобы они не наследовали эти свойства. Убираем плавание, чтобы элементы
1
li
расположились вертикально, а левый
1
margin
- убрать “лесенку”:

li{
  float: none;
  margin: 0 0 1px 0;

Стилизуем ссылки пунктов подменю. Делаем фоновую заливку чуть светлее, чтобы отличалась от основного меню, а текст - чуть темнее по той же причине. Ну и анимация пунктов при наведении курсора мыши:

a{
  background-color: #ccc + #111;
  color: #ccc - #333;
  &:hover{
    background-color: #ccc + #222;
  }
}

Теперь самое главное - сделаем подпункты меню выпадающими. Для этого сначала спрячем его, убрав из DOM-модели HTML-документа с помощью значения свойства

1
dislay: none
:

.sub-hormenu{
  display: none;

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

1
hormenu
:

&:hover .sub-hormenu{
  display: block;
}

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

1
:after
.

Как раз здесь нам и понадобиться относительное позиционирование для ссылок, о котором говорилось ранее. Создание стрелки “поручим” отдельному классу

1
arrow
, который будем “вешать” только на нужные нам ссылки:

.arrow:after{
  content: '';
  position: absolute;
  top: 50%;
  left: 80%;
  width: 0;
  height: 0;
  border-top: 4px solid #ccc - 666;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  margin-top: -2px;
}

Вот, в принципе, и все. Основная задача выполнена и горизонтальное меню с выпадающим подменю у нас работает. Конечно, можно озадачиться целью “окрасить” активный пункт основного меню в тот же цвет, что и у подменю. Но эта проблема не входит в рассмотрение поставленной нами задачи. Ниже представлен полный код правил CSS (SCSS) для нашего меню:

@import "compass/reset";

 a{
   text-decoration: none;
 }

 .arrow:after{
   content: '';
   position: absolute;
   top: 50%;
   left: 80%;
   width: 0;
   height: 0;
   border-top: 4px solid #ccc - 666;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   margin-top: -2px;
 }

 .hormenu{
   margin: 50px 0 0 50px;
   overflow: hidden;
   li{
     float: left;
     margin-left: 1px;
     &:first-child{
       margin-left: 0;
     }
     &:hover .sub-hormenu{
       display: block;
     }
     .sub-hormenu{
       display: none;
       li{
         float: none;
         margin: 0 0 1px 0;
         a{
           background-color: #ccc + #111;
           color: #ccc - #333;
           &:hover{
             background-color: #ccc + #222;
           }
           &:after{
             content: none;
           }
         }
       }
     }
     a{
       display: block;
       line-height: 25px;
       height: 25px;
       width: 130px;
       text-align: center;
       background-color: #ccc;
       color: #ccc - #555;
       position: relative;
     }
   }
 }

… и то, как оно выглядит:

Горизонтальное меню на CSS

Горизонтальное меню с выпадающим подменю

На этом все.


Продолжаем изучение CSS и сегодня приступим к построению вертикального меню.

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

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

Механизм действия и построения такого меню основан на одном единственном CSS-свойстве -

1
display
, а точнее на его значениях -
1
display: block
и
1
display: none
.

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

Такая навигация называется

1
меню-аккордеон
и принцип его создания будет рассмотрен позже.

C чего же мы начнем? С построения обычного маркированного списка, пунктами которого будут ссылки. Списку зададим класс с именем

1
menu
, так как он нам понадобиться в дальнейшем:

<ul class="menu">
  <li>
    <a href="#">Punkt 1</a>
  </li>
  <li>
    <a href="#">Punkt 2</a>
  </li>
  <li>
    <a href="#">Punkt 3</a>
  </li>
  <li>
    <a href="#">Punkt 4</a>
  </li>
  <li>
    <a href="#">Punkt 5</a>
  </li>
</ul>

Созданное только что меню будет внешним, а внутри него (точнее внутри его пунктов) мы поместим еще одно меню. Получиться одно меню, вложенное в другое (помните уроки HTML?).

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

1
display
из none в
1
block
и наоборот.

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

1
sub-menu
. Этот класс нам также потребуется в дальнейшем:

<ul class="menu">
  <li>
    <a href="#">Punkt 1</a>
        <ul class="sub-menu">
      <li>
        <a href="#">Punkt 1-1</a>
      </li>
      <li>
        <a href="#">Punkt 1-2</a>
      </li>
      <li>
        <a href="#">Punkt 1-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 2</a>
        <ul class="sub-menu">
      <li>
        <a href="#">Punkt 2-1</a>
      </li>
      <li>
        <a href="#">Punkt 2-2</a>
      </li>
      <li>
        <a href="#">Punkt 2-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 3</a>
        <ul class="sub-menu">
      <li>
        <a href="#">Punkt 3-1</a>
      </li>
      <li>
        <a href="#">Punkt 3-2</a>
      </li>
      <li>
        <a href="#">Punkt 3-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 4</a>
        <ul class="sub-menu">
      <li>
        <a href="#">Punkt 4-1</a>
      </li>
      <li>
        <a href="#">Punkt 4-2</a>
      </li>
      <li>
        <a href="#">Punkt 4-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 5</a>
        <ul class="sub-menu">
      <li>
        <a href="#">Punkt 5-1</a>
      </li>
      <li>
        <a href="#">Punkt 5-2</a>
      </li>
      <li>
        <a href="#">Punkt 5-3</a>
      </li>
    </ul>
  </li>
</ul>

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

*{
  margin: 0;
  padding: 0;
}

a{
  text-decoration: none;
}

ul{
  list-style-type: none;
}

.menu{
  margin: 30px 0 0 30px;
  width: 100px;
}

Здесь мы обнуляем

1
margin
и
1
padding
для всех элементов, в том числе и
1
ul
; убираем маркер у пунктов меню; убираем подчеркивание у ссылок.

Для внешнего списка с классом menu задаем отступ сверху и слева, чтобы не прилипал к границам окна браузера и устанавливаем фиксированную ширину в

1
100px
.

Дальше форматируем пункты меню:

.menu li{
    position: relative;
    line-height: 20px;
    background-color: #ccc;
    margin-bottom: 1px;
  }

Ставим высоту каждого элемента

1
li
равной 20px и выравниваем текст внутри него по центру вертикали; задаем фоновый цвет для них же, чтобы можно было различать каждый из пунктов на фоне окна браузера; делаем нижний
1
margin
в 1px, чтобы элементы
1
li
не сливались между собой и были похожи на пункты меню.

Последний шаг - устанавливаем для

1
li
относительное позиционирование, так как в дальнейшем будем размещать подменю относительно этого элемента.

Далее чисто косметические правила для ссылок, находящихся внутри внешнего меню - размер шрифта (кегль) и цвет текста:

.menu li a{
  font-size: 16px;
  color: #000;
}

Теперь приступаем к самому интересному - стилизации подменю. Для начала зададим его ширину (пусть будет чуть меньше ширины внешнего списка):

.sub-menu{
  width: 90px;
}

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

1
li
.

И самое главное - скроем его отображение в браузере через правило

1
display: none
. В результате код будет выглядеть следующим образом:

.sub-menu{
  width: 90px;
  position: absolute;
  left: 100px;
  top: 0;
  display: none;
}

Немного стилизуем пункты меню и ссылки в подменю. Для каждого пункта подменю устанавливаем цвет фона, чтобы отличать подменю от основного меню. И цвет ссылок по той же причине:

.sub-menu li{
  background-color: #aaa;
}
  .sub-menu li a{
    color: #fff;
  }

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

1
display
значение
1
block
при наведении мыши на ссылку во внешнем списке:

.menu li:hover .sub-menu{
  display: block;
}

В результате подменю отобразиться (браузер сгенерирует его). Изначально в коде было прописано для него

1
display: none
. То есть, для браузера такого подменю не существовало и в DOM-модели документа элемент
1
ul
с классом
1
sub-menu
отсутствовал.

Так как этому подменю задано абсолютное позиционирование со смещением вправо на

1
100px
и вверх на
1
0px
, то оно поместиться точно справа вверху от своего родителя - пункта меню внешнего списка.

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

Вертикальное меню на CSS

И меню, когда наведена мышка на один из пунктов меню и справа появляется подменю, соответствующее этому пункту:

Вертикальное меню на CSS с подменю

На этом все.


Создать заголовок с эффектом зачеркивания. Создается с помощью псевдо-элементов

1
:before
и
1
:after
.

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

Создание такого эффекта выполняется простым кодом. Первоначально задаем HTML-разметку с использованием заголовка первого уровня

1
h1
:

<h1>
  about me
</h1>

И прописываем для него CSS-правила, чтобы привести его к тому виду, который нам необходим:

h1{
  width: 900px;
  margin: 100px auto;
  border: 1px solid #000;
  text-align: center;
  font-size: 40px;
  line-height: 60px;
  text-transform: uppercase;
  position: relative;
}

Выравнивание по центру, размер шрифта (кегль) и высота блока через интерлиньяж

1
line-height
, делаем все буквы заглавными - все стандартно. Но не забываем о позиционировании, которое устанавливаем относительным, ибо оно потребуется нам для псевдо-элементов
1
:before
и
1
:after
.

Теперь создаем общие правила для обоих псевдо-элементов

1
:before
и
1
:after
.

h1:before, h1:after{
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -2px;
  left: 0;
  height: 4px;
  width: 320px;
  background-color: #000;
}

Единственным примечательным моментом в этом коде является свойство

1
top: 50%
, которое размещает линию точно по центру вертикали блочного элемента. В нашем случае таким блочным элементом является заголовок первого уровня
1
h1
. Кроме того, нужно установить еще одно правило -
1
margin-top: -2px
.

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

Так как правила мы прописали для обоих элементов, то следуют переписать некоторые из них для элемента

1
:after
. Точнее - нам нужно только правило
1
right
, чтобы “сдвинуть” его вправо:

h1:after{
  right: 0;
  left: auto;
}

Результат работы кода показан на рисунке ниже. Граница для заголовка задана мною для наглядности:

Зачеркнутый заголовок на CSS

Полностью весь код для создания такого эффекта приведен ниже:

h1{
  width: 900px;
  margin: 100px auto;
  border: 1px solid #000;
  text-align: center;
  font-size: 40px;
  line-height: 60px;
  text-transform: uppercase;
  position: relative;
}

h1:before, h1:after{
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -2px;
  left: 0;
  height: 4px;
  width: 320px;
  background-color: #000;
}

h1:after{
  right: 0;
  left: auto;
}

UPD 19\01\2014

Для быстроты, удобства и краткости можно воспользоваться готовым миксином из библиотеки Scut - Side-Lined.

На этом все.