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

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

Шаг 1. HTML

Навигация будет состоять из ненумерованного списка, помещённого в элемент nav. Через атрибут класс передаём какая иконка должна быть прикреплена к элементу:

C разметкой мы разобрались, теперь давайте все это оформим с помощью стилей.

Как создать боковое меню для сайта на CSS3 | RUDEBOX

Шаг 2. CSS

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

Зададим общие стили для body и основного контейнера:

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

При раскрытии меню меняем высоту и ставим значение 100%, а рамку смещаем на 90px влево и на 30px со всех других сторон. Цвет фона выставим в формате RGBA:

Далее применим один финт. Через JavaScript добавим невидимый элемент при клике на который, поставленная нами рамка будет исчезать.

При открытии меню, расширяем данный элемент:

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

Псевдо-элементы расположим абсолютно и их высота будет такой же как у родительского элемента — 100%:

Для того позиционирования, воспользуемся свойством translateY:

При открытии меню, элементы списка станут видимыми, а затем применяем эффект плавного появления. Так же изменим значение transform до 0, для достижения 3d эффекта:

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

Сбросим размер текста псевдо-элементов, которые содержат иконки. Значения em тут работать не будут, поэтому задаём размеры в пикселях:

Сделаем иконки чуть меньше, если пользователь просматривает сайт через мобильное устройство:

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

Шаг 3. JS

Нам необходимо, что при клике на свободную область, меню будет закрыто. Так же нам нужно обеспечить поддержку событий прикосновений:

Вот и все. Готово!

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

Читайте также: