Круговая навигация на CSS

От автора: Учебник о том, как создать круговую навигацию с помощью преобразований CSS.

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

Также хочу отдать должное за исходное создание этой техники Ане Тюдор (Ana Tudor). Я слегка подкорректировал ее для получения нужных мне результатов, что, надеюсь, и вы сможете сделать к концу этого учебника: получить полное и четкое понимание этого метода и повозиться с ним, создавая собственные стили. Итак, давайте начнем без дальнейших проволочек!

РАЗМЕТКА

Мы собираемся строить навигацию, поэтому начнем с нормальной навигационной структуры. Нам понадобится div для содержания неупорядоченного списка элементов, кнопка запуска открытия и закрытия навигации, список элементов, а для первого демо-примера – дополнительный оверлей, чтобы прикрывать страницу при открытой навигации.

Используемые в этом демо-примере иконки взяты из Font Awesome.

МАТЕМАТИКА, СТОЯЩАЯ ЗА ПРЕОБРАЗОВАНИЯМИ CSS

Объяснять математику лучше всего в зрительной, а не письменной форме. Поэтому начнем с логики, по мере продвижения вперед применим математику, а после окончания объяснений перейдем к кодированию, к этому моменту вы будете в точности знать, какое правило CSS что делает. Сначала давайте разберемся, что такое «центральный угол». Это – визуальное представление, за которым следует простое объяснение:

Предположим, вам нужно распределить все элементы навигации в полукруге, как в создаваемом нами примере, и у вас в списке навигации шесть пунктов, тогда у каждого угла будет центральный угол в: 180гр. / 6 = 30гр.

Если вы хотите, чтобы элементы заняли всю окружность целиком, и у вас их шесть, то центральный угол для каждого пункта составит: 360гр. / 6 = 60гр.

И так далее. Вы считаете значение нужного вам центрального угла, и с этого момента для фактического создания этих углов мы начинаем применять к преобразованиям CSS простую математику. Для построения угла со значением, равным нужному нам значению центрального угла, нам придется наклонить элементы (с помощью функции CSS skew()): 90гр. – x гр., где x – это значение нужного нам центрального угла.

Легко. Но в данном случае все содержимое внутри пунктов списка также наклонится, и контент будет смотреться беспорядочно, что нам не нужно, поэтому «устраним наклон» привязки внутри каждого пункта, чтобы контент хорошо выглядел, но до этого мы доберемся через минуту.

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

Сейчас вы, возможно, захотите просмотреть пошаговый демо-пример, чтобы получить четкое представление о наших дальнейших действиях. Я также добавил в демо разбор того, что происходит на каждом шаге, поэтому просмотр примера и получение об этом представления займет всего одну минуту. Демо-пример можно проиграть от начала до конца, воспользовавшись кнопкой «Начать демо» (Start Demo), или управлять передвижением от этапа к этапу с помощью кнопки «Следующий шаг» (Next Step), а перезапустить его можно в любой момент с кнопки «Возврат» (Reset).

Смотреть интерактивный демо-пример

Вот скриншоты этапов, которые вы увидите в примере:

Исходное состояние:

Шаг 1:

Шаг 2:

Шаг 3:

Шаг 4:

Шаг 5:

Шаг 6:

Итак, давайте еще раз по ним пройдемся:

В нашем примере пять пунктов навигации, то есть пять центральных углов, где нам нужно прикрыть только верхнюю половину окружности, поэтому в соответствии с объясненной выше математикой каждый элемент получит центральный угол в 36 гр., но в нашем примере я установил значение центрального угла в 40гр. (потому что так обеспечивается увеличенная область щелчка), так что сумма всех углов будет равна 5 * 40 = 200гр., что больше 180гр. В данном случае все, что мы делаем – это вращаем элементы «обратно» против часовой стрелки на (200-180)/2 гр. для того, чтобы убедиться, что они уравновешены с обеих сторон.

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

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

— [90 – (x/2) ] , где x является значением центрального угла

Итак, при значении центрального угла в 40гр. нам нужно наклонить ссылки на -40гр. и повернуть их на:

—[ 90 – (40/2) ] = -70 гр.

Ссылки расположены абсолютно внутри своих родительских элементов, и переполнение overflow элементов списка установлено на скрытое (hidden), то есть эта часть ссылок отсекается, поэтому для гарантии расположения текстового/иконного содержимого ссылок вне их видимой части мы установим выравнивание текста по центру.

Вот и вся математика, нужная вам для создания «ломтей» внутри навигации! Ну наконец-то, верно? Итак, давайте быстренько еще раз все повторим:

Конечно, я пропустил ту часть, где вы перемещаете пункты списка так, чтобы начало их преобразования совпало с центром контейнера (как показано в демо-примере). И это в общем все, что нужно для создания углов, но не все – для создания всей навигации. Остались несколько простых шагов, и они во многом являются обычным назначением стилей, поэтому давайте начнем работать с CSS и обсудим все по мере продвижения!

CSS

Сначала назначим стили первому демо-примеру.

Мы собираемся воспользоваться классами Modernizr‘а, применив их к тэгу body, чтобы выбрать поддерживающие и неподдерживающие браузеры, а также обеспечить простую общую альтернативу для старых браузеров, не поддерживающих преобразования CSS.

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

Также назначим стиль и место кнопке, запускающей открытие и закрытие нашей навигации.

При открытой навигации оверлей покрывает страницу. Вот стили оверлея.

Теперь определим стили элементам навигации и их ссылкам, применив преобразования на основе объясненной выше логики и математики.

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

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

Вот и все, что касается первого демо-примера! Давайте перейдем к следующему.

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

Давайте снова возьмем вышеприведенный пример и изменим одно маленькое простое правило CSS, и посмотрим, какое отличие оно создаст в очертаниях элементов. Мы применим фон с радиальным градиентом к ссылкам с прозрачным фоновым цветом. Результат будет такой:

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

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

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

Итак, применив к своему CSS эти три шага и изменив общие стили (цвета и размеры) навигации и ее элементов так, чтобы те смотрелись как на предыдущем изображении, у нас получится в итоге следующий CSS:

Нужно, чтобы элементы навигации во втором демо раскрывались при ее открытии с эффектом веера. Чтобы его добиться, мы позиционируем элементы в том же месте и с тем же поворотом/наклоном rotate(76deg) skew(60deg). С помощью приостановки преобразования мы даем элементам возможность раскрываться после того, как увеличим обертку. При закрытии навигации подождем, пока элементы вернутся обратно, перед тем, как снова уменьшить обертку. При щелчке по кнопке «open» мы раскроем элементы, повернув каждый из них в их окончательную позицию в окружности.

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

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

Вот, в общем-то, и весь необходимый для создания этих стилей CSS!

JAVASCRIPT

В этих демо мы не пользуемся каркасами-фреймами JavaScript’а. Для добавления и удаления классов я применю Classie.js Давида Де Сандро (David De Sandro). И, наконец, для браузеров, не поддерживающих addEventListener и removeEventListener, мы воспользуемся полифилом EventListener Джонатана Нила (Jonathan Neal).

В обоих демо-примерах мы добавим к кнопке оператор события. Щелчок по кнопке и/или наведение на нее мыши запустит открытие/закрытие навигации. Кроме того, в первом демо при щелчке где угодно вне открытой навигации та закроется. Давайте начнем с JavaScript’а первого примера.

JavaScript для второго демо-примера похож на предыдущий, но для данного случая мы его модифицируем:

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

Автор: Sara Soueidan

Источник: //tympanus.net/

Редакция: Команда webformyself.

Комментарии Вконтакте: