Создание маркированного меню

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 скроем подразделы, включая рамку вокруг них и фон, указываем позицию элемента и используем градиент.