CSS меню с помощью спрайтов


Содержание

cssprofi.ruАлексей Елизаров. Уроки CSS, HTML и не только

Автор: Алексей Елизаров.

Сегодня, хотелось бы рассмотреть создание прозрачного меню с использованием спрайтов. Использование CSS спрайтов снижает количество HTTP запросов, и соответственно увеличивается скорость загрузки сайта. В уроке используется только CSS и HTML5.

Итак, спрайты представляют из себя набор изображений. Сделать их можно на многих онлайн ресурсах, например http://spritepad.wearekiss.com/ или http://www.spritecow.com/. Впрочем, вы без труда найдете те, что подходят вам. Здесь я буду использовать спрайт уже готовый. Вот он:

Теперь давайте посмотрим структуру меню html

Как видно мы используем структуру html 5 с тегом .

Теперь давайте подробно рассмотрим структуру CSS

Мы прописываем для класса .navigation изображение спрайта и размер.

Теперь прописываем код для тега nav a . Обратите внимание что, ширина изменилась с 450px на 90px. Еще один важный момент. Как вы заметили, мы задали названия пунктов меню (Home, About . и т.д.), это важно для SEO и поисковых роботов. А теперь внимание, вот эта строчка text-indent: -9999px; убирает название из поля видимости, но они остаются и индексируются.

Остается задать позиции для каждого пункта меню до и после наведения. Свойство background-position определяет положение на картинке.

Вот так создаются меню CSS с использованием спрайтов. Спрайты можно использовать не только для меню, но и для иконок социальных сетей, кнопок. Главное понять принцип работы с ними.

Увеличение скорости загрузки сайта при помощи CSS спрайтов

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

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

Для подробного описания последовательности создания спрайта я приведу наглядный пример. Таким образом мне удастся разложить по полочкам все действия, чтобы воочию посмотреть на результат. В случае чего — спрашивайте, с удовольствием отвечу. Итак, поехали!

Что такое CSS спрайты, их польза и предназначение на сайте

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

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

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

Для ручного объединения элементов в один файл потребуется графический редактор и немного времени. Затем необходимо определить относительные координаты каждого элемента в спрайте и написать свойства позиционирования для файла стилей. Я предлагаю облегчить задачу благодаря онлайн инструменту.

CSS Sprites Generator и тонкости, которые нужно знать

В качестве удобного и надёжного инструмента я предлагаю воспользоваться генератором CSS спрайтов. Вариантов великое множество и все выполняют возложенные на них задачи, но мне больше всего нравится CSS Sprites Generator, созданный инженерами компании Toptal.

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

  • применяя свойство repeat-x располагайте элементы спрайта по вертикали или размещайте одно повторяющееся фоновое изображение крайним правым в случае горизонтального спрайта;
  • применяя свойство repeat-y располагайте элементы спрайта по горизонтали или размещайте одно повторяющееся фоновое изображение крайним нижним в случае вертикального спрайта.

Проще говоря, изображение повторяющегося фона необходимо располагать в спрайте таким образом, чтобы при перемещении в горизонтальном (X) или вертикальном (Y) направлении на пути не встречалось другое изображение.

Порядок создания CSS спрайта с помощью генератора

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

Переходим на страницу онлайн генератора спрайтов CSS Sprites Generator и загружаем заранее подготовленные файлы нажатием конки Choose files или простым перетаскиванием на страницу методом Drag & Drop.

Настройки состоят из двух параметров:

  • Padding between elements (px) — отступ между элементами в пикселях,
  • Align elements — выравнивание элементов.


Используйте отступы между элементами, чтобы при масштабировании страницы элементы не «наезжали» друг на друга. Ниже разберёмся с вариантами выравнивания элементов.

Binary Tree — бинарное дерево — наиболее эффективный по размеру алгоритм размещения элементов:

Diagonal — диагональ — каждый элемент может иметь неограниченное горизонтальное или вертикальное фоновое заполнение без пересечения с другими элементами спрайта:

Diagonal (Alternative) — диагональ (альтернатива) — то же самое, что диагональ, но используется диагональ в другом направлении:

Top-down — сверху вниз — элементы расположены вертикально поочерёдно сверху вниз:

Left-right — слева направо — элементы расположены горизонтально поочерёдно слева направо:

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

После выбора и загрузки файлов на странице CSS Sprites Generator вы увидите готовые стили, которые необходимо скопировать и добавить в файл style.css. На основе примера я получил следующий код:

Дело остаётся за малым — нажатием кнопки Download скачать готовый файл спрайта с именем css_sprites.png и загрузить на свой сервер. Вы можете переименовать файл, главное в будущем не забудьте сделать тоже самое в файле стилей, а также отредактировать путь к файлу.

В конечном итоге результатом работы онлайн генератора стало такое изображение, в котором собраны воедино все три иконки:

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

Представьте ситуацию, в которой необходимо заменить одно изображение на другое — придётся менять стили всех элементов, так как изменятся координаты. Избежать подобных проблем позволит создание нескольких спрайтов, объединяющих группы элементов (иконки меню, иконки навигации и т.д.). А вы используете спрайты?

30 классных уроков создания CSS меню

3 января 2012 | Опубликовано в css | 17 Комментариев »

CSS сегодня — штука жизненно важная для веб-дизайна. Дежурка периодически публикует переводы интересных статей и уроков по CSS. Однако, хороших материалов много, и чтобы перевести их все, потребуется куча времени. Сегодняшняя подборка — для тех, кто дружит с английским языком или уже достаточно разбирается в вопросе, чтобы понять суть статьи по коду и демо-примерам. Это подборка неплохих туториалов по созданию навигационного меню на CSS. Используя приемы или их элементы, изложенные в этих уроках, вы сможете добавить динамики своему сайту, придать ему современный стильный вид. Некоторые из этих туториалов мы впоследствии переведем и опубликуем в нашем журнале.

Как использовать спрайты CSS?

Здравствуйте, дорогие друзья и коллеги!

Вы уже используете css спрайты на своих сайтах? Если ещё нет нет, или только начинаете то эта статья для вас. В ней вы узнаете что это такое, зачем они нужны, почему их нужно использовать и как это правильно делать.

Что такое спрайты css и зачем они нужны?

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

Используется эта картинка для задания фона для элементов на сайте при помощи CSS.

Цукерберг рекомендует:  Срок - Вопрос по обучению

Для того чтобы задать для нужного блока определённую область спрайта используется позиционирование фона.
Например:

Допустим у нас есть 2 ссылки для которых нам нужно указать в качестве фона соответствующие социальные сети.

Вёрстка будет выглядеть так:

Теперь давайте загрузим спрайт с несколькими изображениями соцсетей на хостинг и в CSS зададим для них фон.

Для задания фона мы используем большое изображение с несколькими картинками и при помощи CSS свойства background-position смещаем фон как нам нужно.

При этом сначала мы указываем смещение по горизонтали и по вертикали.

Для второго блока это будет выглядеть так:

По сути всё то же самое, но меняется только значения CSS свойства background-position.


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

Вёрстка будет выглядеть так:

А так будет выглядеть CSS:

Зачем использовать CSS спрайты?

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

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

  • Нужно потратить определённое время на создание такого объединённого фонового изображения.
  • Сложнее задавать фон так как нужно вычислять значения для смещения.
  • Для того чтобы добавить, удалить или изменить одно изображение приходится править весь спрайт.

Использование CSS спрайтов для создания эффектов при наведении

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

При первом наведении на элемент после загрузки страницы фоновая картинка как бы мигает при смене. Данная проблема наблюдается не всегда, но в большинстве случаев.

Для решения этой проблемы делаем следующее:

    1. Подготавливаем спрайт с двумя картинками

Меню навигации на CSS — 30 эффектных и универсальных примеров

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

Сегодня мы представляем вам 30 вдохновляющих примеров отлично выполненных меню навигации в дизайне. Некоторые из них полностью выполнены посредством CSS, а в некоторых, все же, применили изображения и/или javascript дабы повысить уровень удобства и функционала.

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

Silk Tide
Это единственное меню в этом списке, выполненное в таком стиле минимализма. По сути, оно представляет собой простой текст с выделяющимся синим прямоугольником. Это очень легко реализовать, и такой метод создает очень приятный эффект.

Glenn Sorrentino
В этом примере используются границы CSS сверху и снизу меню – границы увеличиваются при наведении курсора мыши на пункт меню.

Strutta
Если вы используете текстурированный фон, то не забудьте применить эффект прозрачности. Этого очень просто добиться с помощью RGBa в CSS3.

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

Thoughtbot
При наведении курсора мыши, фон становится более светлым. Для усиления эффекта, к меню применили специальные прозрачные PNG, за счет которых создается эффект освещения.

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

