Изучаем шаблоны отзывчивого навигационного меню: шаблоны для «подвала»

Во второй части серии мы изучим четыре модели шаблонов меню, в которых навигация размещена в «подвале». За счет этого сохраняется пространство в верхней части страницы.

В предыдущем руководстве мы разработали три шаблона, в которых навигационная панель остается в верхней части веб-страницы независимости от размеров экрана. Целью этих шаблонов была минимизация вертикального пространства на экранах с маленьким разрешением.

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

Шаблоны

При реализации шаблонов из первой статьи главной нашей задачей было освобождение вертикального пространства и его рациональное использование. Вы хотите предоставить вашим посетителям возможность просматривать как можно больше контента на экране, но чтобы навигация не занимала слишком много полезного пространства. Для этого есть еще одно решение – вынести навигацию в подвал.

Это решение вызывает ряд проблем. В то время как посетители будут более легко и быстро получать доступ к содержимому сайта, им придется «скролить» страницу, чтобы добраться до навигации.

Ниже я перечислил шаблоны, которые мы разработаем в этой статье:

  • Только в подвале (Footer only) — меню навигации постоянно находится в подвале;
  • Вариации на тему «Только в подвале» — навигация в подвале будет отображаться на экранах с маленьким разрешением, но при появлении свободного пространства будет перемещаться вверх страницы;
  • Якорь подвала (Footer anchor) — будет отображать навигацию в подвале на экранах с маленьким разрешением. Для доступа к меню вверху страницы будет выводиться специальная кнопка;
  • Фиксированный подвал (Footer fixed) — отображение навигации в подвале даже на маленьких экранах. При этом меню всегда остается доступным, постоянно оставляя навигацию в поле зрения пользователя.

Каждая из этих моделей будет построена по образцу предыдущего шаблона. Сначала мы переместим навигацию в подвал, а затем всячески будем усовершенствовать первоначальный вариант, облегчая доступ к меню.

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

Шаблон «только в подвале»

Этот шаблон помещает навигационную панель в футер. Но, скорее всего, вы не станете использовать его, как есть. Потому что этот шаблон освобождает вертикальное пространство в верхней части страницы, но скрывает навигацию в нижней части. Такой вариант будет прекрасно работать на экранах смартфонов, но его применение на широких экранах теряет всякий смысл:

Но этот шаблон станет основанием для последующих вариаций.

Введение: На самых маленьких экранах мы создаем меню, чтобы вывести в нижней части страницы ссылки вертикальным списком.

Далее мы поработаем с их стилевым оформлением. С помощью медиа-запросов реализуем переходы от вертикального к горизонтальному расположению меню, чтобы при любом разрешении экрана оно оставалось внизу страницы.

Шаг 1: HTML

Давайте взглянем на общую структуру страницы. Ранее навигация была расположена внутри заголовка вместе с логотипом. Теперь же она располагается внутри футера.

Сейчас это тот же самый список ссылок, который мы видели в первой части. Все, что я сделал – скопировал и вставил код, чтобы переместить панель навигации из верха страницы вниз:

<body>
  <header>
    <!-- навигация располагалась на этом месте -->
  </header>

  <div class="container">
    <div id="content"></div>
    <div id="sidebar"></div>
  </div>

  <div class="subfooter"></div>

  <footer>
    <nav>
      <ul id="demo-nav">
        <li><a href="">Вернуться к записи</a></li>
        <li><a href="footer-only.html">Только футер</a></li>
        <li><a href="footer-adapt.html">Вариации на тему футера</a></li>
        <li><a href="footer-anchor.html">Якорь в подвале</a></li>
        <li class="current"><a href="footer-fixed.html">Фиксированный футер</a></li>
      </ul>
    </nav>

    <div class="container"></div>
  </footer>

</body>
53962_b6fc0207e95d8e5b465b737c43da3182

Шаг 2: CSS — стили

Список отображает элементы уровней блока один над другим. С помощью стилей мы зададим поля и отступы равные нулю и уберем указатели.

Далее мы зададим верхнюю границу для списка и установим цвет для текущей ссылки:

#demo-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

#demo-nav li {
  border: solid #878382;
  border-width: 0 0 1px 0;
}

#demo-nav li.current a {color: #9b9796;}
#demo-nav li.current a:hover {color: #111;}

