В этом статье рассмотрим, как сделать раскрывающуюся навигацию только с помощью CSS. Этот учебник начинается с кода, который я представил в учебнике по простой горизонтальной вариаций. Прежде чем начать, здесь нужно упомянуть, что эта техника также подойдет для небольших экранов или мобильных веб-сайтов. Где по-прежнему подхожу к этому с мобильной точки зрения, но решение, которое я представлено идеально подходит для небольших экранов.
Используется редактор кодов скобок, поэтому можно видеть Live Preview, когда работаю. Вы можете видеть, что это простая навигация, которая имеет разные цвета для активного элемента, а также при наведении курсора. При создание навигационной панели, то использовался мобильный подход, где с простой вертикальной панели, которое меняется на горизонтальное положение на больших мониторах.
Чтобы добавить подменю, вам просто нужно добавить вложенные неупорядоченные списки в верхнем меню.
Поэтому, если я хочу подменю, я могу перейти к этому li тегу и внутри него, вставить другой ul тег и некоторые li теги для каждого элемента меню со ссылкой внутри. Синтаксис подобен меню верхнего уровня, только внутри которого находится внутри. Я добавляю 3 пункта меню с некоторыми ярлыками Emmet.
Теперь это выглядит ужасно как на маленьком экране, так и на большом экране.
Сначала я буду работать на маленьком экране.
Изменения CSS для малого экрана
Причина, по которой это невозможно прочитать, заключается в том, что подменю отображаются поверх главного меню. Это потому, что есть height собственность под .performan_courtesy li. Элементы списка с подменю даются только 40px, что недостаточно для того, чтобы содержать подменю.
Если я удалю его, то по умолчанию будет использоваться значение по умолчанию, auto что означает, что браузер рассчитает высоту, необходимую на основе ее содержимого. Теперь мы видим все пункты меню.
Новая проблема заключается в том, что размер шрифта для подменю больше верхнего меню.
Это потому, что я указал размер шрифта на emустройство. Ems рассчитываются на основе размера шрифта родителя. И когда у вас есть вложенные элементы, это может вызвать эффект умножения. В этом случае подменю получают размер шрифта, который в 1,2 раза больше, чем в главном меню.
Поэтому использование emsможет быть разочаровывающим, когда вы вставляете вещи, определяющие размер шрифта.
Существует еще одна единица измерения, remsобозначающая «root ems» и всегда будет основывать ее значение на корневом элементе вместо родителя. Это означает, что вы избегаете эффекта каскада и мультипликатора.
Я изменю единицу измерения rem.
Теперь все элементы имеют одинаковый размер.
Однако remон не работает в IE8 и ниже, поэтому, если вам нужно поддерживать то, что вам нужно другое решение. pxВместо этого вы можете использовать .
Я действительно хочу, чтобы подменю было меньше текста, чтобы отличить их от верхних меню. Поэтому я собираюсь создать новый селектор для li тегов подменю, а затем я могу указать другой размер шрифта.
Если я укажу li - что находится внутри другого, li он будет нацелен только на элементы вложенных списков.
Когда я устанавливаю его в 1em, вы можете видеть, что размер согласован.
Код
/* Sub Menu code */ .performan_courtesy li li { font-size: 1em; }
Но я поставлю это на .8em так, чтобы оно было немного меньше.
Мне не нравится текст с таким расширенным меню. Это происходит text-align: centerотсюда здесь, в неупорядоченном списке. Я хочу оставить это на ulтеге, потому что я хочу, чтобы это меню было сосредоточено на больших экранах, но я сделаю, чтобы li теги оставались выравниванием.
Поэтому я добавлю
Код
text-align: leftк .performan_courtesy li.
Затем мне нужно добавить прописку, чтобы она не обнимала левую. Если я добавлю это в элемент списка, граница становится беспорядочной, поэтому я переместлю эту строку в теги привязки.
Код
padding-left: 15px;
Последняя проблема в меню маленького экрана заключается в том, что граница не отображается между всеми строками.
У меня есть граница внизу элементов списка, но так как нижняя часть списка «Учебники» или «Бюллетень» находится под подменю, элемент списка главного меню не получает границу.
Вместо этого я переведу эту строку кода и в aтег.
Теперь небольшое меню выглядит лучше.
CSS на больших экранах
Итак, наконец, я могу заняться основной темой этого учебника, и вот как заставить подменю показывать только при наведении на более крупные экраны. Это на самом деле не займет много времени.
Эта следующая часть кода происходит внутри медиа-запроса. Я использую точку останова 650px, потому что это то, сколько места меню нужно отображать горизонтально в одной строке на основе ширины пунктов меню. Вы можете использовать emsили любую точку останова для вашего дизайна.
Этот код внутри медиа-запроса будет происходить только на экранах с 650 пикселями и более.
Первое, что я сделаю, - установить абсолютное положение подменю, чтобы подменю было выведено из потока документа и больше не занимало высоту на главной панели навигации.
Я нацелен на ulтеги внутри, liтак что это относится только к вложенным меню.
Теперь я хочу скрыть эти подменю. Я могу настроить свойство отображения noneтак, чтобы подменю не отображалось.
Код
.performan_courtesy li ul { position: absolute; display: none; }
Это немного сложно увидеть, но нижняя граница вырисовывается из основной панели навигации, поэтому я хочу отключить ее на больших экранах.
Код
.performan_courtesy a { border-bottom: none; }
Это немного сложно увидеть, но нижняя граница вырисовывается из основной панели навигации, поэтому я хочу отключить ее на больших экранах.
Код
.performan_courtesy li:hover ul { display: block; }
Вы можете увидеть разницу, когда я включаю и выключаю эту строку.
Затем мы хотим отобразить меню, когда мы наводим на родительское меню. Таким образом, мы можем настроить таргетинг на родителя, li а затем на неупорядоченный список.
Подменю отображается при наведении, но это горизонтальное меню. Это может быть то, что вы хотите. Если это так, вы можете остановиться и стилизовать его так, чтобы он был размещен там, где вы хотите, и выглядит лучше.
Но я хочу вертикальную навигацию.
Причина, по которой она горизонтальна, заключается в том, что я использую display: inline-blockвсе liтеги внутри .performan_courtesy. Это должно было сделать основную навигацию горизонтальной.
Если я хочу, чтобы эта поднавигация была вертикальной, мне нужно настроить таргетинг на liсубтемы и отобразить их как block;
Код
.performan_courtesy li ul li { display: block; }
Ширина подменю немного коротка. Это связано с тем, что li имеет ширину 130 пикселей, но цвет фона поступает из ul тега, который не имеет ширины и поэтому имеет значение по умолчанию auto.
Я хочу, чтобы теги подменю имели ту же ширину, что и родительский li. Если я скажу, что width: inheritон наследует ширину своего родителя или элемент списка.
Теперь все складывается красиво.
Мне не нравится, что текст теперь выровнен по левому краю. Помните, я исправил это для маленького экрана.
Если я добавлю этот код в медиа-запрос.
Код
.performan_courtesy ul li { text-align: center; }
Он по-прежнему не похож на то, что элементы центрированы по центру из-за добавления слева, которое я добавил для небольшого экранного меню. Я собираюсь вкратце проигнорировать это и исправить это через мгновение.
Теперь все пункты меню выровнены по центру, включая подменю. Это не очень заметно, когда весь текст имеет одинаковую ширину, но если я изменю одну строку, вы можете ее увидеть.
Я хочу сосредоточить только верхнее меню. Легко настроить таргетинг на дочерние меню, добавив больше селекторов, но я не могу сделать это в верхнем меню. Я мог бы добавить класс, или я могу нацелить прямых потомков класса nav с помощью селектора child, который является.
Посмотрите, как при добавлении дочернего селектора, только верхняя навигация сосредоточена. Ну, центрированный плюс 15px отступов слева.
Я могу снова использовать дочерний селектор, чтобы удалить это дополнение.
Код
.performan_courtesy > ul > li > a { padding-left: 0; }
Когда я использую этот дочерний селектор, он не будет нацелен на теги привязки подменю, потому что они не являются прямыми потомками под .navdiv.
Остаток слева от 15px останется на дочерних меню.
Конечно, стиль вашего меню зависит от вашего фактического содержания и дизайна. Возможно, вам не нравятся стили, которые я использую здесь, и вы должны приспособиться к своим предпочтениям и дизайну.
Основная концепция - скрытое меню, которое отображается при наведении. И эта часть кода прямо здесь. Мы скрываем вложенное меню в нормальном состоянии, и мы показываем его при наведении. Если вы хотите, чтобы он отображался вертикально, вы хотите настроить отображение блоков на элементах меню.
В этом коде важно отметить селектор. Я выбираю ul теги внутри li тегов. Это означает, что он предназначен только для вложенных подменю. Это немного запутывает, глядя на разные теги li и ul, поэтому убедитесь, что вы это поняли. Вы можете добавлять классы в подменю, чтобы сделать вещи более ясными, если хотите.
Поддержка браузера
Это будет работать во всех браузерах, кроме IE8, это связано с тем, что IE8 не распознает медиа-запросы. Поэтому нам нужно поместить весь скрипт из медиа-запроса в IE8 и ниже таблицы стилей. Если вы используете предварительный процессор, вы можете избежать дублирования скрипта, поместив кодировку в отдельный файл и импортируя его как в основную стилистику, так и в IE.
Вывод:
Есть еще кое-что, чтобы сделать это лучше, как упоминалось, маленький монитор не должен отображаться в верхней части страницы, как есть. На телефоне это, вероятно, займет весь монитор. Кроме того, некоторые индикаторы, что есть скрытые меню, были бы полезны здесь, так что пользователь знает, что они могут зависать, чтобы увидеть больше. Некоторые изменения в выпадающих меню были бы хорошими.