Safarista
Здесь мы можем наблюдать каждый пункт меню в виде гибрида текста и изображения. Иконка, градация и фон представляют собой область каждого пункта меню, а текст представляет собой стилизованный HTML с эффектом подчеркивания при наведении.

David Jonsson
Еще один интересный эффект при наведении курсора мыши. Здесь есть спрятанные пиктограммы, которые отображаются только когда вы наводите курсором.

Asvalia
Нам нравятся цвета и кривой текст в этом меню. А также стоит отметить интересный эффект свечения при наведении.

Bonsai Studios
Здесь мы видим максимально простое вертикальное меню с эффектом затемнения при наведении. Такой эффект может быть достигнут за несколько минут, но выглядит впечатляюще.

Great Expectations Church
Еще одно вертикальное меню. Здесь использованы простые, но привлекательные иконки и фоновое gif-изображение с эффектом градации при наведении.

Ryan Couser
В этом меню используются простые спрайты, за счет которых можно видеть эффект при наведении курсора. Каждая пиктограмма представляет собой изображение с двумя режимами: включено и выключено.

Kk Media
Здесь мы можем видеть вертикальное меню с более детальными иконками. Каждая ссылка представляет собой пункт списка HTML с простым фоновым изображением, примененным за счет CSS.

Bite Club
Вот на это действительно стоит обратить внимание. Светлые тона привлекают внимание, а инверсия цветом создает отличный эффект при наведении. Здесь также использованы спрайты для каждого пункта.


Capital City Equipment Company
Навигационное меню в виде дома. Текст каждой ссылки представляет собой часть изображения. Правда, если вы захотите сделать нечто подобное, то советуем вам просто наложить настоящий текст поверх фонового изображения.

Strawberry Leisure
В этом выпадающем меню использовано маленькое повторяющееся PNG-изображение, за счет которого достигается эффект пониженного уровня плотности. Опять же, в будущем советуем вам воспользоваться технологией RGBa, которая скоро будет поддерживаться во всех браузерах.

Artificial Studio
Опять заметно использование спрайтов. Большие кнопки и превосходные градации в купе представляют собой отличное навигационное меню.

Cognigen
Этот вариант можно назвать самым оригинальным из всех подборки. Для достижения трехмерного эффекта, дизайнер применил изображение с 4-мя состояниями для каждой кнопки, в зависимости от того, обычное ли это ее состояние, при наведенном курсоре мыши и так далее.

Больше прелестей навигационных меню на CSS

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

Решено с помощью CSS! Выпадающие меню

Дата публикации: 2020-05-15

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

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

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

Поиск в Google по запросу «выпадающее меню» предоставляет много примеров

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Давайте посмотрим, можем ли мы создать одно из этих меню с помощью только CSS. Мы создадим список ссылок внутри компонента навигации следующим образом например:

Теперь, предположим, мы хотим создать выпадающее подменю во втором элементе навигации. Мы можем сделать то же самое и включить список ссылок в этом элементе списка:

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

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

Проблема

Все уже начинает выглядеть так, как нам нужно, но на данный момент мы еще далеки от завершения. Доступность в Интернете — это основная часть развития вашего продукта, и как раз сейчас вам предоставляется прекрасная возможность обеспечить ее. Добавление role=»navigation» — это хорошее начало, но для того, чтобы панель навигации была доступной, нужно обеспечить возможность перемещать по ней (и выделять фокусом соответствующий элемент), а также чтобы экранный диктор точно считывал вслух то, что сейчас выделено фокусом.

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

Цукерберг рекомендует:  Фотогалерея AJAX (jQuery) с наборами изображений в массиве JavaScript

Теперь важно отметить, что теоретически вы выделили фокусом элемент подменю, и программа чтения с экрана сможет проанализировать это, считав Sub-One, но пользователи клавиатуры не смогут определить, что сейчас происходит.

Причина заключается в том, что, хотя мы настраиваем состояние наведения указателя для родительского элемента, когда мы переходим от родительского элемента к одному из элементов списка внутри него, мы теряем этот стиль. Это логично с точки зрения CSS, но это не то, что нам нужно.

К счастью, у нас есть новый псевдо-класс CSS, который даст нам именно то, что нам нужно в этом случае, и он называется :focus-within.

Решение: «:focus-inside»

Псевдо-селектор :focus-within является частью CSS Selectors Level 4 Spec и указывает браузеру применить стиль к родительскому объекту, когда какой-либо из его дочерних элементов выделен фокусом. В нашем случае это означает, что мы можем перейти к Sub-One и применить стиль :focus-within, а также стиль :hover для родительского элемента и увидеть, где именно находится выпадающий список навигации. В нашем случае это будет ul li:focus-within > ul:

