Вы здесь: Главная > CSS > Функция: показывать / скрывать навигацию

Функция: показывать / скрывать навигацию

Опубликовано автором Просмотры: 30

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

В этой статье рассматриваются два варианта достижения этой цели: использование JavaScript и использование псевдокласса CSS : target. В качестве дополнительного сигнала он включает значки “показать” и “скрыть”, сделанные из градиентов CSS вместо изображений.

Эти методы демонстрируют простой и эффективный способ усилить удобство использования страницы.

HTML Dog на мобильном устройстве: до и после нажатия кнопки навигации.

Разметка

Мы собираемся начать с типичной структуры страницы:

<body id="body">

<p><a href="#main_nav" id="access_nav" class="access_aid">Skip to navigation</a></p>

<article>
    <!-- main content here -->
</article>

<nav id="main_nav">
    <ul>
        <li><a href="">This</a></li>
        <li><a href="">That</a></li>
        <li><a href="">The other</a></li>
        <!-- etc. -->
    </ul>
    <p><a href="#body" id="access_top" class="access_aid">Skip to top</a></p>
</nav>

</body>

Обратите внимание, что у нас есть соображения доступности ссылок “Перейти к навигации” и “Перейти к началу”. Это полезно для тех, кто использует невизуальные браузеры (такие как программы чтения с экрана) или для тех, кто не может использовать указывающее устройство (и может использовать, например, систему вкладок, подобную клавиатуре). Однако эти ссылки окажутся дополнительно полезными в нашей технике показа / скрытия.

Показывать и скрывать

Переходя к сути и сохраняя её простой на данный момент, мы собираемся, чтобы наша страница начиналась с видимой области содержимого и скрытой навигации. Итак, мы можем начать с этого CSS:

#main_nav {
    display: none;
}

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

То, что ждёт нас впереди, не будет работать в старых браузерах. JavaScript, целевой объект и градиенты будут недоступны в Internet Explorer версии 8 и ниже. Супер. Несмотря на то, что существуют обходные пути, мы сохраняем простоту и современность, имея в виду, что этот метод в первую очередь полезен для мобильных браузеров, которые обладают надёжными возможностями.

JavaScript

Самый очевидный способ включать и выключать отображение навигации ─ использовать JavaScript. Следующий пример можно использовать как один из способов добавления и удаления атрибута класса (в данном случае “with_nav”) к body при нажатии на ссылку “Перейти к навигации”:

var nav = document.getElementById('access_nav'),
    body = document.body;

nav.addEventListener('click', function(e) {
    body.className = body.className? '' : 'with_nav';
    e.preventDefault();
});

Короче говоря, это позволит сделать 3 вещи.

Подождать, пока будет нажат элемент с идентификатором “access_nav”.

Добавить класс “with_nav” в body (или удалить его, если он уже есть).

Запретить переход по фактическому назначению ссылки.

Затем страница может быть оформлена соответствующим образом, в основном, включая:

.with_nav #main_nav {
    display: block;
}

: target

В качестве альтернативы, мы можем полностью избежать JavaScript. Псевдокласс :target может использоваться для оформления целевого элемента на странице, то есть HTML-элемента с идентификатором (например, “blancmange”), на который установлена ссылка (с помощью чего-то вроде “raspberry.html#blancmange”).

В этом случае нашим целевым элементом является элемент с идентификатором “main_nav” — наша основная область навигации. Итак, когда кто-то выбирает ссылку “Перейти к навигации”, страница переходит к “main_nav”, и затем мы можем оформить это поле по-другому:

#main_nav:target {
    display: block;
}

Теперь страница не только перейдёт к внезапно появляющейся области навигации при выборе “Перейти к навигации”, но и при последующем выборе “Перейти к началу” навигация снова исчезнет. Это потому, что “main_nav” больше не будет целевым якорем.

Оформление

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

#main_nav {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
}

Кнопки с градиентами

Мы можем улучшить это множеством способов — цветами, пробелами, тенями, переходами.

Текст ссылки доступности “Перейти к …” не имеет особого смысла при ссылке на “показать” и “скрыть”. Мы не хотим изменять текст ссылок, потому что они хорошо сформулированы для их первоначальной цели обеспечения доступности. Но мы можем заменить их значками, соответствующими нашей задаче. Итак, просто для пущего шика, мы завершим оформление наших кнопок показа / скрытия значками, выполненными из линейных градиентов, вместо фоновых изображений.

Кнопки. Следующие условные обозначения: параллельные линии для “показать” и крестик для “скрыть”.

Однако давайте сначала разберёмся с некоторыми основами. Мы можем сделать наши ссылки более похожими на кнопки и разместить их в лучших позициях:

.access_aid {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 0;
    padding-top: 40px;
    overflow: hidden;
    border: 1px solid #ccc;
}

Это переместит наши поля ссылок в верхний правый угол соответствующих родительских полей, превратит их в квадраты, уберёт текст с дороги и обведёт их тонкой рамкой.

Теперь о создании этих значков. Мы собираемся использовать серию горизонтальных линий для обозначения “показать” (это общепринятое соглашение при предложении “навигации”) и крест для обозначения “скрыть” (являющийся ещё более распространённым символом для “закрыть”).:

.access_aid {
    /* In addition to the existing declarations... */
    background: white 10px 10px / 20px 20px no-repeat;
}

#access_nav {
    background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
    background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
}

#access_top {
    background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
}

Код выполняет несколько функций.

Задаёт положение фона в виде одного экземпляра, 10 пикселей слева, 10 пикселей сверху вниз и размером 20 на 20 пикселей.

Добавляет повторяющийся горизонтальный серый и белый линейный градиент для кнопки “показать”.

Добавляет два диагональных градиента для “скрыть”, по одному для каждой линии, образующей крест.

Бац. Легко.

Основные принципы, изложенные здесь, включая использование :target и кнопок градиента CSS, используются этим веб-сайтом при просмотре на устройствах с маленьким экраном.

Живи!

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

Страницы в тему:

Примеры CSS:

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