# Создание меню в CSS

В данном уроке мы будем практиковаться создавать менюшки сайтов. Давайте для примера сделаем следующую менюшку:

Для начала нам необходимо сделать HTML часть. Сделаем див, разместив в нем ссылки нашего меню:

`<div id="menu"> <a href="#">link text 1</a> <a href="#">link text 2</a> <a href="#">link text 3</a> <a href="#">link text 4</a> <a href="#">link text 5</a> </div>`

Как вы видите на образце, одна из ссылок меню выделяется. Она символизирует то, что мы находимся на странице сайта, соответствующей этому пункту меню. Такие страницы принято выделять с помощью класса `active`:

`<div id="menu"> <a href="#">link text 1</a> <a href="#" class="active">link text 2</a> <a href="#">link text 3</a> <a href="#">link text 4</a> <a href="#">link text 5</a> </div>`

Давайте теперь разместим наши ссылки в ряд:

`#menu { display: flex; }`

Напишем стили наших ссылок:

`#menu a { margin-right: 5px; padding: 10px; font: 15px Arial; text-decoration: none; color: #1437AD; border: 1px solid #1437AD; background-color: white; }`

Сделаем реакцию ссылок на наведение:

`#menu a:hover { color: blue; border: 1px solid blue; background-color: #F5F6FA; }`

Вид активной ссылки совпадает с видом ссылки по наведению. Объединим эти стили вместе:

`#menu a:hover, #menu a.active { color: blue; border: 1px solid blue; background-color: #F5F6FA; }`

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

`<div id="menu"> <a href="#">link text 1</a> <a href="#" class="active">link text 2</a> <a href="#">link text 3</a> <a href="#">link text 4</a> <a href="#">link text 5</a> </div>` `#menu { display: flex; } #menu a { margin-right: 5px; padding: 10px; font: 15px Arial; text-decoration: none; color: #1437AD; border: 1px solid #1437AD; background-color: white; } #menu a:hover, #menu a.active { color: blue; border: 1px solid blue; background-color: #F5F6FA; }`
← →
↑