Примеры CSS меню c анимацией с ресурса Codepen

Возможно, вы слышали о ресурсе Codepen, на котором можно создавать файлы примеров для использования их в проектах. В данной статье мы рассмотрим примеры различных меню, авторы которых разместили свой код на codepen.io.

Простые меню вы можете разобрать с помощью статьи «Виды горизонтальных меню для сайта». Здесь же будут рассмотрены примеры различных меню, появляющихся по клику на кнопке. В этих меню, помимо css-форматирования, используется код на JavaScript/jQuery.

Flexbox-меню с перекрытием экрана

Верстка меню основана на модели Flexbox. При появлении элементов меню происходит перекрытие экрана. Используются трансформации и анимация с помощью свойства transition . Также используется код на jQuery.


Меню со слайд-эффектом

При клике на элементах этого меню используется плавный переход подчеркивания для активной ссылки. Здесь есть не только css-форматирование, но и код на jQuery.

В примере используются html-, css- и js-препроцессоры. Если код вам непонятен, нажмите на стрелку в правом верхнем углу соответствующей вкладки и выберите пункт «View compiled HTML» и т.п. при редактировании этого примера на Codepen.

Цветное навигационное меню на основе CSS и jQuery

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

See the Pen Colourful navigation by Lewi Hussey (@Lewitje) on CodePen.18892

Скошенное меню

В этом меню внешний вид обеспечивается с помощью CSS3-свойства transform: skew() . Очень интересный вид, полученный путем трансформации списка ссылок.

See the Pen Skewed Menu by Claudio Holanda (@kazzkiq) on CodePen.18892

CSS меню с эффектами при прокручивании и наведении

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

Интересное меню с различными цветами и иконками для пунктов меню. Оно предполагает разворачивание на весь экран.

Меню для мобильной версии сайта или приложения

Это меню «заточено» под мобильную версию сайта или мобильное приложение. Используется не только css-форматирование, но и JavaScript-код.

See the Pen App Navigation by Ian Turner (@iamturner) on CodePen.18892

Анимационное меню с SVG (UI Navigation Concept)

Меню, предназначенное опять-таки либо для мобильной версии сайта, либо для мобильного приложения. В нем используются анимации SVG и CSS3 без подключения сторонних библиотек + код на JavaScript.

See the Pen SVG UI Navigation Concept by Alex Permyakov (@alexdevp) on CodePen.18892

Желеобразное меню для мобильных устройств

Очень интересное меню с приятной анимацией при скроллинге и прикосновении на мобильных устройствах. Требует подключения множества библиотек.

Боковое css-меню c иконкой-гамбургером

Приятное боковое выезжающее меню с CSS-анимацией появления самого меню и изменения иконки-гамбургера. Подойдет как для основной версии сайта, так и для мобильной. Помимо CSS, используется код на jQuery.

Боковая панель с меню

Меню расположено на боковой выезжающей панели справа. При появлении меню основной контент сдвигается влево. Использован код на JS.

Выезжающее сверху CSS меню

При нажатии на кнопку-гамбургер сверху с анимацией появляется меню. Контент смещается вниз с отступами слева и справа. Помимо css-transition использован несложный код на jQuery.

See the Pen Off canvas menu by Mark Murray (@markmurray) on CodePen.0

Приятное меню, которое появляется со слайд-эффектом с помощью css-transition и небольшого jQuery-кода.

Меню навигации CSS с помощью Sprite: как выделить текущую вкладку/кнопку страницы?

Я создал меню навигации CSS с помощью спрайта, очень похожего на веб-сайт Apple. У меня это нормально работает, так что он меняет правильную позицию на изображении при наведении и mousedown (все с использованием CSS), но мне сложно понять, как сделать кнопку оставленной подсветкой после ее щелчка. У меня есть строка в моем спрайте для «clicked» look, но нет CSS, который, как я знаю, обрабатывает выбранное. Я хочу, чтобы кнопки переключались на их «нажатую» версию, в зависимости от того, на какой из них была нажата кнопка. Я изучил некоторые решения javascript, используя jQuery, но я думал, что может быть лучший способ.


Спрайт, который я использую, очень похож на Apple, нашел здесь.

Любая помощь будет принята с благодарностью. Спасибо.

