Как сделать кликабельную li css

Обновлено: 07.07.2024

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

Преимущество данного оформления в том, что используется всего один класс: .

Такая конструкция сильно упрощает работу со списками в шаблонах и текстах.

Вариант 1a:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

Вариант 1b:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

Вариант 2a:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

Вариант 2b:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

Вариант 3a:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

Вариант 3b:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

Вариант 4a:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

Вариант 4b:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

Вариант 5a:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

Вариант 5b:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

И, напоследок, самый простой, но и самый часто используемый вариант:

Вариант 6a:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

Вариант 6b:

Элемент списка
Элемент списка
Элемент списка
Элемент списка
Элемент списка

Смотрите также:

Замена блока на фотографию при наведении курсора

Красивая замена блока на фотографию при наведении и движении курсора мыши

Анимированный разделитель для секций на CSS

Разделитель для секций в виде бегущих волн с использованием SVG и CSS

Секция с шестиугольными фотографиями

Вариант оформления блока с шестиугольными фотографиями разного размера

Добавить комментарий:

Большое спасибо за ваш труд!
Я начинающий фронтенд-разработчик,здорово помогаете разобраться в коде. Такие нестандартные решения! И легко свои идеи добавлять. Очень полезная информация.

а как это поставить на сайт? куда вставить html и css?

html во что то с расширением .html, например index.html
css во что то с расширением .css, например style.css

А если серьезно, то откуда же я знаю, как у вас там…

Во первых рахмет вам за вашу работу))

Разрешите поинтересоваться. Я установил меню 4б. Но мой текст "ссылки" чуть смещен вниз, либо сами цифорки меню стоят выше. Какими пунктами можно отрегулировать высоту?

Без ссылки или хотя бы скриншота сложно сказать…

Очень полезная информация, спасибо

А как сделать что бы отсчет начинался не с 1, а скажем с 5 ?

Для ul стоит стиль counter-reset: li
нужно поставить:

т.е. 4 пропускаем и считаем с 5того

А если надо сделать 9 li на три колонки, для каждой колонки прописывать свои стили?

Можно использовать column-count:3; для ul
Или разбить на 3 разных списка. В этом случае все классы и стили одинаковые.
Только для 2х последующих списков добавить (можно прям в хтмл):

Спасибо, просто и со вкусом, одна идея очень пригодилась!

Большое спасибо вам! Всё по-человечески сделано, всё удобно.

добрый день. а если не жалко могли бы поделиться css как у вас сделано в Свежие записи и в метках.

А метки просто кнопки, где один фон меняется на другой.

Спасибо! Интересные решения! Но у меня почему-то точка (списка) присутствует всегда в каждой строке списка. Вариант 4, например, в самом круге. Как от нее избавиться?

Попробуйте добавить к li
list-style: none;
Если не поможет, то добавить important
list-style: none!important;

Замечательно, все прекрасно работает (я взял Вариант 1a), вот только как сделать что бы таблица не занимала всю ширину страницы.
И будет ли работать это в мобильной версии сайта (ex-hort точка ру).

Она и занимает всю ширину (100%), чтобы подстраивается под разные размеры, включая мобильные.
Чтобы ограничить ширину, можно вставить ее в блок заданной ширины (адаптивный) или добавить классу .list1a :
max-width: 500px;

Я хочу сделать так, чтобы целой div был доступен клиенту и ссылки на другую страницу при нажатии без JavaScript и с допустимым кодом/разметкой.

Если у меня есть это, что я хочу получить результат –

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

целые div-ссылки на другую страницу при нажатии без javascript и с допустимым кодом, возможно ли это?

Педантичный ответ: Нет.

Как вы уже добавили другой комментарий, он недействителен, чтобы вставить div внутри тега a .

Однако ничего не мешает вам сделать тэг a очень похожим на div , за исключением того, что вы не можете вложить в него другие теги блока. Если это соответствует вашей разметке, установите display:block в свой тег a , а размер /float, как вам нравится.

Если вы откажетесь от своего вопроса, что вам нужно избегать javascript, как указывали другие, вы можете использовать обработчик события onClick. jQuery – популярный выбор для упрощения и обслуживания.

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

У вас бывало такое, что элемент на странице не реагировал на клик, пока вы не нажмёте на определённую его область?

Это происходило потому, что не весь элемент был кликабельным. Чтобы стало понятнее, посмотрите на картинку ниже — на ней видно, какой должна и не должна быть область клика:

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

UX-решения

Закон Фиттса

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

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

Далее рассмотрим реальные примеры, в которых также учитываются рекомендации WCAG 2.5.5 и закон Фиттса.

Кнопки

При необходимости можно использовать элемент . Рассмотрим этот случай на существующей системе интернет-банкинга:

Вот так выглядит эта кнопка:

При наведении курсора на кнопку он всё ещё выглядит, как указатель, и это нормально. Но если выделить текст, то появляется текстовый курсор. Такого не случится, если использовать правильные элементы.

Cube Dev , Удалённо , От 8000 $

Благодаря HTML-элементу , пользователь сможет:

выбирать кнопку с помощью клавиатуры;
нажимать на кнопку с помощью мыши, клавиатуры или касания.

Кроме того, его можно реализовать без JavaScript.

Кнопкам нужны внутренние отступы, и вот почему:

Ссылки

С таким кодом кликнуть можно будет только на текст:

Чтобы этого избежать, необходимо добавить padding к самой ссылке. Обратите внимание, что нижний и верхний отступ не будут работать по умолчанию, так как это встроенные элементы. Для этого можно использовать block , inline-element или flex .

Теперь вся область ссылки станет доступна для клика:

Гамбургер-меню

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

Предположим, что так выглядит область нажатия:

Попасть пальцем в такой маленький объект сложно. Но если увеличить эту область, то всё станет гораздо проще:

Можете попробовать самостоятельно в этом демо.

Чекбоксы и радио-кнопки

При наличии чекбокса или радио-кнопки пользователь ожидает, что он сможет нажать на него или связанный с ним текст.

На скриншоте ниже область клика привязана только к переключателю поэтому нажатие на текст ни к чему не приведёт:

Эту ситуацию можно решить, если в HTML связать label и input, используя атрибут for :

Или поместить input внутрь label:

После нужно добавить padding для , чтобы область клика стала больше:

Сайдбар

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

После того, как будут выполнены эти действия, получим:

Примеры

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

Заголовок раздела

Как правило, интервал вокруг стрелки может быть сделан в CSS, с помощью свойства padding или width и height.

Использование псевдоэлементов для увеличения области клика

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

Как это работает?

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

Ниже псевдоэлемент :after добавлен к кнопке меню:

Квадрат 55px специально расположен справа от элемента для наглядности.

Смотрите гифку ниже или попробуйте демо на Codepen.

Пример с нашего сайта

Недавно мы обнаружили на нашем сайте проблему: при попытке нажать на лайк с телефона на главной странице происходит переход на статью. Разобравшись в вопросе, оказалось, что рекомендуемый размер элемента для клика на touchscreen 48×48 dp. Иначе по нему сложно попасть на мобильных.

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

Как видно, кнопка осталась на своём месте, но область клика/тапа стала больше. При этом важно следить, чтобы области не пересекались.

Прежде чем строить из себя умника
. узнай что такое ссылка . и как сие выглядит!

Учи основы, млеять

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.

Читайте также: