Как сделать подвал сайта html
Обновлено: 29.04.2024
Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.
Верстка сайта – ремесло для посвященных
Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:
Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.
В процессе верстки кодом html происходит разбивка « скелета » сайта на части. А с помощью css ( каскадных таблиц стилей ) задаются размеры его « костей », цвет и расположение.
Различают несколько видов верстки:
Также к основным недостаткам табличного кода относится его долгая загрузка и плохая индексация содержимого поисковыми системами.
Содержимое страницы, сверстанной на основе таблиц, не будет отображено до тех пор, пока не загрузятся все данные. Блочная верстка позволяет отображать каждый загруженный элемент отдельно.
Плохая индексация табличных страниц объясняется большими промежутками между блоками текста, расположенного в разных ячейках таблицы.
Теперь табличная верста редко используется в качестве основного метода создания сайтов. Сейчас ее применяют лишь для структурирования табличных данных и расположения графических изображений.
II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:
- Отделение стиля элементов от кода html ;
- Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
- Лучшая индексация поисковиками;
- Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
- Легкость создания визуальных эффектов ( выпадающих меню, списков, всплывающих подсказок ).
Основным недостатком блочной верстки является некая « двусмысленность » понимания ее кода различными браузерами. Поэтому часто html страницы приходится « доводить » путем использования специальных хаков.
С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки).
Действие хака является узкоспециализированным и решает проблему некорректного отображения лишь в одном браузере.
Основным элементом, применяемым в блочной верстке, является тег . Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css :
Как происходит блочная верстка?
Перед началом верстки готовый psd макет сайта в графическом редакторе разрезают на блоки ( слои ). В отдельную папку помещают вырезанные фоновые картинки, которые будут прикрепляться отдельно к каждому слою:
Для примера возьмем вот такой макет сайта, созданный в Photoshop . Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id . Получается такая структура:
Затем к готовой структуре сайта на html строкой прикрепляем файл css . После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.
Полный код примера index.html :
Содержимое файла style.css :
Вот так наш пример блочной верстки сайта выглядит в окне браузера:
Конечно, этот пример является лишь наглядным пособием для демонстрации того, как происходит блочная верстка. Настоящая верстка происходит с использование фоновых изображений и логотипов, подключаемых в css . А также с включением в html и css кода хаков для оптимизации отображения во всех браузерах.
Для редактирования кода страниц сайта используются специальные редакторы html . Многие из них способны автоматически генерировать код визуальных элементов, создаваемых в них пользователем в режиме « дизайн ». Но такой код не является валидным, и чаще всего нуждается в « ручной » доводке:
Свое роднее!
С помощью рассмотренных здесь основ блочной верстки можно легко сверстать свой сайт самостоятельно. Тогда будущий ресурс будет более родным и знакомым. Ведь в его скелете все косточки вы « перемоете » собственными руками.
В подвале у нас располагается рисунок лежащего льва и контактная информация. Если проанализировать изображение, видно, что оно не однородное — трава слева, справа и по центру различается. Также она накладывается поверх линии (рис. 6.10).
Рис. 6.10. Трава отображается поверх границы
Ещё один момент, который следует учесть заранее — как отображать подвал при небольшом объёме контента. Возможен «висящий» подвал, внизу которого отображается фон веб-страницы (рис. 6.11а) или подвал, заполненный до нижнего края окна (рис. 6.11б).
а. Висящий подвал
б. Подвал прижат к краю
Рис. 6.11. Разновидности подвала
В действительности прижимать подвал к нижнему краю не придётся, достаточно заполнить пустое пространство под подвалом тем же цветом, что и у травы. За счёт такого трюка будет создаваться впечатление, что подвал занимает всё оставшееся пространство.
Способов добавления рисунка травы для подвала несколько, пойдём самым простым путём и сделаем его фоном. Изображение, чтобы оно корректно смотрелась на разных разрешениях, придётся задать достаточно большим, 2000 пикселов по ширине. Картинка ставится через свойство background и в параметрах её положение указывается по центру значением 50% 0 .
Код HTML будет простым.
Ширина этих слоёв явно не указана, поэтому она занимает всю доступную ширину, так что текст будет выравниваться по левому краю. Необходимо ограничить текст нашим макетом, для этого включим дополнительный слой copyright и для него укажем ширину и выравнивание по центру.
Здесь к ширине контента ( width ) добавляется значение padding слева и справа, что в итоге и даёт ширину нашего макета в 760px. Текст сдвигается вправо с помощью универсального свойства margin , добавляемого к селектору P . Код для создания подвала и текста:
Осталось только включить рисунок с лежащим львом и окончательно подкорректировать стили. Льва добавим в виде обычного изображения через тег , а чтобы управлять его положением поместим рисунок в с классом lion . Впрочем, этот класс можно также установить напрямую тегу
. Окончательный код нашего подвала представлен в примере 6.16.
Пример 6.16. Код подвала
Положение льва укажем с помощью позиционирования. Для этого родительскому элементу следует указать свойство position как relative , а элементу lion как absolute . В таком случае свойства left и top управляют координатами относительно родителя, т.е. . Однако здесь есть одна сложность, занимает всю ширину страницы, а льва надо установить относительно макета в 760px. Значение для left указать нельзя, потому что мы не знаем, чему в пикселах равно расстояние от левого края браузера до левого края макета. Воспользуемся следующим трюком: для left установим 50% , что выровняет край рисунка по центральной оси, и относительно этого положения будем сдвигать рисунок свойством margin-left с отрицательным (влево) или положительным (вправо) значением.
Значения margin-left и top подбираются опытным путём, чтобы добиться наилучшего результата.
Добавление рисунка вносит путаницу с фоновыми рисунками, и они начинают накладываться друг на друга, так что пора восстановить их исконное место. Для начала сдвинем рисунок с травой вниз на 53 пиксела. Это число получилось вычитанием из высоты рисунка льва (80px) высоты рисунка травы (27px). И подымем наш подвал целиком вверх на 77–80 пикселов. Во-первых, поднять надо, потому что из-за рисунка льва подвал опускается вниз, во-вторых, получим наложение подвала на границу макета, как показано на рис. 6.10.
К сожалению, все эти действия не имеют никакого смысла, потому что из-за эффекта схлопывающихся отступов положение элементов считается совсем иначе. Отменить этот эффект можно разными способами, к примеру, с помощью полей, границ, абсолютного позиционирования, но в конкретном случае они не подходят. Здесь поля и границы окажутся лишними. Так что вспомним ещё один метод и добавим свойство overflow со значением auto . Вообще-то это свойство при необходимости добавляет полосы прокрутки, если контент не помещается в заданные размеры. Но сейчас overflow нам нужно только для одного — отменить схлопывающиеся отступы.
Текст в подвале и зелёный фон также поднимается вверх, поэтому для слоя footer-bg надо установить отступ сверху на высоту рисунка льва.
Окончательно для контента основной части добавляем поле снизу равное высоте рисунка, чтобы текст не закрывался подвалом.
Стиль для подвала приведён в примере 6.17.
Пример 6.17. Стиль подвала
Осталось решить последний вопрос, делать подвал висящим или нет (см. рис. 6.11). Вся реализация, показанная выше, направлена на висящий подвал, изменить поведение можно всего-навсего перенеся background из footer-bg в BODY . Хотя это действие установит зелёный цвет фона для всей страницы целиком, заметно это будет только там, где видно пространство под подвалом. Для остальных разделов вроде шапки, основной части задан свой собственный цвет фона, поэтому включение фона для селектора BODY на них не повлияет.
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 8.0+ | 9.2+ | 5.0+ | 4.0+ | 2.1+ | 3.0+ |
Спецификация
Описание
Тег задаёт «подвал» сайта или раздела, в нём может располагаться имя автора, дата документа, контактная и правовая информация.
Синтаксис
Атрибуты
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Подвал сайта
Браузеры
Internet Explorer до версии 8.0 включительно игнорирует тег , но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору FOOTER .
Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.
Это кошмар какой-то! Почему подвал вашего сайта опять « всплывает » и сдвигает дизайн? Неужели нельзя нормально прижать футер к низу страницы чем-нибудь? Контентом или кирпичами хотя-бы! Кирпич в монитор не пролазит?
Понятно, тогда сидите и ничего не делайте, пока не прочитаете нашу статью до конца.
Делаем правильный футер для своего сайта
Многие владельцы сайтов встречаются с этой проблемой, когда footer страницы просто всплывает « кверху ». И тогда непонятно, что делать. Чаще всего таким недостатком грешат дизайны сайтов, сверстанные на скорую руку, самостоятельно ( кружок «очумелые ручки» ) или начинающими веб-мастерами.
При этом на первых порах жизни сайта ничего ужасающего не происходит. И такая идиллия продолжается до тех пор, пока контент давит « своим весом » на подвал, не давая ему подняться вверх. Но стоит разместить на странице материал меньшего объема, и недавно « спокойный » футер моментально поднимается вверх, приводя весь дизайн сайта в неподобающий вид.
Для устранения этого « дефекта » сверстанного шаблона не обязательно тратиться на услуги веб-мастера. Чаще всего футер сайта можно поставить на место самостоятельно. Рассмотрим все возможные варианты устранения подобной проблемы:
Первый способ
Первый способ « привязать » подвал « к дну » страницы построен на основе CSS . Для начала приведем код примера, а затем более подробно рассмотрим его реализацию:
Для того чтобы приклеить подвал к низу страницы тег мы вынесли за пределы контейнера ( слоя wrapper ). Растягиваем всю страницу и содержимое « тела » до границ экрана. Для этого в коде CSS мы задали высоту тегов и в 100%:
Минимальную высоту слоя-контейнера устанавливаем тоже в 100%. Для случая, если ширина контента будет больше, чем высота контейнера, задаем свойству значение auto . Благодаря этому wrapper будет автоматически подстраиваться под ширину размещенного на странице контента:
Строчка кода « height: 100% » предназначена для старых версий IE , которые не воспринимают свойство min-height .
Чтобы в дизайне страницы отделить место под подвал, мы устанавливаем отступ для тега в 100 пикселей:
На данном этапе мы получили веб-страницу шириной во весь экран и дополнительно 100 пикселей, которые « нейтрализуются » отрицательным значением отступа для футера ( margin: -100px ) при установленном для него относительном позиционировании ( position: relative ). Таким образом, с помощью отрицательного значения отступа мы « сдвигаем » подвал в область контейнера, для которого установлена высота в 100%.
В данном примере разметка веб-документа задана с помощью сравнительно новых тегов HTML 5 , которые могут быть неправильно интерпретированы устаревшими версиями браузеров. Из-за этого весь дизайн страницы может быть отображен некорректно. Чтобы избежать этого, нужно новые теги из арсенала 5 версии языка гипертекста заменить на обычные :
Усовершенствованный вариант
Рассмотренный выше способ того, как сделать футер внизу страницы « незыблемым » не всем подходит. Если в будущем вы собираетесь модифицировать и совершенствовать дизайн своего сайта с помощью всплывающих окон, тогда лучше отказаться от использования предыдущей реализации.
Чаще всего в реализации pop-up окон используется свойство CSS z-index . С помощью его значений задается порядок наложения слоев друг на друга.
Чем больше значение z-index элемента, тем выше он будет находиться в общем стеке « наслоения ».
Но из-за того, что в предыдущем примере мы использовали отрицательное значение отступа для футера, нижняя часть всплывающего окна будет перекрываться верхней областью подвала. Даже несмотря на то, что оно будет иметь большее значение z-index . Потому что у родителя всплывающего окна ( wrapper ) значение этого свойства все равно меньше.
Во второй части серии мы изучим четыре модели шаблонов меню, в которых навигация размещена в « подвале ». За счет этого сохраняется пространство в верхней части страницы.
В предыдущем руководстве мы разработали три шаблона, в которых навигационная панель остается в верхней части веб-страницы независимости от размеров экрана. Целью этих шаблонов была минимизация вертикального пространства на экранах с маленьким разрешением.
Сейчас мы займемся разработкой четырех шаблонов, в которых меню навигации будет расположена в подвале. Переместив навигацию вниз страницы, мы освободим ее верхнюю часть.
Шаблоны
При реализации шаблонов из первой статьи главной нашей задачей было освобождение вертикального пространства и его рациональное использование. Вы хотите предоставить вашим посетителям возможность просматривать как можно больше контента на экране, но чтобы навигация не занимала слишком много полезного пространства. Для этого есть еще одно решение – вынести навигацию в подвал.
Это решение вызывает ряд проблем. В то время как посетители будут более легко и быстро получать доступ к содержимому сайта, им придется «скролить» страницу, чтобы добраться до навигации.
Ниже я перечислил шаблоны, которые мы разработаем в этой статье:
- Только в подвале (Footer only) — меню навигации постоянно находится в подвале;
- Вариации на тему «Только в подвале» — навигация в подвале будет отображаться на экранах с маленьким разрешением, но при появлении свободного пространства будет перемещаться вверх страницы;
- Якорь подвала (Footer anchor) — будет отображать навигацию в подвале на экранах с маленьким разрешением. Для доступа к меню вверху страницы будет выводиться специальная кнопка;
- Фиксированный подвал (Footer fixed) — отображение навигации в подвале даже на маленьких экранах. При этом меню всегда остается доступным, постоянно оставляя навигацию в поле зрения пользователя.
Каждая из этих моделей будет построена по образцу предыдущего шаблона. Сначала мы переместим навигацию в подвал, а затем всячески будем усовершенствовать первоначальный вариант, облегчая доступ к меню.
Как и в предыдущей статье, код меню и связанных с ними элементов будет отображен в соответствующем разделе статьи. Полная версия кода доступна здесь , и его также можно увидеть, посетив демонстрационный режим и включив просмотр исходного кода.
Шаблон «только в подвале»
Этот шаблон помещает навигационную панель в футер. Но, скорее всего, вы не станете использовать его, как есть. Потому что этот шаблон освобождает вертикальное пространство в верхней части страницы, но скрывает навигацию в нижней части. Такой вариант будет прекрасно работать на экранах смартфонов, но его применение на широких экранах теряет всякий смысл:
Но этот шаблон станет основанием для последующих вариаций.
Введение: На самых маленьких экранах мы создаем меню, чтобы вывести в нижней части страницы ссылки вертикальным списком.
Далее мы поработаем с их стилевым оформлением. С помощью медиа-запросов реализуем переходы от вертикального к горизонтальному расположению меню, чтобы при любом разрешении экрана оно оставалось внизу страницы.
Шаг 1: HTML
Давайте взглянем на общую структуру страницы. Ранее навигация была расположена внутри заголовка вместе с логотипом. Теперь же она располагается внутри футера.
Сейчас это тот же самый список ссылок, который мы видели в первой части. Все, что я сделал – скопировал и вставил код, чтобы переместить панель навигации из верха страницы вниз:
Шаг 2: CSS - стили
Список отображает элементы уровней блока один над другим. С помощью стилей мы зададим поля и отступы равные нулю и уберем указатели.
Далее мы зададим верхнюю границу для списка и установим цвет для текущей ссылки:
Так же остальным ссылкам мы присвоим цвет и отступ. Удалим подчеркивание ссылок и сделаем элементы списка блочными для увеличения активной области ссылок. На маленьких сенсорных экранах большая ссылка нажимается легче.
Чтобы немного разнообразить наше меню визуально, я решил в качестве фонового изображения установить ссылкам градиент и сделать фон немного светлее при наведении курсора мыши:
Я применяю стили лишь из эстетических соображений. По умолчанию меню отображается как вертикальный список со ссылками, что нам и нужно:
Шаг 3: Медиа-запросы
Вертикальный список со ссылками, к которому мы применили несколько стилей, выглядит прекрасно до тех пор, пока окно браузера не достигнет значения 42.5em ( 680px ). После этого горизонтальное пространство становится слишком пустым. Поэтому мы усовершенствуем наш пример, сделав для меню переход из вертикального положения в горизонтальное.
Реализация такого перехода основана на свойстве float для ссылок внутри списка. Остальное сделано для эстетики. Сначала я задал для списка фон, который визуально разделит панель навигации и остальные элементы футера. Я так же установил отступ и нижнюю границу. Так как ссылки стали плавающими, я добавил списку свойство overflow: hidden .
У ссылок появился отступ: 5% по левую сторону. Такой же, как и у всех элементов страницы. Также у ссылок я убрал границы и фон. Так как ранее я использовал градиент для фона, мне нужно « очистить » свойство background-image у ссылок, включая состояние hover :
Следующий медиа-запрос просто увеличивает пространство вокруг ссылок, когда окно браузера становится шире:
Мы могли бы оставить все как есть и просто увеличивать пространство между ссылками по мере необходимости. Но я решил сместить ссылки к правому нижнему углу, поскольку там образуется свободное место.
Прежде всего, я установил свойству float значение right . После настройки отступов ссылки становятся в нужное мне место. Также полностью убираем фон у панели, чтобы на его месте оказался общий фон:
И снова применяем медиа-запрос, чтобы настроить пространство между ссылками. На этом мы остановимся, а вы самостоятельно можете добавить столько разрешений экрана, сколько потребуется:
Чтобы реализовать этот шаблон, не нужно прилагать много усилий. Нужно только переместить HTML – разметку для панели навигации в нижнюю часть страницы. Большая часть CSS – стилей применяется для дизайна, и вы можете настраивать меню, как вам нравится. Возможно, вам захочется переместить вертикальное меню в горизонтальное положение.
Основное достоинство меню, расположенного в футере - это то, что оно может содержать сколько угодно ссылок. При маленьком разрешении экрана вы можете использовать вертикальное пространство, а когда образуется лишнее место, расположить ссылки горизонтально. Главное убедится в том, что будет достаточно места для нажатия всех пунктов меню.
Возможно, вы не захотите использовать этот шаблон в его текущем виде, потому далее мы рассмотрим несколько вариаций на эту тему.
Вариация шаблона «Только в подвале»
Этот шаблон – вариация предыдущего. Вплоть до разрешения 64em ( 1024px ) в коде ничего не меняется и, на странице, будет выглядеть абсолютно также. Но вместо того, чтобы перемещать меню в правую часть футера, когда там появляется место, мы поместим его в правую часть заголовка:
На маленьком экране пользователю придется пролистывать страницу в самый низ, чтобы найти меню, но при большом разрешении меню будет доступно вверху страницы. Так как код идентичен предыдущему примеру, я опишу только различия.
Вступление: Для маленьких экранов оставим все как есть. Начнем с вертикально расположенного меню, и как только места станет достаточно, превратим его в горизонтальное. Новый код начнет действовать, когда ширины экрана окажется достаточно для модификации меню. Вместо того чтобы поместить меню в футере справа, мы перенесем его на самый верх страницы.
Шаг 1: HTML
Единственное отличие в html – разметке между этим шаблоном и предыдущим заключается в том, что навигационная панель находится не в футере, а просто помещена в самый низ страницы. На малых экранах различий в отображении не будет, но намного легче поместить панель в заголовок:
Шаг 2: CSS - стиль
В CSS стилях шаблонов лишь одно отличие. Так как меню теперь находится вне футера, нам нужно каким – то образом выделить его и обозначить границы:
Шаг 3: медиа - запросы
Первая пара запросов ( для 42.5em и 56em ) такая же, как и в предыдущем шаблоне. Различия начинаются с ширины в 64em. Ранее мы перемещали меню в правую часть футера. Здесь же мы поместим его в правую часть заголовка страницы.
Главное, на что нужно обратить внимание – позиционирование элемента nav, который содержит меню. На этот раз мы не можем воспользоваться свойством float , так как панель навигации находится вверху страницы. Вместо этого мы используем позиционирование.
Тег body позиционирован относительно ( position: relative ). Благодаря этому, элемент nav мы можем позиционировать абсолютно, установив значения top и right .
Все остальное почти идентично первому шаблону из этой статьи. Изменены лишь отступы, убран фон и границы:
Как только мы переместили панель в верхнюю часть страницы, то остальные медиа-запросы становятся нужны лишь для настройки расстояний между ссылками. Я остановился на ширине в 90em, а вы можете продолжить изменять значение до необходимой вам ширины:
Подсказки
Этот шаблон имеет все те же преимущества, что и предыдущий. В нем можно отобразить большое количество ссылок. Он лучше первого тем, что перемещает меню вверх страницы, когда появляется достаточно места. Когда именно – зависит от вашего дизайна. И не забывайте оставлять достаточно места для нажатия пальцем на ссылку.
Этот шаблон не лишен того недостатка, что на маленьких экранах придется листать в самый низ страницы, чтобы добраться до меню.
Якорь в футере
Шаблон якорь в футере должен решить проблему скроллинга путем помещения в меню якоря, а на верх страницы – ссылки на этот якорь.
Введение: На маленьких экранах мы применим схему с вертикальным меню. Но включим в нее CSS – кнопку, при клике по которой мы переместимся в футер - меню. Когда ширины экрана станет достаточно для размещения навигации, то кнопку мы будем скрывать.
Шаг 1: HTML
Шаг 2: CSS - стили
Единственная разница CSS – стилей в том, что в этом шаблоне мы оформим ссылку в виде кнопки и позиционируем ее в правой стороне заголовка с помощью свойства float: right и отступов от краев страницы.
Чтобы задать ссылке вид кнопки, ее свойство display установим в значение block и добавим отступы. После того, как уберем подчеркивание и сменим цвет на белый, добавим границу небольшого радиуса и фон.
И снова мы используем градиент, чтобы сделать кнопку более кликабельной. В некоторых браузерах этот прием не сработает, но в остальных кнопка будет выглядеть более объемной. Для состояния hover сделаем цвет более светлым:
Шаг 3: Медиа - запросы
При разрешении экрана в 64em ( при котором меню перемещается в заголовок ) мы убираем кнопку, задав свойству display значение none . Все остальное остается без изменений:
Этот шаблон имеет такой же функционал, как и предыдущий. Вертикальное пространство вверху страницы используется по минимуму. Как и в случае с остальными шаблонами убедитесь, что ссылки имеют достаточное для нажатия пальцем пространство. Якорь обеспечивает быстрый доступ к меню, несмотря на то, что оно расположено в футере.
Недостатком является резкий переход сверху страницы в ее низ. Это может озадачить посетителей, которые сразу не поймут, куда они переместились. Один из способов избежать этого – добавить в футер ссылку " Наверх ". Я не стал этого делать, но она поможет решить две проблемы: быстрый доступ к заголовку страницы и сориентировать потерявшегося пользователя.
Еще один способ решения этой проблемы я опишу в следующем шаблоне:
Фиксированный футер
Шаблон с якорем в футере решает проблему быстрого доступа к панели навигации, а этот сохраняет меню постоянно видимым, поэтому никаких перемещений не требуется. Мы используем для этого фиксированное позиционирование и закрепим панель внизу страницы. Располагая меню внизу, мы экономим много пространства на маленьких экранах.
Введение: Из-за большого количества ссылок в меню мы начнем использовать шаблон с якорем для самых маленьких разрешений. Как только пространство позволит, мы удалим кнопку перехода в меню, сделаем меню горизонтальным и перенесем его в нижнюю часть страницы. И будем « держать » его там до тех пор, пока не станет достаточно места, чтобы переместить меню в верхнюю часть страницы.
Шаг 1: HTML
Разметка html идентична предыдущему шаблону.
Шаг 2: CSS - стили
И здесь все остается без изменений. Переходим к шагу 3:
Шаг 3: Медиа - запросы
Здесь будет новый код. Как только ширина окна браузера достигает 37.5em ( 600px ), мы размещаем меню вертикально. Сначала мы добавим отступы к нижней части футера, иначе он опустится ниже фиксированного меню. Кнопка со ссылкой на якорь теперь не нужна, поэтому отключим ее.
Чтобы зафиксировать панель навигации, применим стили к элементу nav. Позиционирование сделаем фиксированным ( fixed ) и значение свойства bottom установим в 0. Свойство z-index предотвратит « наезд » информации о сайте на меню. Подойдет любое положительное значение. Я выбрал 10. Мы также зададим фон элементу nav . Значение свойства width установим 100%, потому что ширина у навигационной панели по умолчанию не равна ширине страницы:
Все остальное без изменений. Внутри навигационной панели ссылки выравнены слева с помощью float и имеют отступы. Цвет фона и градиент удаляем.
Повторюсь, что эта модель использует минимум вертикального пространства в верхней части страницы. Шаблон решает проблему скрытой навигации и перехода к меню, постоянно сохраняя ее на видном месте.
В нашем примере было много ссылок, чтобы сразу задать фиксированное позиционирование внизу страницы, поэтому я оставил якорь для футера и кнопку перехода к нему на том же месте и в том же размере. Отличным вариантом стало бы уменьшение количества пунктов меню до 4 или 5. Также вместо текста можно использовать иконки.
Этот шаблон на текущий момент нельзя назвать распространенным. Большинство из нас использует пальцы для навигации на мобильных устройствах, поэтому в скором будущем мы увидим больше рабочих примеров и вариаций этого шаблона.
В заключении
Все описанные здесь шаблоны – вариации одной схемы. Вместо того чтобы занимать ценное вертикальное пространство в топе страницы, мы переместили навигацию в подвал. Самый главный плюс этого решения – свободное пространство при маленьком размере экрана. Минус – панель навигации всегда находится внизу.
В первой схеме мы перемещаем меню вверх страницы сразу же, как только там появляется достаточно места. Это помогает, но на маленьких экранах приходится прокручивать страницу, чтобы добраться до меню. Поместив якорь в футере и кнопку наверху страницы, мы частично решили эту проблему. Но осталась проблема дезориентации пользователя.
Перемещение к меню происходит моментально, посетитель оказывается в самом низу страницы и, скорее всего, не может понять, что же произошло.
Фиксированный футер исправляет эту проблему. Меню постоянно отображается внизу страницы. А если заменить текст пунктов меню на иконки, то мы сможем удерживать панель в футере независимо от ширины страницы.
У меня в запасе есть еще несколько шаблонов с навигационными панелями. В следующей статье мы вернемся к вариантам в топе страницы. Мы адаптируем шаблон с использованием якоря таким образом, чтобы не прыгать к навигации, а раскрывать ее на месте.
Читайте также: