1 Начнём с подготовки к работе. Созданием папку для дальнейшего хранения в ней своей работы. Внутри папки создаем html – документ и папку для будущего размещения в ней css - кода. Назовём файлы по умолчанию index.html и style.css, сразу отделив файлы в разные папки.
2 Создание html разметки. Начинаем с построения меню в html - документе. Создаём основные разделы и их подразделы основываясь на следующий фрагмент кода.
3 В результате должно получиться черновое меню:
Оформление меню средствами CSS3
1 Для оформления меню используем закругленные углы (свойство border-radius) и функцию линейного градиента, ниже представлен фрагмент кода:
2 Устанавливаем ширину командой width, указывая нужный размер в пикселях;
3 Градиент считается фоновым изображением, поэтому добавляется через свойство background-image:
В данном случае градиент будет осуществлен между двумя цветами. Вначале пишется позиция, от которой будет начинаться градиент, затем начальный и конечный цвет. Для распределения цветов градиента используются left top и left bottom. В примере приведены разные позиции и тип получаемого градиента для цветов #444 и #111, по-другому от серого к белому.
|
|
4 После проделанной работы должно получиться следующее:
5 Далее пропишем расположение столбцов в рамке и зададим стилевое оформление последнего элемента командой last-child:
6 После этого должен получиться следующий результат:
7 Затем приступаем к созданию многоуровневого меню. В нашем случае меню будет состоять из одного уровня. Выставляем размер шрифта командой font-size, командой visibility скроем подразделы, включая рамку вокруг них и фон, указываем позицию элемента и используем градиент.