Страница 1 из 11
Форум про uCoz » Всё для web-мастера » Web мастеру » Выезжающие социальные иконки и меню на сайте
Выезжающие социальные иконки и меню на сайте
Kosten
Дата: Понедельник, 11.04.2016, 00:38 | Сообщение # 1
Администраторы
Сообщений:12672
Награды: 39


Думаю вы не раз видели на любом ресурсе, где вы наводите на социальную ссылку и она выезжает, а так ее видно на половину. Также можно сделать и с меню, смотря какие кнопки будут стоять. Здесь будет представлено 2 варианта, что означает, вы можете подобрать, те которые вам больше понравились.

1) Вариант

Немного спрятанные изначально иконки, выезжают при наведении на них курсора мыши.

Установка:



Для начало нам нужно скачать архив и закинуть туда 2 папки по их названию. Потом зайти в CSS и поместить эти стили туда.

Здесь мы видим 2 вида, помещу в один код, вы можете разделить и установить, там где считаете нужным.

HTML

Код
<div class="menu">
      <i class="icon-cloud-download azul"></i>
      <i class="icon-camera-retro verde"></i>
      <i class="icon-envelope-alt vermelho"></i>
      <i class="icon-truck laranja"></i>
      <i class="icon-gift roxa"></i>
      <i class="icon-frown azul"></i>
      <i class="icon-linux vermelho"></i>
      <i class="icon-windows verde"></i>
    </div>

    <div class="menu">
      <i class="icon-facebook azul"></i>
      <i class="icon-twitter verde"></i>
      <i class="icon-google-plus vermelho"></i>
      <i class="icon-instagram laranja"></i>
      <i class="icon-foursquare roxa"></i>
      <i class="icon-github azul"></i>
      <i class="icon-linkedin vermelho"></i>
      <i class="icon-youtube verde"></i>
    </div>


Скачать

2) Вариант



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

Установка:

1) Скачиваем архив с нашего сайта и загружаем папку soc_icons в корень своего сайта
2) Вставьте в таблицу стилей CSS данный код:

Код
.menu {

  text-align: center;
  height: 60px;
  overflow: hidden;
  cursor: default;
}
    
.menu i {
  position: relative;
  top: 30px;
  transition: .2s ease;
}
    
.menu i:hover {
  top: 9px;
}
.icon {
  border-radius:10px;   
}


Остается основа кода, которую ставим устанавливаем.

Код
<div class="menu">
<i><a href="адрес ссылки" ><img src="/soc_icons/vkontakte.png" alt="Vkontakte"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/twitter.png" alt="Twitter"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/google_plus.png" alt="Google"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/facebook.png" alt="Facebook"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/odnoklassniki.png" alt="Ok"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/linkedin.png" alt="Linkedin"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/youtube.png" alt="Youtube"class="icon"></a></i>
<i><a href="адрес ссылки" ><img src="/soc_icons/rss.png" alt="Rss"class="icon"></a></i>
</div>


Скачать
Прикрепления: 5335310.png(14Kb) · 5418853.jpg(19Kb)


FeStemBer
Дата: Понедельник, 11.04.2016, 14:11 | Сообщение # 2
Проверенные
Сообщений:294
Награды: 1


Но здесь меню нет, только социальные закладки.
Maryges
Дата: Среда, 20.04.2016, 02:17 | Сообщение # 3
Пользователи
Сообщений:116
Награды: 0


Так поставил, но можно что то и другое подобрать, раз на ссылках все идет, думаю будет оригинально, а не одни социальные кнопки, под меню бы сделать, вот было бы интересно.
Tergran
Дата: Среда, 20.04.2016, 17:31 | Сообщение # 4
Пользователи
Сообщений:83
Награды: 0


Maryges, но а зачем что то придумывать, когда все есть, просто не могу представить этот скрипт как меню.
feliksteg
Дата: Вторник, 10.05.2016, 18:35 | Сообщение # 5
Пользователи
Сообщений:134
Награды: 0


Здесь еще нужно посмотреть какой дизайн сайта. Просто на некоторых смотрится по теме а вот на других как предипили, не о чем.
Форум про uCoz » Всё для web-мастера » Web мастеру » Выезжающие социальные иконки и меню на сайте
Страница 1 из 11
Поиск: