Интернет магазин шабонов
Форма входа

Бесплатный раздел

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

Выдвижная панель на сайт

Дата добавления: 05.03.2017 - 11:40
Добавил: Buger
Количество просмотров: 295
Количество комментариев: 0
Рейтинг материала: 3.0 / 2
Выдвижная панель на сайт
БЕСПЛАТНО
рейтинг 3.0
/
голосов 2
Простая выезжающую панель на CSS. Сделаем left panel - выезжающую панель с левой стороны нашего сайта. Внутрь панели можно поместить любой html информер, в данном примере это информер активных пользователей и самые обсуждаемые темы. Данный скрипт требует подключения специальных шрифтов. Внутрь панели можно поместить любой html код или информер, в данном примере это информер активных пользователей и самые обсуждаемые темы.

Скрипт требует подключения специальных шрифтов FontAwesome.
Код
<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;}

Если у вас светлый дизайн, просто найдите в коде background-color:#000; color: #fff; и замените их на свои собственные.
Если вы решите добавить новый информер, то вам просто нужно прописать ему новый ID, например #inf30 и внести его ко всем стилям информера 1 таким вот способом:
Код
#hidden_inf2 ul,
#hidden_inf1 ul {list-style-type: none;}

Обратите внимание! Чтобы кнопки вызова имели горизонтальную последовательность, а не накладывались друг на друга, в последней части css новый информер необходимо ставить на 40px ниже вот так:
Код
#inf1 {top: 100px;}  
#inf2 {top: 140px;}

Разметка HTML
Код
<!-- Блок пользователей -->  
  <div id="inf1">
  <div id="hidden_inf1">
  <h3>Горячие темы форума</h3>  
  <ul>
  $MYINF_number$
  </ul>
  </div><!--/ hidden_inf1 -->
  </div><!--/ inf1 -->

  ...

<!--/ Блок пользователей -->  

Готово!

Источник: http://zornet.ru
Добавлять комментарии могут только зарегистрированные пользователи.