Дополнительная информация:

Итак, в настоящее время мое меню выглядит так: html:

Любой мой CSS все здесь (извините, он длинный):

Self-Ответ:

Для этого я по существу следил за тем, как Apple делает это на своем сайте. Я установил div с шириной спрайта и добавил неупорядоченный список в этом div. Каждый элемент списка представляет собой кнопку на панели кнопок. Внутри каждого элемента списка есть один тег привязки, который href для страницы, на которую я хочу перейти, когда нажимается кнопка. В CSS у меня есть класс, который ссылается на все теги привязки под элементом списка под содержимым div, под ним div, как таковой:

Это определяет фоновое изображение для каждого из якорных тегов. Теперь мне нужно определить положение фона для каждого тега привязки, чтобы он отображал правую кнопку. У меня есть CSS для каждого тега привязки. Здесь CSS для одного из них:

Конечно, у меня есть CSS для управления наведением над кнопками (a: hover) и для мыши на кнопках (a: active), но мой первоначальный вопрос касался того, как сохранить его на выбранном взгляде на кнопку когда я на определенной странице. Я начну с CSS. Если бы у меня было 6 кнопок, я сделал еще шесть классов CSS, каждый из которых относится к контейнеру div, имеющему определенный класс. Этот класс, который будет иметь контейнер, будет основан на странице, на которой я сейчас нахожусь (я объясню через минуту). Также в определении этого класса CSS я указываю, какой тэг привязки должен менять положение фона. В качестве примера, если я нажму кнопку «Системы» на странице, я динамически добавлю (через javascript) класс в контейнер div «систем», и этот CSS будет применен в результате:

Фоновая позиция — это та, которая покрывает «щелкнутый» вид моей кнопки. Обратите внимание на часть .systems декларации, которая указывает, что div #globalheader должен иметь класс «систем». Если это так, оно меняет исходное положение только одного тега привязки: вы это догадались, тот, что прямо под «system_nav» li. Я написал один из этих классов для каждой из кнопок на панели кнопок. Второй трюк заключался в написании javascript для динамического добавления класса в div в зависимости от того, на какой странице я был включен. Для этого я помещаю скрытый div на каждую страницу, которая выглядит примерно так:

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

Voila. «системы» добавляются как имя класса в div «globalheader», и применяется правильный класс CSS, заставляя щелкнуть только кнопку «Системы».

Это заняло немного работы, посмотрев на веб-сайт Apple, но так они это делают, и я им доверяю. Это сработало для меня.

Надеюсь, что это поможет кому-то еще с той же проблемой, что и я.

CSS-спрайты

До того, как в CSS появился псевдокласс :hover , создание ролловера — элемента, который меняет свой вид при наведении курсора — реализовывалось через язык JavaScript. Сейчас это делается намного проще, но есть один недостаток: если в состоянии :hover (т. е. при наведении курсора на элемент) должно появиться какое-то фоновое изображение, то оно начинает загружаться в момент наведения курсора, а не при общей загрузке страницы.

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

Цукерберг рекомендует:  Java - Требуется Сэн-сэй)

Что такое спрайты CSS

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

Спрайт, в котором собраны все используемые иконки

Спрайт со значками соцсетей и их вариациями для :hover Спрайт с элементами интерфейса

Преимущества CSS-спрайтов

  • CSS-спрайт содержит в себе фоновые изображения для различных состояний элементов, и загружается он целиком при загрузке веб-страницы. Это исключает подтормаживание ролловера при первичном наведении курсора на элемент.
  • Сокращается количество обращений к серверу. Ведь для загрузки каждой маленькой иконки требуется отдельный запрос, а чем меньше обращений, тем лучше. Для загрузки спрайта понадобится всего один запрос на сервер.
  • Еще одно преимущество хранения множества картинок в спрайте заключается в том, что если у них похожая палитра цветов, то одно большое изображение будет весить меньше, чем отдельные маленькие картинки в сумме.
  • Всё это в целом положительно влияет на скорость загрузки сайта.

Как создать спрайт из картинок

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

Ручной способ создания спрайтов — занятие довольно долгое. Поэтому, когда использование спрайтов стало набирать обороты, появились онлайн-сервисы по автоматическому созданию спрайт-листов, например, Spritegen, RetinaSpriteGenerator и другие. Вы загружаете необходимые изображения в отдельных файлах на сайт, и для вас генерируется спрайт, который вы сразу можете скачать на компьютер.


Как пользоваться спрайтами CSS

Теперь пора узнать, как использовать CSS-спрайты на практике. Мы покажем вам небольшой пример с использованием спрайта, содержащего значки социальных сетей (мы показывали его выше). В обычном состоянии ссылки значок соцсети будет цветным (верхний ряд спрайта), а при наведении курсора он будет становиться серым (как в нижнем ряду).

HTML-разметка выглядит следующим образом:

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

Переходим к CSS. Первым делом запишем общие стили для всех ссылок:

Первая строка содержит ссылку на спрайт. По факту, мы задали одно фоновое изображение для всех ссылок. Вторая строка отменяет дублирование фона — здесь оно не потребуется.

Первая наша ссылка имеет класс .facebook . Зададим позиционирование для ее фона. Иконка Facebook находится точно в левом верхнем левом углу спрайта, поэтому определить ее позицию будет легко — left top :

Идем дальше: позиционируем фон для ссылки на Twitter. Иконка Твиттера расположена справа от Facebook и примыкает к ней, не создавая пустых промежутков. Нам необходимо переместить спрайт влево на столько пикселей, чтобы скрыть иконку Facebook и полностью заполнить область ссылки иконкой Twitter. Поскольку ширина каждой иконки равна 100 пикселям, то мы и сдвигаем фон влево на 100 пикселей. Вертикальное позиционирование мы пока нигде не меняем, а оставляем значение top :

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

Результат работы данного кода показан на скриншоте ниже:

Теперь разберемся с поведением фоновых картинок при наведении курсора на ссылку. Нам нужно смещать спрайт по вертикали вверх таким образом, чтобы в область просмотра попадала иконка из нижнего ряда спрайта. Здесь всё довольно просто и решается одним правилом CSS, а именно присвоением значения bottom свойству background-position-y :

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

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

Если вам стало интересно, то вот и строка, которая отвечает за плавность изменения иконок (не волнуйтесь, чуть позднее мы будем изучать CSS-анимацию, и в частности свойство transition ):

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

Вот мы и разобрали основные методы стилизации ссылок. Рекомендуем вам дополнительно попрактиковаться, чтобы закрепить полученные знания. А следующая глава нашей книги посвящена CSS-анимации, реализация которой стала возможна благодаря свойствам, появившимся в CSS3. И в первом уроке мы разберем свойство трансформации — transform.

Решено с помощью CSS! Выпадающие меню

Дата публикации: 2020-05-15

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

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

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

Поиск в Google по запросу «выпадающее меню» предоставляет много примеров

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Давайте посмотрим, можем ли мы создать одно из этих меню с помощью только CSS. Мы создадим список ссылок внутри компонента навигации следующим образом например:

Теперь, предположим, мы хотим создать выпадающее подменю во втором элементе навигации. Мы можем сделать то же самое и включить список ссылок в этом элементе списка:

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

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

Проблема

Все уже начинает выглядеть так, как нам нужно, но на данный момент мы еще далеки от завершения. Доступность в Интернете — это основная часть развития вашего продукта, и как раз сейчас вам предоставляется прекрасная возможность обеспечить ее. Добавление role=»navigation» — это хорошее начало, но для того, чтобы панель навигации была доступной, нужно обеспечить возможность перемещать по ней (и выделять фокусом соответствующий элемент), а также чтобы экранный диктор точно считывал вслух то, что сейчас выделено фокусом.

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

Теперь важно отметить, что теоретически вы выделили фокусом элемент подменю, и программа чтения с экрана сможет проанализировать это, считав Sub-One, но пользователи клавиатуры не смогут определить, что сейчас происходит.

Причина заключается в том, что, хотя мы настраиваем состояние наведения указателя для родительского элемента, когда мы переходим от родительского элемента к одному из элементов списка внутри него, мы теряем этот стиль. Это логично с точки зрения CSS, но это не то, что нам нужно.

К счастью, у нас есть новый псевдо-класс CSS, который даст нам именно то, что нам нужно в этом случае, и он называется :focus-within.

Решение: «:focus-inside»

Псевдо-селектор :focus-within является частью CSS Selectors Level 4 Spec и указывает браузеру применить стиль к родительскому объекту, когда какой-либо из его дочерних элементов выделен фокусом. В нашем случае это означает, что мы можем перейти к Sub-One и применить стиль :focus-within, а также стиль :hover для родительского элемента и увидеть, где именно находится выпадающий список навигации. В нашем случае это будет ul li:focus-within > ul:

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих