alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Усложненное адаптивное меню на CSS

Категория: Адаптивная верстка Просмотров: 3656 Коментариев: 0 Дата: 2017-02-19 Добавил: admin

 Адаптивное меню

В прошлой статье мы создавали простое адаптивное меню, которое при заданном размере экрана приобретало заданный ему вид. В этот раз немного усложним наше меню и добавим к нему картинку вроде логотипа, форму поиска ну и конечно само меню. В целом сочетание этих 3х блоков создает один большей блок сайта, который носит обычно название header.

За основу возьмем код прошлой статьи (кто не читал может просмотреть тут) и внесем в него изменения. Первое изменение будет в HTML коде, где к нашему меню добавится логотип и форма поиска.

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 нашего меню.

CSS

                

                

В целом, наше меню и сопутствующие элементы, готовы, но есть еще один момент: если мы хотим чтобы при мобильном разрешении наше вываливающиеся меню изменяло высоту, то для этого понадобится медиа запрос с максимальной высотой max-height. Если высота экрана 480px, то наше меню уменьшит высоту и сдвинется право, сравнявшись со ссылкой «Мобильное меню». Для этого добавляем в общие стили еще один медиа запрос.

CSS

                

                

Наконец, усложненное меню с поиском и логотипом у нас готовы, и скопировав его к себе в документ у Вас должен получится такой же результат как и в просмотре демо-версии. Простое адаптивное меню и как его создать, можно найти тут.


Просмотреть демо: Демо

Скачать исходник: Скачать



Добавить комментарий:


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов