Как да създадете вертикална меню за сайт на CSS

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

Предимството на тази навигация е неговата компактност, но това меню е напълно адаптивна, той играе важна роля в днешния брой на строителна площадка. Така че, нека да започнем.

Стъпка 1. HTML

Ние ще имаме контейнер, който ще съдържа цялата йерархия на менюто, тъй като ние се заключи в подкласове:

Всеки нов параграф ние ще подписано маркер. С маркирането не е нищо сложно, сега разгледаме стилове.

Стъпка 2. CSS

Всичко тук е интересно, като за начало имаме два стила на библиотеката ще бъдат свързани, първият от които е иконата, малки анимации и шрифтове, и на второ място, ние трябва да се изчисти стилове. Ние добавяме медийни заявки, които ни позволяват да направим навигацията адаптивна към различни екрани, анимация имот ще ни позволи да направим малък анимация на курсора на мишката:

В допълнение, ние ще установи позициониране на страницата и кантиране за всяка позиция, кодът изглежда е доста голям, но достатъчно лесен за използване.

Това е всичко. Готово!

Материалът е взет от чуждестранен източник. И представени само с информативна цел.