Так же остальным ссылкам мы присвоим цвет и отступ. Удалим подчеркивание ссылок и сделаем элементы списка блочными для увеличения активной области ссылок. На маленьких сенсорных экранах большая ссылка нажимается легче.

Чтобы немного разнообразить наше меню визуально, я решил в качестве фонового изображения установить ссылкам градиент и сделать фон немного светлее при наведении курсора мыши:

#demo-nav a {
  color:#fff;
  padding: 0.75em 5%;
  text-decoration: none;
  display: block;
  background-color: #575352;
  background-image: -webkit-linear-gradient(top, #777372, #676362);
  background-image: -moz-linear-gradient(top, #777372, #676362);
  background-image: -ms-linear-gradient(top, #777372, #676362);
  background-image: -o-linear-gradient(top, #777372, #676362);
}

#demo-nav a:hover {
  background-color: #777372;
  background-image: -webkit-linear-gradient(top, #878382, #777372);
  background-image: -moz-linear-gradient(top, #878382, #777372);
  background-image: -ms-linear-gradient(top, #878382, #777372);
  background-image: -o-linear-gradient(top, #878382, #777372);
  color: #111;
}

Я применяю стили лишь из эстетических соображений. По умолчанию меню отображается как вертикальный список со ссылками, что нам и нужно:

53962_aa2eb0dcb9455c571d3a3b9f11e8dfe9

Шаг 3: Медиа-запросы

Вертикальный список со ссылками, к которому мы применили несколько стилей, выглядит прекрасно до тех пор, пока окно браузера не достигнет значения 42.5em (680px). После этого горизонтальное пространство становится слишком пустым. Поэтому мы усовершенствуем наш пример, сделав для меню переход из вертикального положения в горизонтальное.

Реализация такого перехода основана на свойстве float для ссылок внутри списка. Остальное сделано для эстетики. Сначала я задал для списка фон, который визуально разделит панель навигации и остальные элементы футера. Я так же установил отступ и нижнюю границу. Так как ссылки стали плавающими, я добавил списку свойство overflow: hidden.

У ссылок появился отступ: 5% по левую сторону. Такой же, как и у всех элементов страницы. Также у ссылок я убрал границы и фон. Так как ранее я использовал градиент для фона, мне нужно «очистить» свойство background-image у ссылок, включая состояние hover:

@media screen and (min-width: 42.5em) {
  #demo-nav {
    background: #474342;
    padding: 1.5em 0;
    border-bottom: 1px solid #878382;
    overflow: hidden;
  }

  #demo-nav li {border: 0;}

  #demo-nav a {
    padding: 0.75em 0 0.75em 5%;
    float: left;
    background-color: transparent;
    background-image: none;
    border-width: 0;
  }

  #demo-nav a:hover {
    background-color: transparent;
    background-image: none;         
  }
}

Следующий медиа-запрос просто увеличивает пространство вокруг ссылок, когда окно браузера становится шире:

@media screen and (min-width: 56em) {
  #demo-nav a {padding: 0.75em 1.5em 0.75em 5%;}
}

Мы могли бы оставить все как есть и просто увеличивать пространство между ссылками по мере необходимости. Но я решил сместить ссылки к правому нижнему углу, поскольку там образуется свободное место.

Прежде всего, я установил свойству float значение right. После настройки отступов ссылки становятся в нужное мне место. Также полностью убираем фон у панели, чтобы на его месте оказался общий фон:

@media screen and (min-width: 64em) {
  #demo-nav {
    float: right;
    margin-right: 5%;
    background: transparent;
    border: 0;
    padding: 1em 0;
  }

  #demo-nav li {display: inline;}

  #demo-nav a {
    padding: 0.5em 1.25em;
  }

  #demo-nav a:hover {
    color: #777
  }

  #demo-nav li.current a:hover {color: #777;}
  #demo-nav li:last-child a {padding-right: 0;}
}

И снова применяем медиа-запрос, чтобы настроить пространство между ссылками. На этом мы остановимся, а вы самостоятельно можете добавить столько разрешений экрана, сколько потребуется:

@media screen and (min-width: 75em) {
  #demo-nav a {padding: 0.5em 1.75em;}
}

Подсказки

Чтобы реализовать этот шаблон, не нужно прилагать много усилий. Нужно только переместить HTML – разметку для панели навигации в нижнюю часть страницы. Большая часть CSS – стилей применяется для дизайна, и вы можете настраивать меню, как вам нравится. Возможно, вам захочется переместить вертикальное меню в горизонтальное положение.

