Создаем адаптивное меню
Создаем адаптивное меню Как создать адаптивное меню для сайта?
Сначала добавим тег meta viewport в разделе head. Данный тег требуется для нашей страницы, чтобы корректно масштабироваться на экране любого размера, особенно на мобильных устройствах.
…а затем добавляем следующий код для навигации в тег body.
Стили которые определяются в данном разделе служат только для декорации. Вы можете устанавливать цвет таким, каким хочется. Для демонстрации тег body будет иметь мягкий, кремовый цвет.
Тег nav который определяет навигацию, будет иметь ширину 100% окна браузера, а тег ul, который содержит основные ссылки меню, имеет ширину 600px.
Затем смещаем ссылки меню влево, так что они будут выводиться в один ряд.
Если вы посмотрите на разметку HTML, то увидите, что clearfix добавлен в атрибуте class для обеих тегов nav и ul для сбрасывания обтекания текста вокруг меню.
Так как у нас есть шесть ссылок меню, контейнер имеет ширину 600px, то каждая ссылка будет шириной 100px.
Ссылки меню разделены рамкой справа шириной 1px, кроме последнего пункта. Нужно изменить модель расчета границ прямоугольника box-sizing на border-box, чтобы сохранить размер меню 100px.
Теперь меню будет иметь более светлый цвет в состояниях :hover и :active.
…а внешние ссылки будут скрыты (для экранов настольных систем).
Так как наша навигация изначально имеет ширину 600px, то сначала определим стили для экранов шириной 600px или меньше, так что данная точка будет первой точкой перелома.
На данных размерах экранах, каждая пара ссылок будет выводиться рядом, а так как ширина списка ul равна 100% от ширины экрана, то ссылка будет шириной 50%.
Также мы определим, как навигация будет выводиться на экранах размера 480px или меньше (то есть во второй точке излома).
На данном размере экрана дополнительная ссылка становится видимой, и ей также придается иконка “меню” с правой стороны с помощью псевдо-элемента :after, а основные ссылки будут скрываться для сохранения вертикального пространства на экране.
Когда экран становится меньше 320px меню будет показываться вертикально сверху вниз.
Выводим меню>
На данном этапе меню будет скрыто и будет показываться при нажатии на ссылку "Меню". Для данного эффекта используется функция jQuery slideToggle(). Однако при изменении размера окна браузера сразу после того, как меню было открыто и закрыто на маленьком экране, то меню останется невидимым, так как свойство display: none, генерируемое jQuery, еще будет присоединено к элементу.
Итак, нужно удалить данный стиль при изменении размера окна:
Стили которые определяются в данном разделе служат только для декорации. Вы можете устанавливать цвет таким, каким хочется. Для демонстрации тег body будет иметь мягкий, кремовый цвет.
Тег nav который определяет навигацию, будет иметь ширину 100% окна браузера, а тег ul, который содержит основные ссылки меню, имеет ширину 600px.
Затем смещаем ссылки меню влево, так что они будут выводиться в один ряд.
Если вы посмотрите на разметку HTML, то увидите, что clearfix добавлен в атрибуте class для обеих тегов nav и ul для сбрасывания обтекания текста вокруг меню.
Так как у нас есть шесть ссылок меню, контейнер имеет ширину 600px, то каждая ссылка будет шириной 100px.
Ссылки меню разделены рамкой справа шириной 1px, кроме последнего пункта. Нужно изменить модель расчета границ прямоугольника box-sizing на border-box, чтобы сохранить размер меню 100px.
Теперь меню будет иметь более светлый цвет в состояниях :hover и :active.
…а внешние ссылки будут скрыты (для экранов настольных систем).
Так как наша навигация изначально имеет ширину 600px, то сначала определим стили для экранов шириной 600px или меньше, так что данная точка будет первой точкой перелома.
На данных размерах экранах, каждая пара ссылок будет выводиться рядом, а так как ширина списка ul равна 100% от ширины экрана, то ссылка будет шириной 50%.
Также мы определим, как навигация будет выводиться на экранах размера 480px или меньше (то есть во второй точке излома).
На данном размере экрана дополнительная ссылка становится видимой, и ей также придается иконка “меню” с правой стороны с помощью псевдо-элемента :after, а основные ссылки будут скрываться для сохранения вертикального пространства на экране.
Когда экран становится меньше 320px меню будет показываться вертикально сверху вниз.
Выводим меню>
На данном этапе меню будет скрыто и будет показываться при нажатии на ссылку "Меню". Для данного эффекта используется функция jQuery slideToggle(). Однако при изменении размера окна браузера сразу после того, как меню было открыто и закрыто на маленьком экране, то меню останется невидимым, так как свойство display: none, генерируемое jQuery, еще будет присоединено к элементу.
Итак, нужно удалить данный стиль при изменении размера окна: