В прошлой статье мы создавали простое адаптивное меню, которое при заданном размере экрана приобретало заданный ему вид. В этот раз немного усложним наше меню и добавим к нему картинку вроде логотипа, форму поиска ну и конечно само меню. В целом сочетание этих 3х блоков создает один большей блок сайта, который носит обычно название header.
За основу возьмем код прошлой статьи (кто не читал может просмотреть тут) и внесем в него изменения. Первое изменение будет в HTML коде, где к нашему меню добавится логотип и форма поиска.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/<
<title>Адаптивное меню</title>
</head>
<body>
<header class="container">
Мобильное Меню
</header> </body> </html>
HTML разметка готова, приступим к оформлению таблицы стилей CSS нашего меню.
В целом, наше меню и сопутствующие элементы, готовы, но есть еще один момент: если мы хотим чтобы при мобильном разрешении наше вываливающиеся меню изменяло высоту, то для этого понадобится медиа запрос с максимальной высотой max-height. Если высота экрана 480px, то наше меню уменьшит высоту и сдвинется право, сравнявшись со ссылкой «Мобильное меню». Для этого добавляем в общие стили еще один медиа запрос.
Наконец, усложненное меню с поиском и логотипом у нас готовы, и скопировав его к себе в документ у Вас должен получится такой же результат как и в просмотре демо-версии. Простое адаптивное меню и как его создать, можно найти тут.
CSS