Разметка HTML
Для начала нам понадобится скачать IDE (Integrated Development Environment) , я буду использовать visual studio code но вы можете использовать блокнот .
Сначала добавим тег meta viewport в разделе head. Данный тег требуется для нашей страницы, чтобы корректно масштабироваться на экране любого размера, особенно на мобильных устройствах.
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
а затем добавляем следующий код для навигации в тег body.
Мы используем шесть ссылок меню и одну дополнительную ссылку после списка. Дополнительная ссылка будет использоваться для вывода навигации, когда она будет скрываться на маленьких экранах.
стили
Стили которые определяются в данном разделе служат только для декорации. Вы можете устанавливать цвет таким, каким хочется. Для демонстрации тег body будет иметь мягкий, кремовый цвет.
Тег nav который определяет навигацию, будет иметь ширину 100% окна браузера, а тег ul, который содержит основные ссылки меню, имеет ширину 600px
Затем смещаем ссылки меню влево, так что они будут выводиться в один ряд.
Если вы посмотрите на разметку HTML, то увидите, что clearfix добавлен в атрибуте class для обеих тегов nav и ul для сбрасывания обтекания текста вокруг меню.
Так как у нас есть шесть ссылок меню, контейнер имеет ширину 600px, то каждая ссылка будет шириной 100px.
Ссылки меню разделены рамкой справа шириной 1px, кроме последнего пункта. Нужно изменить модель расчета границ прямоугольника box-sizing на border-box, чтобы сохранить размер меню 100px.
Теперь меню будет иметь более светлый цвет в состояниях :hover и :active.
а внешние ссылки будут скрыты (для экранов настольных систем).
вот что получилось на данном этапе.
телефон
Медиа запросы
Медиа запросы используются для определения того, как будут измениться стили в определенных точках при изменении размеров экрана.
Также мы определим, как навигация будет выводиться на экранах размера 480px или меньше (то есть во второй точке излома).
На данном размере экрана дополнительная ссылка становится видимой, и ей также придается иконка “меню” с правой стороны с помощью псевдо-элемента :after, а основные ссылки будут скрываться для сохранения вертикального пространства на экране.
Когда экран становится меньше 320px меню будет показываться вертикально сверху вниз.
Теперь можно изменять размер экрана. Меню будет изменяться вместе с изменением размером экран.
Выводим меню
На данном этапе меню будет скрыто и будет показываться при нажатии на ссылку "Меню". Для данного эффекта используется функция jQuery slideToggle().
Однако при изменении размера окна браузера сразу после того, как меню было открыто и закрыто на маленьком экране, то меню останется невидимым, так как свойство display: none, генерируемое jQuery, еще будет присоединено к элементу.
Итак, нужно удалить данный стиль при изменении размера окна:
Наше меню завершено, смотрите демонстрационную страницу, изменяйте размер окна браузера.