Создайте раскрывающееся меню CSS

Автор: John Stephens

Дата создания: 23 Январь 2021

Дата обновления: 17 Май 2024

Видео: Выпадающее МЕНЮ на чистом CSS / HTML

Содержание

01. Дизайн
02. Давайте копаться
03. «Перейти к спасению»
04. Домашнее хозяйство
Как это? Прочтите это!

Необходимые знания: Базовый HTML, промежуточный CSS
Требует: Текстовый редактор, устройства и / или эмуляторы на ваше усмотрение
Время проекта: 30 минут
Файл поддержки

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

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

Мне всегда нравились выпадающие меню на чистом CSS, но они традиционно полагались на : hover. А наведение, как вы знаете, не имеет отношения к сенсорным сценариям, так что это казалось тупиком. Но тут меня осенило: :цель был ответ на мои молитвы.

Как вы, наверное, знаете, селектор целевого псевдокласса (:цель) позволяет применять стили к элементам, указанным в идентификаторе фрагмента URL-адреса. Например:

http: //website.tld/my-page/#content

В этом URL-адресе идентификатором фрагмента является «контент», который заставит браузер прокручивать страницу, чтобы отобразить элемент с я бы «содержания» в поле зрения. Очень просто. Затем мы можем применить стили к этому элементу, когда он нацелен, используя :цель:

:цель {
фон: # F6FD86;
}

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

01. Дизайн

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

Было много манипуляций, но мы начали с контента, естественно, организовав страницу так, чтобы пользователи имели немедленный доступ к материалам, которые они на самом деле должны были прочитать и / или использовать, прежде чем показывать им какую-либо навигацию:

Баннер сайта
Содержание
Призывы к действию
Контактные механизмы
Ссылки на определенные школьные страницы
Социальные сети
Поиск
Авторские права и др.

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

Как мы все прекрасно понимаем, на устройствах с маленькими экранами недвижимость стоит дорого, поэтому мы постоянно искали возможности упростить работу для наших пользователей. Поскольку смартфоны, как правило, имеют лучшую поддержку CSS, чем функциональные телефоны, мы решили спрятать менее важные ссылки за значком меню, открывая их только при нажатии на них, что очень похоже на старые раскрывающиеся меню CSS. Это распространенный шаблон дизайна в мобильном Интернете, но все реализации, которые я видел до сих пор, требовали JavaScript. Я хотел посмотреть, смогу ли я создать эквивалентный опыт, используя только CSS (и не прибегая к хакам, связанным со скрытым элементом управления формой).

Я пройдусь по CSS, но сначала должен отметить, что следующие стили были помещены в таблицу стилей, предназначенную для устройств средней ширины, начиная с 19,375ems. Большинство этих правил было заключено в дополнительный медиа-запрос внутри этой таблицы стилей, что ограничивало их применение шириной менее 46 мкм (что было достаточно широким, чтобы поддерживать альтернативный макет для этой конкретной навигации). Этот метод изоляции гарантирует, что правила не «перетекут» без надобности в альтернативные макеты.

link rel = "stylesheet" href = "/ c / medium.css" media = "экран и (min-width: 19.375em)" />

@media screen и (max-width: 46em) {
/ * Правила здесь * /
}

02. Давайте копаться

Первым шагом было применение стилей, чтобы переместить навигацию в верхнюю часть страницы:

#nav {
маржа: 0;
позиция: абсолютная;
верх: 0;
справа: 0;
слева: 0;
z-индекс: 1000;
}

Примечание. Я удалил ненужные стили, чтобы вы могли сосредоточиться на важных деталях.

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

#nav a {
ширина нижней границы: 0;
переполнение: скрыто;
высота: 0;
высота строки: 0;
отступ: 0 1em;
}
#nav: target a {
ширина нижней границы: 1px;
высота строки: 3em;
высота: 3em;
}

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

03. «Перейти к спасению»

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

Во-первых, я добавил ссылку «перейти к» вверху страницы:

заголовок>
- Логотип ->
a id = "jump" href = "# nav"> Навигация по сайту / a>
/ заголовок>

Затем я придал ему стиль, похожий на маленькую кнопку меню в правом верхнем углу нашего дизайна:

#Прыгать {
фон: # 000 url (/c/i/nav.png) 50% 50% без повтора;
граница: 1px solid # 8b8b8b;
ширина границы: 0 0 1px 1px;
курсор: указатель;
дисплей: блок;
отступ: 0;
высота: 53 пикс;
ширина: 53 пикс;
текстовый отступ: -999em;
позиция: абсолютная;
справа: 0;
верх: 0;
}

Стоит отметить, что эта ссылка полезна даже для обычных телефонов, поскольку она позволяет им переходить прямо к навигации. (Вы можете увидеть этот простой подход, используемый Contents Magazine и Bagcheck. Чтобы узнать о плюсах и минусах, обратитесь к обзору схем мобильной навигации Брэда Фроста.)

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

Поразмыслив над этой проблемой, меня осенило смехотворно простое решение: включить ссылку «вернуться к содержанию» в конце списка навигации. Щелчок по этой ссылке сделает #nav больше не цель, и список рухнет.

ul id = "nav" tabindex = "0">
! - Элементы навигации ->
li id = "back"> a href = "# top"> Вернуться к началу / a> / li>
/ ul>

Достаточно просто, но это решило только часть проблемы. Мы не хотим, чтобы пользователю приходилось рыться в списке, чтобы найти ссылку, позволяющую закрыть раскрывающееся меню; вместо этого мы хотим, чтобы он вел себя так, как ожидал бы пользователь: нажатие или щелчок за пределами области раскрывающегося меню должен снова сворачивать навигацию. К счастью, с небольшим z-индекс жонглирование и легкое умное позиционирование позволяет разместить ссылку под другими элементами навигации и расширить ее, чтобы заполнить оставшуюся часть экрана (незаметно, конечно). Вот примеры соответствующих стилевых правил:

#Прыгать {
/ * убедитесь, что кнопка меню находится наверху * /
z-индекс: 1001;
}
#nav {
/ * навигация находится за кнопкой меню * /
z-индекс: 1000;
}
#nav: target {
/ *, если не отображается * /
z-индекс: 1001;
}
#nav: target a {
/ * сделать навигационные ссылки более высокими * /
положение: относительное;
z-индекс: 1;
}
#назад {
/ * устанавливаем контекст позиционирования для более близкого * /
положение: относительное;
}
#back a {
/ * превращаем ссылку в призрак * /
фон: прозрачный;
граница: 0;
текстовый отступ: -999em;
/ * заставим его заполнить экран * /
позиция: абсолютная;
верх: -101em;
внизу: -101em;
слева: 0;
справа: 0;
/ * убедитесь, что он находится за другими ссылками * /
z-индекс: 0;
}

После этого меню стало полностью функциональным. Просто нужно было немного доработать.

04. Домашнее хозяйство

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

#nav: target a {
-moz-transition: высота 0,25 с, высота строки 0,25 с;
-ms-transition: высота 0,25 с, высота строки 0,25 с;
-o-transition: высота 0,25 с, высота строки 0,25 с;
-webkit-transition: высота 0,25 с, высота строки 0,25 с;
переход: высота 0,25 с, высота строки 0,25 с;
}

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

body: not (: target) #nav {
/ * эти стили применяются, только если: target и: not
понял (и тело, конечно, не нацелено) * /
}

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

Аарон Густафсон - основатель и главный консультант Easy! Дизайн, консультации по веб-разработке. Он также является менеджером группы проекта веб-стандартов (WaSP), приглашенным экспертом в Альянс открытого веб-образования W3C, спикером и автором.