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

 

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

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

Шаг 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

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

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

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