НАМ 10 ЛЕТ
беЛн.бу
- Белорусский, народный портал






Реклама

Купить ссылку здесь за руб.
Поставить к себе на сайт

Реклама



Вход на портал

Для просмотра профиля, войдите на портал как пользователь.

Меню портала

Погода

GISMETEO: Погода по г.Минск
Погода в других городах

Категории раздела

Скрипты для uCoz [32]Шаблоны для uCoz [2]
Видео уроки по ucoz [0]Иконки для ucoz [0]
Кнопки для ucoz [2]Php скрипты для ucoz [0]

Полезные ссылки

Статистика портала

соц.сети

Облако тегов

Мы принимаем



ТОП РЕЙТИНГ

Скрипты (CMS) и Программы (SOFT)

Скрипты (CMS) и Программы (SOFT) » Для UCOZ » Скрипты для uCoz

Социальное меню на чистом CSS

Кнопки круглой формы, которые буду своим видом призывать пользователей вашего сайта подписаться на группу ВКонтакте, Facebook, страничку Twitter и т.п. Штука полезная, и у кого нету подобного решения на сайте, рекомендуем установить.

Установка

1. Загружаем папку с файлами из архива в корень сайте.

2. В то место, где хотим видеть кнопки, вставляем следующий код:

 <div id="social">
  <div class="menu">
  <ul class="primary-menu">
  <li class="facebook"><a class="social-item" href="#">f</a><span class="social-span">Присоединяйтесь к нам на Facebook</span></li>
  <li class="twitter"><a class="social-item" href="#">t</a><span class="social-span">В Twitter</span></li>
  <li class="flickr"><a class="social-item" href="#">c</a><span class="social-span">Добавьте нас в Flickr</span></li>
  <li class="rss"><a class="social-item" href="#">a</a><span class="social-span">Следите за нами через RSS</span></li>
  <li class="mail"><a class="social-item" href="#">k</a><span class="social-span">Подпишитесь на уведомления через почту</span></li>
  </ul>
  </div>
</div>

3. Вставляем в таблицу стилей CSS:

 @font-face {
  font-family: 'Social';
  src: url('/fonts/socialicons-webfont.eot');
  src: url('/fonts/socialicons-webfont.eot?#iefix') format('embedded-opentype'),
  url('/fonts/socialicons-webfont.woff') format('woff'),
  url('/fonts/socialicons-webfont.ttf') format('truetype'),
  url('/fonts/socialicons-webfont.svg#SocialIconsMedium') format('svg');
  font-weight: normal;
  font-style: normal;
}

#social {
  width:960px;
  margin:100px auto;
  background:#ccc;
  padding:20px 0;
}

#social .menu {
  text-align:center;
  padding-top:30px;
}

#social .menu .primary-menu {
  list-style-type:none;
  position:relative;
}

#social .menu .primary-menu li {
  display:inline;
  text-align:center;
  margin:0 10px;
  position:relative;
}

#social .menu .primary-menu li a {
  position:relative;
  text-decoration:none;
  font-family:'Social' !important;
  font-size:25px;
  background:#d9d9d9;
  display:inline-block;
  width:50px;
  height:35px;
  padding-top:15px;
  color:#fff;
  border:3px solid #fff;
 
  -webkit-border-radius:100px;
  -moz-border-radius:100px;
  -o-border-radius:100px;
  -ms-border-radius:100px;
  -khtml-border-radius:100px;
  border-radius:100px;
 
  -webkit-box-shadow:0 0 1px 1px #afafaf;
  -moz-box-shadow:0 0 1px 1px #afafaf;
  -o-box-shadow: 0 0 1px 1px #afafaf;
  -ms-box-shadow: 0 0 1px 1px #afafaf;
  -khtml-box-shadow:0 0 1px 1px #afafaf;
  box-shadow:0 0 1px 1px #afafaf;
 
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -o-transition:all 1s;
  -ms-transition:all 1s;
  -khtml-transition:all 1s;
  transition:all 1s;
 
  behavior: url(pie/PIE.htc); /* CSS3 Fix for Internet Explorer */
}
  #social .menu .primary-menu li.facebook a:hover { background:#00438f;}
#social .menu .primary-menu li.twitter a:hover { background:#00b8df;}
#social .menu .primary-menu li.flickr a:hover { background:#df00bd;}
#social .menu .primary-menu li.rss a:hover { background:#ff7800;}
#social .menu .primary-menu li.mail a:hover { background:#1d1d1d;}
#social .menu .primary-menu li a:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -khtml-transform: rotate(360deg);
  transform: rotate(360deg);
 
  behavior: url(pie/PIE.htc); /* CSS3 Fix for Internet Explorer */
}

#social .menu .primary-menu li span.social-span {
  font-family:Arial;
  font-size:11px;
  position:absolute;
  width:100px;
  top:45px;
  left:-45%;
  background:#ffffff;
  padding:5px;
  border:1px solid #B8B8B8;
  opacity:0;
 
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  -o-border-radius:10px;
  -ms-border-radius:10px;
  -khtml-border-radius:10px;
  border-radius:10px;
 
  -webkit-transition:opacity 1s ease-in-out;
  -moz-transition:opacity 1s ease-in-out;
  -o-transition:opacity 1s ease-in-out;
  -ms-transition:opacity 1s ease-in-out;
  -khtml-transition:opacity: 1s ease-in-out;
  transition:opacity 1s ease-in-out;
 
  behavior: url(pie/PIE.htc); /* CSS3 Fix for Internet Explorer */
}

#social .menu .primary-menu li a:hover ~ span.social-span {
  opacity:1;
}

#social .menu .primary-menu li span.social-span:after {
  content:"";
  position:absolute;
  border-color:#fff transparent;
  display:block;
  top:-7px;
  left:40%;
  width:0;
  border-width:0 7px 7px;
  border-style:solid;
}

На этом установка завершена.

Размер файла: 33.9 Kb


Внимание!!! Скачивание файла доступно, только для групп "Пользователи", "VIP" и "Я, Online".
Категория: Скрипты для uCoz | Добавил: rinhed (19.10.2015)
Просмотров: 104 | Теги: скрипты для Ucoz, CSS, Социальное, Чистом, меню, на
Всего комментариев: 0
Имя *:
Email:
Код *:


Внимание!
В комментариях запрещено размещать ссылки, рекламу сторонних ресурсов(сайтов). Если Вы разместили ссылку или рекламу, то комментарий будет удален автоматически.

Реклама

Корзина

Ваша корзина пуста

Переводчик

Выберите язык портала

Поиск по порталу

Поиск от яндекс

Анекдоты...

[16.03.2017][Разные]

Встречаются два хохла.
Один другому говорит: Прикинь вчера в России был на красной площади и насрал там
Другой говорит: да ну и что ничего не сделали
Неа я по тихой в штаны.

(0)

Видео

00:00:10

Футаж на зеленом фоне (Балерина танцует)

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0
00:00:07

Футаж на зеленом фоне (Винни идет)

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0
00:00:07

Футаж на зеленом фоне (Винни на месте)

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0
00:00:14

Футаж на зеленом фоне (Винни на шарике)

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0
00:04:15

7Б - Птица RMX

  • Просмотры:
  • Всего комментариев: 0
  • Рейтинг: 0.0

Получить бонус

Еще бонусы тут

Моментальный обмен WebMoney

Вы можете получить WMR-бонус в размере 0,01-0,10 WMR на свой кошелек 1 раз в сутки

Кошелек
Код Защитный код

Обмен Webmoney

Бонус

BAKSGRAD.RU
Обновить Код.