Основное достоинство меню, расположенного в футере — это то, что оно может содержать сколько угодно ссылок. При маленьком разрешении экрана вы можете использовать вертикальное пространство, а когда образуется лишнее место, расположить ссылки горизонтально. Главное убедится в том, что будет достаточно места для нажатия всех пунктов меню.

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

Вариация шаблона «Только в подвале»

Этот шаблон – вариация предыдущего. Вплоть до разрешения 64em (1024px) в коде ничего не меняется и, на странице, будет выглядеть абсолютно также. Но вместо того, чтобы перемещать меню в правую часть футера, когда там появляется место, мы поместим его в правую часть заголовка:

53962_a48a6ba7bf3cf18730df5554289abf14

На маленьком экране пользователю придется пролистывать страницу в самый низ, чтобы найти меню, но при большом разрешении меню будет доступно вверху страницы. Так как код идентичен предыдущему примеру, я опишу только различия.

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

Шаг 1: HTML

Единственное отличие в html – разметке между этим шаблоном и предыдущим заключается в том, что навигационная панель находится не в футере, а просто помещена в самый низ страницы. На малых экранах различий в отображении не будет, но намного легче поместить панель в заголовок:

<nav>
  <ul id="demo-nav">
    <li><a href="">Вернуться к записи</a></li>
    <li class="current"><a href="footer-only.html"> Только футер </a></li>
    <li><a href="footer-adapt.html"> Вариации на тему футера </a></li>
    <li><a href="footer-anchor.html"> Якорь в подвале </a></li>
    <li><a href="footer-fixed.html"> Фиксированный футер </a></li>
  </ul>
</nav>

<footer>
  <div class="container">
    <p class="credit">Демонстрационный режим от Steven Bradley &mdash;
    <a href="http://www.vanseodesign.com">Vanseo Design</a></p>
  </div>
</footer>
53962_b163320b6060dee34a3f884a821ccc09

Шаг 2: CSS — стиль

В CSS стилях шаблонов лишь одно отличие. Так как меню теперь находится вне футера, нам нужно каким – то образом выделить его и обозначить границы:

nav {
  border-top: 1px solid #878382;
}

Шаг 3: медиа — запросы

Первая пара запросов (для 42.5em и 56em) такая же, как и в предыдущем шаблоне. Различия начинаются с ширины в 64em. Ранее мы перемещали меню в правую часть футера. Здесь же мы поместим его в правую часть заголовка страницы.

Главное, на что нужно обратить внимание – позиционирование элемента nav, который содержит меню. На этот раз мы не можем воспользоваться свойством float, так как панель навигации находится вверху страницы. Вместо этого мы используем позиционирование.

Тег body позиционирован относительно (position: relative). Благодаря этому, элемент nav мы можем позиционировать абсолютно, установив значения top и right.

Все остальное почти идентично первому шаблону из этой статьи. Изменены лишь отступы, убран фон и границы:

@media screen and (min-width: 64em) {
  nav {
    position: absolute;
    top: 0;
    right: 5%;
    background: none;
    border: 0;
  }

  #demo-nav {
    background: transparent;
    border: 0;
    padding: 1em 0;
  }

  #demo-nav li {
    display: inline;
  }

  #demo-nav a {
    padding: 0.5em 1em;
  }

  #demo-nav a:hover {
    color: #777
  }

  #demo-nav li.current a:hover {color: #777;}
  #demo-nav li:last-child a {padding-right: 0;} 
}

Как только мы переместили панель в верхнюю часть страницы, то остальные медиа-запросы становятся нужны лишь для настройки расстояний между ссылками. Я остановился на ширине в 90em, а вы можете продолжить изменять значение до необходимой вам ширины:

@media screen and (min-width: 75em) {
  #demo-nav a {padding: 0.5em 1.75em;}
}

@media screen and (min-width: 80em) {
  #demo-nav {a {padding: 0.5em 2.1em;}
}

@media screen and (min-width: 90em) {
  #demo-nav a {padding: 0.5em 2.5em;}
}

Подсказки

Этот шаблон имеет все те же преимущества, что и предыдущий. В нем можно отобразить большое количество ссылок. Он лучше первого тем, что перемещает меню вверх страницы, когда появляется достаточно места. Когда именно – зависит от вашего дизайна. И не забывайте оставлять достаточно места для нажатия пальцем на ссылку.

Этот шаблон не лишен того недостатка, что на маленьких экранах придется листать в самый низ страницы, чтобы добраться до меню.

Якорь в футере

Шаблон якорь в футере должен решить проблему скроллинга путем помещения в меню якоря, а на верх страницы – ссылки на этот якорь.

Введение: На маленьких экранах мы применим схему с вертикальным меню. Но включим в нее CSS – кнопку, при клике по которой мы переместимся в футер — меню. Когда ширины экрана станет достаточно для размещения навигации, то кнопку мы будем скрывать.

Шаг 1: HTML

Разметка html будет идентична предыдущему шаблону за одним исключением. Нам нужно добавить ссылку, которую мы отобразим в виде кнопки, в самом верху страницы. Мы используем уже существующий ID #demo-nav как якорь для ссылки на меню.

При ее нажатии страница будет перезагружаться с добавлением к адресу хештега #demo-nav, перемещая вас непосредственно к меню:

<header>
  <img class="logo" src="images/logo.png" width="252" height="46" />
  <a class="anchor" href="#demo-nav">Меню</a>
</header>

<!--код страницы-->

<nav>
  <ul id="demo-nav">
    <li><a href="">Вернуться к записи</a></li>
    <li class="current"><a href="footer-only.html"> Только футер </a></li>
    <li><a href="footer-adapt.html"> Вариации на тему футера </a></li>
    <li><a href="footer-anchor.html"> Якорь в подвале </a></li>
    <li><a href="footer-fixed.html"> Фиксированный футер </a></li>

     </ul>
</nav>
53962_b163320b6060dee34a3f884a821ccc09

Шаг 2: CSS — стили

Единственная разница CSS – стилей в том, что в этом шаблоне мы оформим ссылку в виде кнопки и позиционируем ее в правой стороне заголовка с помощью свойства float: right и отступов от краев страницы.

Чтобы задать ссылке вид кнопки, ее свойство display установим в значение block и добавим отступы. После того, как уберем подчеркивание и сменим цвет на белый, добавим границу небольшого радиуса и фон.

И снова мы используем градиент, чтобы сделать кнопку более кликабельной. В некоторых браузерах этот прием не сработает, но в остальных кнопка будет выглядеть более объемной. Для состояния hover сделаем цвет более светлым:

