Создание каталога товаров в формате HTML5
Наиболее совместимый формат со всеми устройствами, экранами, браузерами.
Публикация, отсылка по email
Вы можете сделать HTML как всех товаров, так и только отмеченных в списке.
Не требует специальных шаблонов, вы можете использовать те же, которые уже используете для печати или создания PDF.
Есть возможность сделать HTML каталог одним файлом, легко переслать и разместить, а можно постранично, с кнопками навигации.
Во втором случае вы можете отослать по запросу избранные листы каталога.
При онлайн размещении, хорошо индексируется поисковыми системами.
Для выбора/изменения шаблона каталога выберите пункт «Изменить шаблон»
Применение: публикация на сайте, отсылка по email клиенту. Использование как альтернатива PDF каталогу. HTML каталог предлагается к использованию практически во всех областях бизнеса независимо он наличия сайта или интернет-магазина.
MyBusinessCatalog
(function(i,s,o,g,r,a,m)
We use cookies to improve the site and its user experience. By continuing to use the site, you consent to the use of cookies. You can always disable cookies in your browser settings.
Меню для каталога
Очень интересует реализация приведённого ниже меню-каталога на bootstrap 4. Может быть кто-то видел такое и есть примеры/готовое решение? Видел такое меню-каталог на многих сайтах. Обычно оно в раскрытом состоянии и располагается слева в виде сайтбара. Но его можно свернуть. В карточке товара оно обычно чвёрнуто и только в шапке сайта слева надпись-кнопка — каталог, которая раскрывается в виде меню.
Отслеживать
задан 15 фев 2019 в 14:13
497 2 2 серебряных знака 13 13 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Вот примерно такой документ у меня получился, поискав инфу в Нете.
Multylevel menu #menu2 < margin-left: 50px; >#menu3 Item 1 Item 2 Item 2.1 Item 2.2 Item 2.2.1 Item 2.2.2 В прописан сам Bootstrap 4.
Меню первого уровня
Дальше идёт само меню. Item 2 является .submenu, .collapse, .dropdown-toggler; data-toggle=»collpase», даёт кнопке функционал. В data-target — прописан ID блока который мы собираемся открыть. Все эти атрибуты определяют наше подменю.
Меню второго уровня
Дальше идёт уже содержание самого подменю, указываем как обычное меню — .dropdown-menu и также .dropdown-collapse для того, чтобы оно скрывалось-раскрывалось.
Скрипт
И наконец строка jQuery, которая не даёт целому меню не закрыться при каких-то действиях внутри всего dropmenu. Скрипт обрабатывает класс .noclose, который мы записали в блоке, содержащий целое меню.
Стили
В можно сделать сдвиг блока меню, создав визуализацию дерева.
Заключение
Единственный недостаток — как-то долго открывается подменю. Попробуйте сами покрутить, поставить может что-то. Надеюсь у Вас получиться)) сам попробую что-то подправить, найду, обязательно оповещу)).
Верстка интернет-магазина: список товаров
Требования к верстке каталогов интернет-магазинов имеют свойство повторяться из проекта в проект. Поэтому у меня выработался набор стандартных приемов, которыми я хочу поделиться в этой статье.
Некоторые приемы уже были рассмотрены в различных статьях. Однако у меня возникло желание объединить их и проиллюстрировать отдельными демо. Надеюсь, в таком виде наработки окажутся полезны верстальщикам, которым часто приходится работать над интернет-магазинами.
В качестве примера мы будем верстать список товаров для интернет-магазина комнатных растений. Демо готового каталога можно посмотреть по ссылке. В результате должен получиться список растений с фото, описаниями и всплывающими кнопками. Кроме того, вид списка можно будет переключать: товары будут выглядеть либо как плитка, либо как таблица.
Адаптивная сетка
Итак, начнем с создания адаптивных плиток — будущих карточек товаров. У нас будет 8 комнатных растений:
Оберткой для товаров послужат блоки, занимающие 100% ширины родителя на мобильных устройствах.
.product-wrapper
Теперь используем медиа-запросы, чтобы разместить по две, три и четыре плитки в ряд при больших разрешениях монитора.
@media only screen and (min-width: 450px) < .product-wrapper < width: 50%; >> @media only screen and (min-width: 768px) < .product-wrapper < width: 33.333%; >> @media only screen and (min-width: 1000px) < .product-wrapper < width: 25%; >> И зададим стили карточек товаров.
.product
Из-за того, что карточки имеют margin-right равный 20px , весь список имеет нежелательный отступ справа.
Исправим это с помощью отрицательного значения margin-right у родителя.
.products
Теперь все в порядке. Посмотреть на получившуюся сетку можно на страничке демо. Для наглядности блокам в демо задана фиксированная высота.
Фото товаров
Следующим интересным моментом является верстка блоков с фотографиями растений. Разметка в данном случае будет такой:
Сделаем родителя тега img квадратом с помощью свойства padding-bottom со значением 100%. Вот все стили для данного блока.
.product-photo
В указанном блоке расположим картинку таким образом, чтобы при любых размерах она не выходила за пределы родителя, и отцентрируем ее горизонтально и вертикально.
.product-photo img
Осталось немного увеличивать фото при наведении.
.product:hover .product-photo img
Как все это работает можно посмотреть на примере демо.
Описание товара
Нам нужно, во-первых, задать описанию товара высоту в четыре строки, а во-вторых, сделать конец последней строки слегка размытым.
Первую задачу можно решить, задав высоту параграфа с описанием, равную четырем line-heigth .
.product p
А эффекта размытия последних букв четвертой строки мы добьемся с помощью псевдоэлемента :after с линейным градиентом в качестве фона.
.product p:after
Перечеркнутые цены
Чтобы перечеркнуть цену линией отличной по цвету от текста, задаем блоку с ценой значение color равное #ff3535 и text-decoration — line-through . При этом устанавливаем для вложенных элементов серый цвет текста.
.product-price-old b, .product-price-old small
Всплывающие кнопки
Что касается кнопки «Быстрый просмотр», ее реализация сравнительно проста. Кнопка абсолютно позиционирована относительно блока с классом .product-photo , скрыта с помощью opacity: 0 и немного сдвинута вниз за счет transition: translateY(2em) . При наведении курсора на карточку товара стили кнопки меняются следующим образом.
.product:hover .product-preview
Несколько сложнее дело обстоит с кнопками «В корзину» и «Купить в 1 клик». Здесь внешний контейнер .product-buttons-wrap абсолютно позиционирован в блоке .product и равен родителю по ширине и высоте.
.product-buttons-wrap
Далее мы стилизуем псевдоэлемент .product-buttons-wrap:before таким образом, чтобы он вытеснял любой контент блока вниз, под нижнюю границу, блока-родителя.
.product-buttons-wrap:before
Теперь можно добавить собственно контент — кнопки, размещенные в блоке .buttons .
.buttons
Благодаря правилу float: left у псевдоэлемента .product-buttons-wrap:before , кнопки расположены ниже основного контента, и блок .buttons занимает всю площадь карточки.
Чтобы лучше разобраться с кнопками, можно посмотреть это демо.
Переключение вида карточек товаров
Для переключения между плиткой и табличным видом каталога мы создаем две кнопки.
По клику на кнопки у списка товаров удаляется и добавляется класс .table-layout .
$productList.toggleClass('table-layout'); Таким образом, прописав стили для карточек-дочерних элементов блока ul.table-layout , мы можем «превратить» список в таблицу только с помощью CSS, без перезагрузки страницы. Для этого задается ширина карточек равная 100%. А вложенные блоки теперь займут только часть ширины карточки, например:
.table-layout .product-main
Далее абсолютно позиционированные элементы занимают свое «естественное» положение. Например, так происходит с кнопками.
.table-layout .product-buttons-wrap
Это был последний момент, которым хотелось с вами поделиться. С праздниками и всего доброго.
Меню каталога, основное меню, баннер на главной странице
Новые участки кода index.html находятся между , а в style.css — между /*New*/ /*END*/. Можете уже сейчас вставить этот код в соответствующие файлы, сохранить и открыть index.html в браузере. Таким образом, увидите какой результат будет по итогу урока.
index.html:
Store
Desktops
PC (0)Mac (1)Laptops & Notebooks
Macs (0)Windows (1)Components
Mice and Trackballs (0)Monitors (1)Printers (0)Scanners (0)Web Cameras (0)Tablets
Software
Phones & PDAs
Cameras
MP3 Players
Belkinon
New powerfull
Headphones
More
style.css:
/* NEW */ @font-face < font-family: Roboto; font-display:swap; src: url(https://imdiz.ru/files/store/fonts/Roboto.ttf); >* < box-sizing: border-box; >/* END */ html, body < margin: 0; /* NEW */ font-size: 16px; font-family: Roboto; /* END */ >.header < background: #cb2d41; padding: 35px 0; >.container < width: 1140px; display: flex; align-items: center; padding-left: 15px; padding-right: 15px; margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; >.header-right < display: flex; align-items: center; margin-left: auto; >.search-form < display: flex; align-items: center; margin: 0 auto; width: 270px; height: 50px; border: 1px solid rgba(255,255,255,.2); padding-left: 5px; padding-right: 10px; >input < outline: 0; border: none; background: none; >.search-input < color: #fff; width: 90%; height: 100%; font-size: 12px; >::-webkit-input-placeholder < color: #fff >:-moz-placeholder < color: #fff >::-moz-placeholder < color: #fff >:-ms-input-placeholder < color: #fff >button < outline: 0; border: none; background: none; cursor: pointer; >.search-i < color: #fff; >.cart-informer < color: #fff; padding-top: 0; padding-left: 20px; >.cart-informer__button < margin-left: auto; margin-right: auto; display: flex; align-items: center; >.cart-informer__count < color: #111; font-size: 10px; background-color: #fff; width: 23px; height: 23px; margin-right: -4px; margin-left: 4px; display: flex; align-items: center; justify-content: center; >.cart-informer__icon < width: 45px; height: 45px; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; >.cart-informer__icon-i < color: #fff; >.cart-informer__i, .cart-informer__value < color: #fff; font-weight: 700; font-size: 12px; padding-left: 10px; >.cart-informer__i < font-size: 11px; margin-top: -2px; >/* NEW */ .menu < height: 60px; >.menu__container < position: relative; >.catalog < position: absolute; width: 260px; top: 0; background-color: #fff; >.catalog__header < height: 60px; font-weight: bold; padding-left: 20px; padding-right: 20px; border: 1px solid #e0e0e0; border-bottom: none; border-top: none; justify-content: space-between; align-items: center; display: flex; >.catalog__header-icon < font-size: 21px; >.catalog__list < position: relative; z-index: 2; > ul < padding: 0; margin: 0; >li < list-style: none; margin: 0; padding: 0; >.catalog__link < height: 60px; font-size: 14px; padding-left: 20px; padding-right: 20px; border: 1px solid #e0e0e0; border-bottom: none; align-items: center; display: flex; >.catalog__link-img < margin-right: 10px; margin-top: -3px; >.catalog__subcatalog < width: 867px; display: flex; flex-direction: column; flex-wrap: wrap; background-color: #fff; position: absolute; opacity: 0; visibility: hidden; left: 280px; top: 0; height: 100%; padding: 20px; transition: all .3s; >.catalog__item:hover .catalog__subcatalog < opacity: 1; visibility: visible; left: 260px; >.catalog__subcatalog-link < font-size: 14px; color: #111; padding-top: 5px; padding-bottom: 5px; >.menu__nav < padding-left: 290px; height: 100%; display: flex; align-items: center; >.menu__nav-link < font-weight: bold; font-size: 14px; padding-right: 20px; transition: all .3s; >.menu__phone < display: flex; align-items: center; justify-content: flex-end; color: #cb2d41; font-size: 14px; font-weight: bold; margin-left: auto; border-left: 1px solid #e0e0e0; padding-left: 40px; height: 60px; >.menu__phone-icon < font-size: 18px; >.menu__phone-span < padding-left: 10px; padding-right: 5px; color: #111; transition: all .3s; >.menu__phone:hover .menu__phone-span < color: #cb2d41; >.slider < background: url(https://imdiz.ru/files/store/img/banner/bg-slider.png) no-repeat; height: 541px; >.slider__wrapper < width: 600px; margin-left: 400px; height: 541px; >.slider__carousel_desc < position: absolute; top: 110px; color: #fff; >.slider__carousel_desc-title < font-size: 90px; >.slider__carousel_desc-text < font-size: 35px; padding-top: 5px; >.slider__carousel_desc-text < font-size: 35px; padding-top: 5px; >.slider__carousel_button < color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; background-color: #cb2d41; width: 160px; height: 50px; margin-top: 20px; transition: all .3s; display: flex; justify-content: center; align-items: center; >.slider__carousel_button:hover < background-color: #111; color: #fff; >.slider__img < display: block; width: 100%; >.slider__carousel < width: 100%; position: relative; z-index: 1; >p < margin: 0; padding: 0; >img < border-style: none; >a < color: #111; text-decoration: none; >a:hover < color: #cb2d41; >/* END */
Начало урока. Разбор файла index.html
Не бойтесь, что файл стал гораздо больше, многие элементы здесь просто повторяются. Сперва я хотел показать код без повторяющихся блоков, но потом всё же решил добавить сразу весь код. Сейчас вы увидите, что на самом деле здесь всё очень просто.
Миллиардеры рекомендуют читать, чтобы добиться успеха. Хотите стать успешными и богатыми? Прочтите книги, которые советуют Маск, Гейтс, Цукерберг, Безос и другие:
Сперва кратко опишу суть работы меню каталога (далее для краткости буду писать просто «каталог»). Итак, в каталоге будут главные категории, и у некоторых категорий подкатегории. Например, главная категория Desktops и ее подкатегории PC и Mac. В меню каталога блок с подкатегориями будет скрыт, а открываться будет при наведении мыши на основную категорию. Посмотрите, как это сейчас работает на imdiz.ru/store/ или посмотрите короткое видео:
Как обычно, имена классов задаются исходя из назначения блока: menu , catalog , catalog__header и т.д.
Структура меню каталога. Теги ul, li
В menu сразу создается container , чтобы ограничить ширину содержимого. Здесь будет размещаться не только меню каталога, но и навигация и номер телефона. Список категорий будет размещен в блоке catalog , в котором есть вспомогательный блок catalog__wrapper (wrapper переводится «обертка»).
Сам список категорий строится с помощью тега . Это тег для любых списков, в том числе маркированных, как в Microsoft Word. Каждый элемент списка помещается в тег . Структура тега ul выглядит так:
Сама категория, как вы понимаете, помещается в ссылку , ведь категории должны будут вести на разные страницы сайта. Ну, а иконка категории верстается обычным тегом .
У некоторых категорий есть подкатегории, они помещены в блок catalog__subcatalog (subcatalog переводится как «подкаталог»).
Дальше уже вся структура в блоке catalog повторяется, меняются только названия категорий.
Структура навигации на сайте. Тег nav. Кликабельный номер телефона на сайте
С навигацией дела обстоят еще гораздо проще. Для навигации существует специальный тег . А в находятся просто ссылки .
После навигации следует номер телефона. Особенность его в том, что он кликабельный, то есть на него можно нажать, и произойдет вызов. Это делается просто — номер телефона помещается в ссылку , а атрибут href пишется так — href=»tel:+99999999999″ . Благодаря tel в атрибуте происходит вызов по клику.
Верстка баннера на сайте
Весь баннер помещен в . В верстке баннера ничего примечательного нет, здесь все теги вам уже знакомы. Я назвал класс 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 < position: relative; >ul
Здесь заданы стили для списка категорий. Просто .catalog__list — селектор класса, а ul — селектор тега. Как вы понимаете, стили тега ul будут распространяться вообще на все теги ul на сайте.
На примере данного кода я расскажу про приоритетность селекторов. Разные селекторы имеют разную силу.
Во-первых, если селекторы одинаковые и они противоречат друг другу, то «сильнее» будет нижний селектор, потому что браузер «читает» CSS-код сверху вниз. Например, если для добавить еще один класс , то посмотрите на код ниже:
.catalog__list < padding: 0; >.catalog__list-2 < padding: 10px; /* Сильнее будет это значение */ >
Здесь в итоге отступ будет 10 пикселей.
Во-вторых, имеет значение сам селектор. Например, селектор класса сильнее селектора тега. Посмотрите на код:
.catalog__list < padding: 0; >ul
Здесь в итоге отступ будет 0.
В-третьих, селектор может быть составным, например:
.catalog ul
Здесь стили заданы для ul, который находится внутри .catalog. Такой селектор сильнее, чем просто селектор класса.
В-четвертых, самая мощная конструкция имеет следующий вид «padding: 0 !important;». То есть после значения пишется !important, что переводится как «важный».
Как скрыть элемент на сайте. Свойства opacity и visibility в CSS
Как вы видите подкатегории просто так не видны. Чтобы их увидеть, нужно навести на категорию.
Самый простой способ спрятать элемент или блок на сайте, это задать ему display: none;. Но тогда не получится ему просто так сделать плавность появления. Он будет появляться резко, неэстетично, неэффектно.
Для придания плавности появления элемент нужно прятать особым образом, а именно прописать в CSS такие свойства, как в .catalog__subcatalog :
- opacity: 0; — opacity задает прозрачность элемента. Если 0, то элемент полностью прозрачный, если 1, то элемент полностью непрозрачный. Можно задавать частичную прозрачность, например, 0.5.
- visibility: hidden; — visibility переводится как «видимость», и, собственно, задает, видимым будет элемент или нет. Значение hidden (переводится «спрятан») скрывает элемент;
- transition: all .3s; — задает ту самую плавность (transition переводится как «переход»). Значение all означает, что переход задается вообще для всех свойств данного элемента, в том числе для opacity и visibility. А .3s означает, что переход будет осуществляться в течение 0.3 секунды.
Почему не сделать элемент просто прозрачным и всё? Если сделать только прозрачным, то элемент всё-равно будет занимать свое место на сайте, и сдвигать другие элементы. Поэтому его еще нужно скрыть свойством visibility.
А теперь я опишу, как сделать, чтобы блок с подкатегориями появился при наведении мыши.
Псевдокласс :hover в CSS
Интересную конструкцию представляет .catalog__item:hover .catalog__subcatalog . Здесь :hover (переводится как «ожидание») используется для того, чтобы при наведении на .catalog__item для класс .catalog__subcatalog применились следующие стили:
.catalog__item:hover .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 к участку кода:
a < color: #111; text-decoration: none; >a:hover
Здесь задан цвет шрифта вообще для всех ссылок на сайте. Благодаря свойству 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 . Таким образом задаются большие буквы для текста на кнопке баннера.
На этом данный урок закончен. Посмотрите в браузере на ваш сайт. Порадуйтесь результату. Всего за несколько уроков вы научились очень многому. Еще немного обучения и вы станете профессионалом! Продолжайте!
Конец урока. В данном уроке вы узнали:
— тег для построения списка.
— тег для навигации.
— кликабельный номер телефона.
@font-face — подключение шрифта.
box-sizing — CSS-свойство для изменения расчета высоты и ширины элемента.
position — CSS-свойство для позиционирования элемента. Возможные значения: absolute, relative, static и fixed.
z-index — CSS-свойство для позиционирования по оси z.
Разные селекторы могут иметь разный приоритет.
:hover — псевдокласс в CSS, который срабатывает при наведении на элемент.