Лайфхаки

Код баннера плавающего поверх сайта

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

Специально для вас представляю простой код слоя, который будет находиться в фиксированном месте сайта, и — как бы вы его не крутили вверх-вниз — оставаться наверху 🙂

Примерный код баннера выглядит так:

  1. <style>

  2. .menus {

  3. position: fixed; /* Фиксированное положение */

  4. right: 10px; /* Расстояние от правого края окна браузера */

  5. top: 20%; /* Расстояние сверху */

  6. padding: 10px; /* Поля вокруг текста */

  7. border: 0px solid #333; /* Параметры рамки */

  8. }

  9. </style>

  10. <div class="menus">

  11. <a href="tg://resolve?domain=+380505242504" target="_blank" rel="noopener noreferrer"><img src="https://lavrynenko.com/wp-content/uploads/2018/03/telegram-1.png" width="55" height="55"></a>

  12. </div>

<style>
.menus {
position: fixed; /* Фиксированное положение */
right: 10px; /* Расстояние от правого края окна браузера */
top: 20%; /* Расстояние сверху */
padding: 10px; /* Поля вокруг текста */
border: 0px solid #333; /* Параметры рамки */
}
</style>
<div class=»menus»><a href=»tg://resolve?domain=+380505242504″ target=»_blank»><img src=»https://lavrynenko.com/wp-content/uploads/2018/03/telegram-1.png» width=»55″ height=»55″></a></div>

Пример работы кода доступен на этой странице (появится плавающий баннер Telegram, кликнув на который вы сможете отправить мне сообщение). Понятно, что вместо текста можно использовать картинки и даже видео 🙂 Дерзайте!

И не забывайте поделиться ссылкой на страницу на своей странице в социальных сетях 😉