Красивое меню с подкатегориями
Главная цель данного урока — это показать Вам как сделать красивое меню с всплывающими подкатегориями.
С помощью HTML, CSS и jQUery у нас должно получиться прекрасное меню, которое станет украшением любого сайта.
Прежде всего нам необходимо вставить следующий код между тегами <head></head>:
Здесь мы подключаем необходимые скрипты и таблицу стилей. Далее идет черед оформления меню в виде неупорядоченного списка. Ниже Вы можете увидеть структуру нашего тестового меню:
После того, как Вы проделаете это — необходимо будет этот список поместить в несколько слоев (многоточие — это то место, куда необходимо вставлять список с ссылками).
Вот и все! Пользуйтесь, на здоровье! Всем хороших выходных 🙂
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.justjquery.com
Перевел: Максим Шкурупий
Урок создан: 16 Мая 2009
Просмотров: 62341
Правила перепечатки
5 последних уроков рубрики «jQuery»
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Выпадающий список HTML
Привет! В этой статье вас ожидают примеры выпадающих списков и меню на CSS и, кто бы мог подумать, HTML. Насчет использования JavaScript не уверен — попробуем обойтись без него.
Выпадающее меню со списком элементов на HTML
Вебмастера и блоггеры периодически сталкиваются с проблемой создания горизонтального меню, при наведении на родительские элементы которого будут показывать дочерние элементы.
Конечно, подобную проблему можно решить многими способами, но я бы рекомендовал обходиться без дополнительного JS-кода (и jQuery).
Я считаю так — если задачу теоретически можно решить средствами HTML и CSS без применения джейквери, нужно делать это на практике. Если вы не знаете, что писать и куда нажимать — это отдельная проблема и она не должна вас останавливать. Нужно гуглить, учиться, расти, повышать свою квалификацию как верстальщика и фронтенд-разработчика — никогда не знаешь, где эти навыки пригодятся.
Давайте покажу на примере. Помните, недавно была статья о маркированных и нумерованных списках? Сейчас эти знания пригодятся, потому что именно так мы будем делать меню. Пример кода:
Первый шаг к нашему выпадающему списку в меню сделан и вот что получилось. Результат:
Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.
Добавлю немного CSS-магии. Пропишу прямо в html-файле — в <head><style></style></head>. CSS-код:
Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!
Выпадающий при наведении список меню на HTML
И снова мы изобретаем меню на чистом CSS, без использования JS.
Учитывая то, что вы видели в предыдущей части статьи, думаю выглядит многообещающе. А все благодаря чему? Потому что мы умеем присваивать нужным элементам стиль «display:none» и прописывать в CSS чтобы при наведении на него приоритетным было что-то типа «inline-block» взамен «none».
Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=»menu»» основному списку, то есть всему выпадающему меню. Я сделал это для того чтобы обозначить сразу родительские элементы выпадающего списка и сделать их видимыми.
Дальше. В каждый из разделов я вложил дополнительные списки <ul>, которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.
Перейдем к CSS. Код:
<style >
/* Обнуляю отступы и убираю маркеры у списков. */
ul , li {
margin : 0 ;
padding : 0 ;
list-style-type : none ;
}
/* Задаю параметры для основного, родительского блока, меню выпадающего списка. */
# menu {
display : block ;
position : absolute ;
top : 20px ;
left : 20px ;
/* Задаю стили для блоков выпадающего списка. */
# menu > li {
display : inline-block ;
height : 20px ;
/* Считаем координаты относительно исходного места. */
position : relative ;
}
/* Задаю стили, чтобы скрыть дочерние блоки выпадающего списка. Ну и немного украшаю. */
# menu > li > ul {
position : absolute ;
top : 20px ;
left : 10px ;
display : none ;
background-color : bisque ;
border-radius : 5px ;
width : 185px ;
font-size : 14px ;
padding : 10 0 10 10 ;
}
/* Так я делаю прежде скрытую часть видимой — при наведении курсора. */
# menu > li : hover > ul {
display : block ;
}
</style >
Что хочу отметить дополнительно.
«#menu > li» означает, что стили будут применены только к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли подумать некоторые. Внимательнее!
«Position: relative;» — отсчитывает координаты от угла одного из разделов в главном списке, откуда выпадают дочерние элементы.
Последнее: выпадающий список по примеру выше на HTML (см. также особенности HTML) и CSS в оформлении меню сайта это удобная вещь. Для ПК и десктопов. На мобильных устройствах и планшетах нет мышки и курсоров, поэтому такой вариант не подойдет.
А значит для пользователей посещающих сайт с мобильных устройств вам понадобится отдельная реализация меню с выпадающим списком. Вот пожалуй и все в этой части статьи.
Как создать крутое выпадающее меню
Третье готовое, простое и функциональное решение для создания красивого горизонтального меню с выпадающим списком разнообразных элементов.
Концепция, как и прежде, до глубины души простая. Мы делаем горизонтальную иерархию разделов, используя ненумерованный список без маркеров, и затем оборачиваем в красивые стили.
Стили помогают нам скрыть элементы и сделать их выпадающими при наведении курсора.
Хотел немного его прокомментировать, да передумал еще раз взглянув на код — он чистый, ясный, красивый. Вроде все должно быть понятно.
Теперь давайте вооружимся магией стилей — при помощи CSS я трансформирую все серии вложенных списков <ul> в крутое и удобное в использовании выпадающее меню с несколькими элементами.
Перейдем к CSS-коду. Что-то мне стало скучно туда-сюда бегать, поэтому я хорошенько его прокомментировал прямо в стилях. Да и вам удобнее будет, если будете пользоваться этим решением.
CSS-код, помещенный в <head> страницы:
Готово! Финальный результат:
БОНУС — суперкрутой выпадающий список на ХТМЛ и ЦСС
Четвертый и последний на сегодня. Я устал, вы устали — думаю четыре выпадающих меню будет достаточно для того, чтобы выбрать наиболее оптимальный вариант для себя.
Тоже делаем список со ссылками, отображающимися при наведении. Никаких анимаций, модных выездов, мигания — только чистый кроссбраузерный код, простой и эффективный. Вместо «display:none;» использую «left: -9999px;». Ну там сами увидите.
< ul class = "ddropdownn" >
< li class = "ddropdownn-top" >
< a class = "ddropdownn-top" href = "/" > Красноярский край < / a >
< ul class = "ddropdownn-inside" >
< li >< a href = "/" > Минусинск < / a >< / li >
< li >< a href = "/" > Ачинск < / a >< / li >
< li >< a href = "/" > Красноярск < / a >< / li >
< li >< a href = "/" > Железногорск < / a >< / li >
< li >< a href = "/" > Канск < / a >< / li >
< li >< a href = "/" > Норильск < / a >< / li >
< / ul >
< / li >
< li class = "ddropdownn-top" >
< a class = "ddropdownn-top" href = "/" > Свердловская область < / a >
< ul class = "ddropdownn-inside" >
< li >< a href = "/" > Екатеринбург < / a >< / li >
< li >< a href = "/" > Верхняя Пышма < / a >< / li >
< li >< a href = "/" > Нижний Тагил < / a >< / li >
< li >< a href = "/" > Первоуральск < / a >< / li >
< li >< a href = "/" > Асбест < / a >< / li >
< li >< a href = "/" > Каменск-Уральский < / a >< / li >
< / ul >
< / li >
< / ul >
CSS-код, который я поместил в <head>:
Результат (без наведения курсора):
Результат (при наведении курсора):
Итоги: скачать готовый html+css код выпадающего списка меню
Как вы могли убедиться на вышеприведенных примерах, выпадающий список без особых проблем делается на обычном HTML.
Надеюсь один из списков украсит меню вашего проекта или хотя бы будет использован в качестве основы.
Я подготовил для вас архив, который вы можете скачать. Там все 4 выпадающих списка — html код и css стили прямо в файле. Там думаю разберетесь.
Древовидные списки разных вариаций
Древовидный вид HTML списков является лучшим вариантом визуального обзора и изучения их иерархической структуры. Рассмотрим несколько преобразований обычного HTML списка в более наглядное древовидное состояние при помощи магии CSS стилей.
1. Пример обычного HTML списка
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
HTML разметка списка
2. Пример HTML списка с соединительными линиями
Присвоим тегу <ul> класс treeline для создания соединительных линий каждого раздела списка.
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
HTML разметка списка с соединительными линиями
CSS стили списка с соединительными линиями
3. Пример раскрывающегося HTML списка
-
Главное меню
- Компоненты
- Плагины
- Модули
- opacity: 0; — opacity задает прозрачность элемента. Если 0, то элемент полностью прозрачный, если 1, то элемент полностью непрозрачный. Можно задавать частичную прозрачность, например, 0.5.
- visibility: hidden; — visibility переводится как «видимость», и, собственно, задает, видимым будет элемент или нет. Значение hidden (переводится «спрятан») скрывает элемент;
- transition: all .3s; — задает ту самую плавность (transition переводится как «переход»). Значение all означает, что переход задается вообще для всех свойств данного элемента, в том числе для opacity и visibility. А .3s означает, что переход будет осуществляться в течение 0.3 секунды.
HTML разметка раскрывающегося списка
К предыдущей разметке добавляем <div >+</div> для реализации функции раскрытия элементов древовидного списка.
CSS стили раскрывающегося списка
К CSS из предыдущего примера необходимо дописать следующие стили:
Скрипт, реализующий функцию раскрывающегося списка
Помимо HTML и CSS, данный способ оформления древовидных списков требует использование JS:
Данный JS код можно вставить в конец материала, пройдя в режим просмотра исходного кода. Учтите, что код скрипта может обрезаться редактором и, соответственно, не работать. В этом случае пройдите в настройки редактора и разрешите использование тега <script> .
Меню каталога, основное меню, баннер на главной странице
Новые участки кода index.html находятся между <!— New —><!— End —>, а в style.css — между /*New*/ /*END*/. Можете уже сейчас вставить этот код в соответствующие файлы, сохранить и открыть index.html в браузере. Таким образом, увидите какой результат будет по итогу урока.
index.html:
style.css:
Начало урока. Разбор файла index.html
Не бойтесь, что файл стал гораздо больше, многие элементы здесь просто повторяются. Сперва я хотел показать код без повторяющихся блоков, но потом всё же решил добавить сразу весь код. Сейчас вы увидите, что на самом деле здесь всё очень просто.
Сперва кратко опишу суть работы меню каталога (далее для краткости буду писать просто «каталог»). Итак, в каталоге будут главные категории, и у некоторых категорий подкатегории. Например, главная категория Desktops и ее подкатегории PC и Mac. В меню каталога блок с подкатегориями будет скрыт, а открываться будет при наведении мыши на основную категорию. Посмотрите, как это сейчас работает на imdiz.ru/store/ или посмотрите короткое видео:
Как обычно, имена классов задаются исходя из назначения блока: menu , catalog , catalog__header и т.д.
Структура меню каталога. Теги ul, li
В menu сразу создается container , чтобы ограничить ширину содержимого. Здесь будет размещаться не только меню каталога, но и навигация и номер телефона. Список категорий будет размещен в блоке catalog , в котором есть вспомогательный блок catalog__wrapper (wrapper переводится «обертка»).
Сам список категорий строится с помощью тега <ul></ul> . Это тег для любых списков, в том числе маркированных, как в Microsoft Word. Каждый элемент списка помещается в тег <li></li> . Структура тега ul выглядит так:
Сама категория, как вы понимаете, помещается в ссылку <a></a> , ведь категории должны будут вести на разные страницы сайта. Ну, а иконка категории верстается обычным тегом <img> .
У некоторых категорий есть подкатегории, они помещены в блок catalog__subcatalog (subcatalog переводится как «подкаталог»).
Дальше уже вся структура в блоке catalog повторяется, меняются только названия категорий.
Структура навигации на сайте. Тег nav. Кликабельный номер телефона на сайте
С навигацией дела обстоят еще гораздо проще. Для навигации существует специальный тег <nav></nav> . А в <nav> находятся просто ссылки <a> .
После навигации следует номер телефона. Особенность его в том, что он кликабельный, то есть на него можно нажать, и произойдет вызов. Это делается просто — номер телефона помещается в ссылку <a> , а атрибут href пишется так — href=»tel:+99999999999″ . Благодаря tel в атрибуте происходит вызов по клику.
Верстка баннера на сайте
Весь баннер помещен в <div > . В верстке баннера ничего примечательного нет, здесь все теги вам уже знакомы. Я назвал класс slider , потому что в будущем это будет листаемый слайдер, как на imdiz.ru/store/. Сейчас же пока это не слайдер, а статичный баннер.
Здесь, в верстке баннера, сложности могут вызвать названия классов. Но всё становится понятно, если просто их перевести. Единственное, в названиях класса встречается desc — это сокращение от description, что переводится, как «описание». То есть это описание для баннера. А carousel переводится, как «карусель». Каруселью на сайте называют слайдер, который можно листать вправо и влево.
Вот так, достаточно быстро и легко, в данном уроке разобрано всё новое в index.html. Можно переходить к style.css.
Разбор файла style.css
Подключение шрифта. Селектор звездочка в CSS. Свойство box-sizing
В style.css уже в самом начале находятся очень интересные нововведения. Сперва подключается нужный шрифт. По умолчанию, используются шрифты, которые предоставляет интернет-браузер, то есть вы не контролируете, как будет выглядеть шрифт вашего сайта в разных браузерах. Желательно же подключить определенный шрифт, который вам нравится. В Webe очень распространен шрифт Roboto, его я и подключил.
Шрифт подключается через директиву @font-face . Название шрифта пишется в свойстве font-family (переводится как «семейство шрифтов»). Сам шрифт должен где-то находиться, то есть его можно скачать и поместить на сайте. А при подключении шрифта указать путь к нему в свойстве src . Как вы видите, сейчас шрифт подключается с сайта imdiz.ru.
Много шрифтов для бесплатного скачивания находится на fonts.google.com. На этом сайте шрифты именно для веб-сайтов. Это важно, потому что, если шрифт не предназначен для веба, то он может по разному отображаться в разных браузерах и на смартфонах.
Чтобы скачать шрифт прямо на ваш сайт, обычно создается папка fonts, в нее скачивается нужный шрифт, и в @font-face указывается путь к нему. Например так — src: url(../fonts/Roboto.ttf);.
Далее, после @font-face стоит еще неизвестный вам селектор в виде * . Селектор в виде звездочки означает, что его CSS-свойства будут применятся абсолютно ко всем HTML-элементам на странице: ко всем блокам, ко всем классам, ко всем картинкам, ко всем ссылкам и т.д. Для него я прописал только 1 свойство box-sizing: border-box; . Свойство box-sizing нужно, если вы хотите изменить алгоритм расчета ширины и высоты элемента. Дословно box-sizing можно перевести, как «расчет размеров коробки».
По умолчанию, ширина блока складывается из ширины (width), внутренних отступов (padding), внешних отступов (margin) и границы (border): width + padding + margin + border. Аналогично высчитывается высота блока.
box-sizing: border-box; делает так, что в width и height будут включены значения padding и border. То есть, если вы укажете width: 100px;, то ширина будет ровно 100 пикселей. А если свойство убрать, то к ширине будут прибавляться внутренние отступы и граница, а элемент на сайте будет шире, чем 100 пикселей.
Свойство font-family в CSS
Следующий новый блок находится в html, body . С font-size вы уже знакомы. А вот font-family: Roboto; применяет в данном случае для html и body шрифт Roboto. В директиве @font-face свойство font-family только задавало название для подключаемого шрифта. Можно было назвать шрифт, например, Rob. Тогда для html и body нужно было бы писать так — font-family: Rob;.
После того, как вы подключили и назвали шрифт в директиве @font-face , его можно применять к любому элементу. Когда я применил его для html, я задал шрифт Roboto для всего сайта. Если вы захотите, например, для ссылок задать другой шрифт, то его нужно будет скачать, подключить в @font-face и применить к ссылкам.
Абсолютное позиционирование в CSS
Перехожу к третьему новому участку кода в CSS.
Обратите внимание на класс .menu__container . Для него указано свойство position: relative; . И сразу обратите внимание ниже на класс .catalog , для него указано свойство position: absolute; .
.catalog абсолютно позиционирован. Позиционирование в HTML — это очень важный и интересный момент. Это означает, что он как бы «не замечает» соседние блоки, и может даже «залазить» на них. Ведет он себя так только в пределах родительского элемента, у которого position либо relative, либо absolute, либо fixed (кстати, по умолчанию, для всех элементов стоит значение static). В данном случае у .menu__container указано значение relative , поэтому .catalog абсолютно позиционирован относительно .menu__container . Если у .menu__container убрать position: relative; , то .catalog поднимется к самому верху браузера, потому что будет искать среди родительских элементов первый встретившийся со значением либо relative , либо absolute , либо fixed . А таких нет, поэтому для .catalog как бы точкой отсчета станет браузер. Посмотрите картинку-схему для абсолютно позиционированных блоков:
Далее, для того, чтобы .catalog выровнялся правильно, я задал top:0; . Для того, чтобы выровнять абсолютно позиционированный элемент относительно родительского блока используются свойства top, bottom, left, right. В нашем случае top:0; нужен из-за того, что у .container указан align-items: center; и .catalog выравнивается по центру по вертикали без top:0; . Попробуйте убрать top:0; .
Равномерное распределение в Flex
Далее в .catalog__header встречается новое значение — justify-content: space-between; . Благодаря space-between элементы внутри flex располагаются равномерно (в данном случае по горизонтали), а первый и последний элемент прижимаются к краям flex-родителя. Это я сделал для того, чтобы на сайте слово «Categories» и иконку расположить равномерно.
Третье измерение в CSS (z-index). Порядок элементов по оси z
Для .catalog__list задано интересное свойство z-index: 2; . Это позиция элемента по оси z (как бы в глубину экрана). То есть элементы могут накладываться друг на друга, и одни элементы будут выше (как бы ближе к вам), а другие будут ниже. Посмотрите картинку:
Если у .catalog__list убрать здесь z-index, то баннер окажется выше, чем окно с подкатегориями:
Чем больше z-index, тем выше элемент (ближе к вам).
Почему z-index работает, если он задан не для подкатегорий, а для всего списка категорий? Дело в том, что z-index наследуется, то есть он равен 2 и для списка категорий, и для подкатегорий. Подкатегории его наследуют, потому в файле index.html блок catalog__subcatalog находится внутри блока catalog__list .
Чтобы z-index работал, необходимо, чтобы этот элемент был позиционированным, то есть должно быть явно задано свойство position (relative, absolute или fixed). Напоминаю, что по умолчанию у position значение static.
Если z-index не ставить, то по оси z элементы располагаются по порядку в html-файле — чем ниже элемент в index.html, тем выше он будет (ближе к вам).
Приоритетность селекторов
Обратите внимание на код:
Здесь заданы стили для списка категорий. Просто .catalog__list — селектор класса, а ul — селектор тега. Как вы понимаете, стили тега ul будут распространяться вообще на все теги ul на сайте.
На примере данного кода я расскажу про приоритетность селекторов. Разные селекторы имеют разную силу.
Во-первых, если селекторы одинаковые и они противоречат друг другу, то «сильнее» будет нижний селектор, потому что браузер «читает» CSS-код сверху вниз. Например, если для <ul > добавить еще один класс <ul >, то посмотрите на код ниже:
Здесь в итоге отступ будет 10 пикселей.
Во-вторых, имеет значение сам селектор. Например, селектор класса сильнее селектора тега. Посмотрите на код:
Здесь в итоге отступ будет 0.
В-третьих, селектор может быть составным, например:
Здесь стили заданы для ul, который находится внутри .catalog. Такой селектор сильнее, чем просто селектор класса.
В-четвертых, самая мощная конструкция имеет следующий вид «padding: 0 !important;». То есть после значения пишется !important, что переводится как «важный».
Как скрыть элемент на сайте. Свойства opacity и visibility в CSS
Как вы видите подкатегории просто так не видны. Чтобы их увидеть, нужно навести на категорию.
Самый простой способ спрятать элемент или блок на сайте, это задать ему display: none;. Но тогда не получится ему просто так сделать плавность появления. Он будет появляться резко, неэстетично, неэффектно.
Для придания плавности появления элемент нужно прятать особым образом, а именно прописать в CSS такие свойства, как в .catalog__subcatalog :
Почему не сделать элемент просто прозрачным и всё? Если сделать только прозрачным, то элемент всё-равно будет занимать свое место на сайте, и сдвигать другие элементы. Поэтому его еще нужно скрыть свойством visibility.
А теперь я опишу, как сделать, чтобы блок с подкатегориями появился при наведении мыши.
Псевдокласс :hover в CSS
Интересную конструкцию представляет .catalog__item:hover .catalog__subcatalog . Здесь :hover (переводится как «ожидание») используется для того, чтобы при наведении на .catalog__item для класс .catalog__subcatalog применились следующие стили:
То есть блок с подкатегориями становится непрозрачным, видимым, и смещается немного влево. Смещается он благодаря тому, что изначально для .catalog__subcatalog задано left: 280px;, а при наведения уже 260px, и получается эффект смещения влево.
Здесь для того, чтобы :hover работал необходимо, чтобы .catalog__subcatalog находился в .catalog__item (смотрите файл index.html).
Напомню, что плавность появления осуществляется благодаря свойству transition.
Процентные значения в CSS
Обратите еще внимание на .catalog__subcatalog . Здесь height: 100%; .
В CSS для некоторых свойств помимо пикселей можно задавать проценты. Естественно, при этом, значение будет вычисляться относительно какого-то другого HTML-элемента.
В данном случае высота подкаталога вычисляется относительно высоты .catalog__list , потому что у подкаталога абсолютная позиция (absolute), а у .catalog__list относительная (relative). Помните про абсолютное позиционирование элементов?
Если никакие позиции не заданы, то высота дочернего элемента вычисляется относительно высоты непосредственного родительского элемента в index.html. Например, для catalog__subcatalog непосредственный родительский элемент catalog__item .
Эффекты наведения на ссылку в CSS
С разбором стилей для меню каталога закончено. Далее идут стили для навигации. В них все свойства для вас уже знакомы. Единственное, на что обращу внимание, это на класс для ссылки .menu__nav-link . В нем есть уже известное вам свойство transition. Оно нужно для плавного изменения цветы ссылки при наведении.
А теперь спуститесь в самый низ файла style.css к участку кода:
Здесь задан цвет шрифта вообще для всех ссылок на сайте. Благодаря свойству text-decoration: none; у всех ссылок убирается подчеркивание, которое есть по умолчанию.
Благодаря псевдоклассу :hover происходит изменение цвета ссылки при наведении на нее курсора мыши.
Изображение на задний фон в CSS. Заглавные буквы через CSS
Стили для номера телефона я разбирать не буду, все CSS-свойства вам уже знакомы.
Перехожу к разбору баннера.
У баннера есть темное изображение на всю ширину браузера. Сделано оно через CSS свойством background. Посмотрите на класс .slider . В нем есть интересная строка кода — background: url(https://imdiz.ru/files/store/img/banner/bg-slider.png) no-repeat; . Именно здесь задается фоновое изображение через url. Значение no-repeat задает то, чтобы изображение не повторялось (repeat переводится, как «повтор»). Если не прописать no-repeat, то на очень большом экране фоновое изображение будет повторятся слева направо.
Следующее интересное свойство — это text-transform: uppercase; в классе .slider__carousel_button . Таким образом задаются большие буквы для текста на кнопке баннера.
На этом данный урок закончен. Посмотрите в браузере на ваш сайт. Порадуйтесь результату. Всего за несколько уроков вы научились очень многому. Еще немного обучения и вы станете профессионалом! Продолжайте!
Конец урока. В данном уроке вы узнали:
<ul></ul> — тег для построения списка.
<nav></nav> — тег для навигации.
<a href=»tel:+99999999999″></a> — кликабельный номер телефона.
@font-face — подключение шрифта.
box-sizing — CSS-свойство для изменения расчета высоты и ширины элемента.
position — CSS-свойство для позиционирования элемента. Возможные значения: absolute, relative, static и fixed.
z-index — CSS-свойство для позиционирования по оси z.
Разные селекторы могут иметь разный приоритет.
:hover — псевдокласс в CSS, который срабатывает при наведении на элемент.
- База знаний
- База знаний