.anchor {
  float: right;
  margin-top: 1.25em;
  display: block;
  padding: 0.25em 2%;
  color: #fff;
  text-decoration: none;
  border-radius: 0.25em;
  background: #5b5756;
  background-color: #5b5756;
  background-image: -webkit-linear-gradient(top, #6b6766, #5b5756);
  background-image: -moz-linear-gradient(top, #6b6766, #5b5756);
  background-image: -ms-linear-gradient(top, #6b6766, #5b5756);
  background-image: -o-linear-gradient(top, #6b6766, #5b5756);
}

.anchor:hover {
  background-color: #7b7776;
  background-image: -webkit-linear-gradient(top, #8b8786, #7b7776);
  background-image: -moz-linear-gradient(top, #8b8786, #7b7776);
  background-image: -ms-linear-gradient(top, #8b8786, #7b7776);
  background-image: -o-linear-gradient(top, #8b8786, #7b7776);
}
53962_1d6e812a779ef2e19a953ada5179487e

Шаг 3: Медиа — запросы

При разрешении экрана в 64em (при котором меню перемещается в заголовок) мы убираем кнопку, задав свойству display значение none. Все остальное остается без изменений:

@media screen and (min-width: 64em) {
  .anchor {display: none;}
}

Подсказки

Этот шаблон имеет такой же функционал, как и предыдущий. Вертикальное пространство вверху страницы используется по минимуму. Как и в случае с остальными шаблонами убедитесь, что ссылки имеют достаточное для нажатия пальцем пространство. Якорь обеспечивает быстрый доступ к меню, несмотря на то, что оно расположено в футере.

Недостатком является резкий переход сверху страницы в ее низ. Это может озадачить посетителей, которые сразу не поймут, куда они переместились. Один из способов избежать этого – добавить в футер ссылку «Наверх«. Я не стал этого делать, но она поможет решить две проблемы: быстрый доступ к заголовку страницы и сориентировать потерявшегося пользователя.

Еще один способ решения этой проблемы я опишу в следующем шаблоне:

53962_2e6993e06d48773156a8dcd0cae307b7

Фиксированный футер

Шаблон с якорем в футере решает проблему быстрого доступа к панели навигации, а этот сохраняет меню постоянно видимым, поэтому никаких перемещений не требуется. Мы используем для этого фиксированное позиционирование и закрепим панель внизу страницы. Располагая меню внизу, мы экономим много пространства на маленьких экранах.

Введение: Из-за большого количества ссылок в меню мы начнем использовать шаблон с якорем для самых маленьких разрешений. Как только пространство позволит, мы удалим кнопку перехода в меню, сделаем меню горизонтальным и перенесем его в нижнюю часть страницы. И будем «держать» его там до тех пор, пока не станет достаточно места, чтобы переместить меню в верхнюю часть страницы.

Шаг 1: HTML

Разметка html идентична предыдущему шаблону.

Шаг 2: CSS — стили

И здесь все остается без изменений. Переходим к шагу 3:

53962_94df3ebf0c5d13c2dfbdd2c2e2b8c25e.png

Шаг 3: Медиа — запросы

Здесь будет новый код. Как только ширина окна браузера достигает 37.5em (600px), мы размещаем меню вертикально. Сначала мы добавим отступы к нижней части футера, иначе он опустится ниже фиксированного меню. Кнопка со ссылкой на якорь теперь не нужна, поэтому отключим ее.

Чтобы зафиксировать панель навигации, применим стили к элементу nav. Позиционирование сделаем фиксированным (fixed) и значение свойства bottom установим в 0. Свойство z-index предотвратит «наезд» информации о сайте на меню. Подойдет любое положительное значение. Я выбрал 10. Мы также зададим фон элементу nav. Значение свойства width установим 100%, потому что ширина у навигационной панели по умолчанию не равна ширине страницы:

@media screen and (min-width: 37.5em) {
  footer {
    margin-bottom: 4em;
  }

  .anchor {display: none;}

  nav {
    position: fixed;
    bottom: 0;
    z-index: 10;
    background: #474342;
    width: 100%;        
  }

  #demo-nav {
    padding: 0.5em 0;
  }

  #demo-nav li {
    border: 0;
    display: inline;
  }

  #demo-nav a {
    padding: 0.75em;
    float: left;
    background-color: transparent;
    background-image: none;
    border-width: 0;
  }

  #demo-nav a:hover {
    background-color: transparent;
    background-image: none;         
  }
}

Все остальное без изменений. Внутри навигационной панели ссылки выравнены слева с помощью float и имеют отступы. Цвет фона и градиент удаляем.

Подсказки

Повторюсь, что эта модель использует минимум вертикального пространства в верхней части страницы. Шаблон решает проблему скрытой навигации и перехода к меню, постоянно сохраняя ее на видном месте.

В нашем примере было много ссылок, чтобы сразу задать фиксированное позиционирование внизу страницы, поэтому я оставил якорь для футера и кнопку перехода к нему на том же месте и в том же размере. Отличным вариантом стало бы уменьшение количества пунктов меню до 4 или 5. Также вместо текста можно использовать иконки.

Этот шаблон на текущий момент нельзя назвать распространенным. Большинство из нас использует пальцы для навигации на мобильных устройствах, поэтому в скором будущем мы увидим больше рабочих примеров и вариаций этого шаблона.

В заключении

Все описанные здесь шаблоны – вариации одной схемы. Вместо того чтобы занимать ценное вертикальное пространство в топе страницы, мы переместили навигацию в подвал. Самый главный плюс этого решения – свободное пространство при маленьком размере экрана. Минус – панель навигации всегда находится внизу.

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

Перемещение к меню происходит моментально, посетитель оказывается в самом низу страницы и, скорее всего, не может понять, что же произошло.

Фиксированный футер исправляет эту проблему. Меню постоянно отображается внизу страницы. А если заменить текст пунктов меню на иконки, то мы сможем удерживать панель в футере независимо от ширины страницы.

У меня в запасе есть еще несколько шаблонов с навигационными панелями. В следующей статье мы вернемся к вариантам в топе страницы. Мы адаптируем шаблон с использованием якоря таким образом, чтобы не прыгать к навигации, а раскрывать ее на месте.

Скачать рабочие материалы
Посмотреть демо

Перевод статьи «Examining Responsive Navigation: Footer Patterns» был подготовлен дружной командой проекта Сайтостроение от А до Я.