плавающий баннер

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

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

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

<head>
<style>
.menu {
position: fixed; /* Фиксированное положение */
right: 10px; /* Расстояние от правого края окна браузера */
top: 20%; /* Расстояние сверху */
padding: 10px; /* Поля вокруг текста */
background: #0080C0; /* Цвет фона */
border: 1px solid #333; /* Параметры рамки */
}
.text {
height: 10px;
}
</style>
</head>
<body>
<div class=»menu»><a href=»http://lavrynenko.com» target=»_blank»>Он-лайн чат</a></div>
<div class=»text»></div>
</body>

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *