|
Выезжающие социальные иконки и меню на сайте
|
|
| Kosten | Понедельник, 11 Апреля 2016, 00:38 | Сообщение 1 |
| Думаю вы не раз видели на любом ресурсе, где вы наводите на социальную ссылку и она выезжает, а так ее видно на половину. Также можно сделать и с меню, смотря какие кнопки будут стоять. Здесь будет представлено 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>
Скачать
| | Страна: (RU) |
| |
| FeStemBer | Понедельник, 11 Апреля 2016, 14:11 | Сообщение 2 |
| Но здесь меню нет, только социальные закладки.
| | Страна: (RU) |
| |
| Maryges | Среда, 20 Апреля 2016, 02:17 | Сообщение 3 |
| Так поставил, но можно что то и другое подобрать, раз на ссылках все идет, думаю будет оригинально, а не одни социальные кнопки, под меню бы сделать, вот было бы интересно.
| | Страна: (RU) |
| |
| Tergran | Среда, 20 Апреля 2016, 17:31 | Сообщение 4 |
| Maryges, но а зачем что то придумывать, когда все есть, просто не могу представить этот скрипт как меню.
| | Страна: (RU) |
| |
| feliksteg | Вторник, 10 Мая 2016, 18:35 | Сообщение 5 |
| Здесь еще нужно посмотреть какой дизайн сайта. Просто на некоторых смотрится по теме а вот на других как предипили, не о чем.
| | Страна: (RU) |
| |
