• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Выезжающие социальные иконки и меню на сайте
Выезжающие социальные иконки и меню на сайте
Kosten
Понедельник, 11 Апреля 2016 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Думаю вы не раз видели на любом ресурсе, где вы наводите на социальную ссылку и она выезжает, а так ее видно на половину. Также можно сделать и с меню, смотря какие кнопки будут стоять. Здесь будет представлено 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 (14.0 Kb) · 5418853.jpg (19.3 Kb)
Страна: (RU)
FeStemBer
Понедельник, 11 Апреля 2016 | Сообщение 2
Оффлайн
Проверенные
Сообщений:355
Награды: 1
Но здесь меню нет, только социальные закладки.
Страна: (RU)
Maryges
Среда, 20 Апреля 2016 | Сообщение 3
Оффлайн
Пользователи
Сообщений:142
Награды: 0
Так поставил, но можно что то и другое подобрать, раз на ссылках все идет, думаю будет оригинально, а не одни социальные кнопки, под меню бы сделать, вот было бы интересно.
Страна: (RU)
Tergran
Среда, 20 Апреля 2016 | Сообщение 4
Оффлайн
Пользователи
Сообщений:101
Награды: 0
Maryges, но а зачем что то придумывать, когда все есть, просто не могу представить этот скрипт как меню.
Страна: (RU)
feliksteg
Вторник, 10 Мая 2016 | Сообщение 5
Оффлайн
Пользователи
Сообщений:134
Награды: 0
Здесь еще нужно посмотреть какой дизайн сайта. Просто на некоторых смотрится по теме а вот на других как предипили, не о чем.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Выезжающие социальные иконки и меню на сайте
  • Страница 1 из 1
  • 1
Поиск: