Приветствую всех читателей – Sozdaiblog.ru!
Сегодня я покажу, как сделать всплывающие подсказки с помощью CSS стилей.
Вся идея в том, что есть список со ссылками или в нашем случае, социальные иконки, которые показывают маленькие подсказки при наведении курсора мыши.
Неупорядоченный список будет выглядеть следующим образом:
<ul>
<li><a class="tt-googl_plus" href="Ссылка"><span>Google Plus</span></a></li>
<li><a class="tt-rss" href="Ссылка"><span>Rss</span></a></li>
<li><a class="tt-twitter" href="Ссылка"><span>Twitter</span></a></li>
<li><a class="tt-wikipedia" href="Ссылка"><span>Wikipedia</span></a></li>
<li><a class="tt-wordpress" href="Ссылка"><span>WordPress</span></a></li>
<li><a class="tt-you_tube" href="Ссылка"><span>You Tube</span></a></li>
</ul>
В нём Вы вписываете названия всплывающих подсказок и адрес перенаправления для каждой кнопки.
Представленный выше список размещаем в любом месте документа между тегами <body></body>, предварительно обернув его в <ul></ul> с добавлением класса элементам:
<ul class="tt-wrapper">
<li><a class="tt-googl_plus" href="Ссылка"><span>Google Plus</span></a></li>
<li><a class="tt-rss" href="Ссылка"><span>Rss</span></a></li>
<li><a class="tt-twitter" href="Ссылка"><span>Twitter</span></a></li>
<li><a class="tt-wikipedia" href="Ссылка"><span>Wikipedia</span></a></li>
<li><a class="tt-wordpress" href="Ссылка"><span>WordPress</span></a></li>
<li><a class="tt-you_tube" href="Ссылка"><span>You Tube</span></a></li>
</ul>
Далее нам остаётся прописать CSS стили. Они вписываются в самый конец основного файл всех стилей Вашего ресурса. В шаблонах WordPress таковым файлом является «style.css».
Все исходные файлы можно загрузить одним общим архивом нажав на кнопку «СКАЧАТЬ» рядом с демонстрацией всплывающих подсказок.
Всплывающие подсказки
Скажите друзья, какая всплывающая подсказка Вам понравилась больше всего?
На сегодня это всё, но не расстраивайтесь, впереди Вас ожидает много различных эффектов.
Чтобы их не пропустить, предлагаю подписаться на обновление блога и получать уведомление о выходе нового материала на Ваш адрес электронной почты.
До новых статей…
С уважением, Денис Черников!
- 3 Эффекта CSS анимации для Рекламных Мотиваций!
- Брендирование это простыми словами
- Консалтинговая компания что это такое простыми
- Емейл что это такое простыми словами
- Калерируются это простыми
-
Защита от хакеров и уязвимостей, безопасный доступ к админ-панели WordPress и оптимизация веб-страницы
- Издержки это простыми словами
- Ebitda margin что это такое простыми словами
- Установка и настройка CMS WordPress: полный чеклист настроек SEO
- Что такое CMS WordPress и как она работает
Вот спасибочки Денис!
Давно уже думал сделать что-то подобное! Твоя статья, как нельзя кстати!
Пожалуйста, Сергей! Прикручивайте на здоровье!
Можно и на ты!
Хорошо, Сергей! Просто я всех не упомню к кому на ты, а к кому на Вы.
Мне третий вариант больше всего понравился.
Хороший выбор, Олег!
Здорово!
К себе, наверное не заберу, но штука классная.
Спасибо, Денис!
А больше всего понравился вариант с кругляшками — демо2
Пожалуйста, Любовь! А почему не заберёте?
Потому что у меня этих кнопок натыкано очень много — подарок разработчика шаблона Во-вторых, каждая из них и так уже подписана.
Чтобы внедрить Ваше предложение, мне придется все менять. очень уж не хочется туда лезть и все переворачивать
Ну как знаете. Если надумаете, милости прошу.
Интересное оформление. Мне понравился больше 1-й вариант.
Да, он не плох! У каждого есть своя изюминка.
привет. как я понял надо написать (то что ты написал), но в какой странице?
и то что надо скачать куда надо воткнуть?
у меня такой шаблон капризный что то не так сделаю,(это часто))) то сразу все исчезает, и меня это уже уыуодит ))
шаблон fastfood от каких то братьев ;0)
head находится в index.php Вашего шаблона. И всё остальное там.
БЛОГ БОМБОВСКИЙ АВТОР МОЛОДЕЦ ПОБОЛЬШЕ Б ТАКИХ
с</span></a></li>
<li><a class=”tt-rss” href=”Ссылка”><span>Rss</span></a></li>
<li><a class=”tt-twitter” href=”Ссылка”><span>Twitter</span></a></li>
<li><a class=”tt-wikipedia” href=”Ссылка”><span>Wikipedia</span></a></li>
<li><a class=”tt-wordpress” href=”Ссылка”><span>WordPress</span></a></li>
<li><a class=”tt-you_tube” href=”Ссылка”><span>You Tube</span></a></li>
</ul>
Затем, добавляем CSS стили для создания всплывающих подсказок. Ниже представлен пример стилей:
.tt-wrapper {
list-style: none;
padding: 0;
margin: 0;
}
.tt-wrapper li {
display: inline-block;
margin-right: 10px;
}
.tt-wrapper li a {
position: relative;
display: inline-block;
text-decoration: none;
color: #000;
}
.tt-wrapper li a span {
display: none;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
background: #000;
color: #fff;
border-radius: 3px;
font-size: 12px;
}
.tt-wrapper li a:hover span {
display: block;
}
с</span></a></li>
<li><a class=”tt-rss” href=”Ссылка”><span>Rss</span></a></li>
<li><a class=”tt-twitter” href=”Ссылка”><span>Twitter</span></a></li>
<li><a class=”tt-wikipedia” href=”Ссылка”><span>Wikipedia</span></a></li>
<li><a class=”tt-wordpress” href=”Ссылка”><span>WordPress</span></a></li>
<li><a class=”tt-you_tube” href=”Ссылка”><span>You Tube</span></a></li>
</ul>
Затем добавляем следующий код в CSS-файл или внутри тегов <style></style> в документе:
.tt-wrapper {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
.tt-wrapper li {
position: relative;
cursor: pointer;
margin-right: 10px;
}
.tt-wrapper li a {
display: block;
}
.tt-wrapper li span {
opacity: 0;
visibility: hidden;
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background-color: #000;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
white-space: nowrap;
}
.tt-wrapper li:hover span {
opacity: 1;
visibility: visible;
}
Теперь у вас будет красивый всплывающий список с подсказками при наведении на иконки. Не забудьте заменить “Ссылка” реальными ссылками, которые вы хотите использовать.