Уважаемые друзья и пользователи сайта ART-UCOZ!
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Выдвижная панель на сайт
Дата добавления: 05.03.2017 - 11:40
Добавил: Buger
Количество просмотров: 2.3k
Количество комментариев: 0
Рейтинг материала: 3.0 / 2
БЕСПЛАТНО
рейтинг
3.0
/
голосов
2
Простая выезжающую панель на CSS. Сделаем left panel - выезжающую панель с левой стороны нашего сайта. Внутрь панели можно поместить любой html информер, в данном примере это информер активных пользователей и самые обсуждаемые темы. Данный скрипт требует подключения специальных шрифтов. Внутрь панели можно поместить любой html код или информер, в данном примере это информер активных пользователей и самые обсуждаемые темы.
Скрипт требует подключения специальных шрифтов FontAwesome.
CSS
Если у вас светлый дизайн, просто найдите в коде background-color:#000; color: #fff; и замените их на свои собственные.
Если вы решите добавить новый информер, то вам просто нужно прописать ему новый ID, например #inf30 и внести его ко всем стилям информера 1 таким вот способом:
Обратите внимание! Чтобы кнопки вызова имели горизонтальную последовательность, а не накладывались друг на друга, в последней части css новый информер необходимо ставить на 40px ниже вот так:
Разметка HTML
Готово!
Источник: http://zornet.ru
Код
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
CSS
Код
#inf1 {margin-left:-5px;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);position: fixed; top: 100px; left: 0;background-color:#000; width: 25px; height: 20px; padding: 8px 5px 5px 5px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; }
#inf1:before {font-family:'FontAwesome';font-size:14px; color:#fff;text-align: center;padding-left:10px}
#inf1:before {content: '\f15c';}
#inf1:hover:before {content: '\f00d';}
#hidden_inf1 {position: fixed; top: 100px; left: -290px; background-color:#000; color: #fff; width: 270px; height: auto; padding:10px; text-align: left; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-bottom-right-radius:10px; -moz-border-bottom-right-radius:10px; border-bottom-right-radius:10px; }
#hidden_inf1 ul {list-style-type: none;}
#inf1:hover {left: 280px;}
#inf1:hover #hidden_inf1 {left: 0;}
#inf1 {top: 110px;}
#inf1:before {font-family:'FontAwesome';font-size:14px; color:#fff;text-align: center;padding-left:10px}
#inf1:before {content: '\f15c';}
#inf1:hover:before {content: '\f00d';}
#hidden_inf1 {position: fixed; top: 100px; left: -290px; background-color:#000; color: #fff; width: 270px; height: auto; padding:10px; text-align: left; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-bottom-right-radius:10px; -moz-border-bottom-right-radius:10px; border-bottom-right-radius:10px; }
#hidden_inf1 ul {list-style-type: none;}
#inf1:hover {left: 280px;}
#inf1:hover #hidden_inf1 {left: 0;}
#inf1 {top: 110px;}
Если вы решите добавить новый информер, то вам просто нужно прописать ему новый ID, например #inf30 и внести его ко всем стилям информера 1 таким вот способом:
Код
#hidden_inf2 ul,
#hidden_inf1 ul {list-style-type: none;}
#hidden_inf1 ul {list-style-type: none;}
Код
#inf1 {top: 100px;}
#inf2 {top: 140px;}
#inf2 {top: 140px;}
Разметка HTML
Код
<!-- Блок пользователей -->
<div id="inf1">
<div id="hidden_inf1">
<h3>Горячие темы форума</h3>
<ul>
$MYINF_number$
</ul>
</div><!--/ hidden_inf1 -->
</div><!--/ inf1 -->
...
<!--/ Блок пользователей -->
<div id="inf1">
<div id="hidden_inf1">
<h3>Горячие темы форума</h3>
<ul>
$MYINF_number$
</ul>
</div><!--/ hidden_inf1 -->
</div><!--/ inf1 -->
...
<!--/ Блок пользователей -->
Готово!
Источник: http://zornet.ru
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: