Блог Сергея Князева

Скрипты
Красивое меню для социальных сетей

Красивое меню для социальных сетей

18.04.20164310
Почему бы не добавить интересные моменты в свой дизайн? Давайте рассмотри два варианта анимированного меню на CSS. Это меню хорошо впишется в светлые сайты. Вы легко сможете заменить иконки на свои.

Установка

1. Для начала вам необходимо вставить блок div в нужное место на сайте. Например на странице материала под текстом.

Код
<div class="menu">
<a href="#"><i class="fb"> </i></a>
<a href="#"><i class="sk"></i></a>
<a href="#"><i class="go"></i></a>
<a href="#"><i class="tv"></i></a>
<a href="#"><i class="ty"></i></a>
<a href="#"><i class="yt"></i></a>
  </div>

Для того, что бы ссылки стали работать, необходимо заменить "#" на нужный вам адрес.
2. Теперь необходимо прописать CSS стили.

Для 1 варианта

Код
.menu {
  border-bottom: 1px solid #ccc;
  text-align: center;
  height: 60px;
  overflow: hidden;
  margin: 10px auto;
  width: 490px;
  font-size: 3em;
  cursor: default;
}
.menu i{
  position: relative;
  top: 20px;
  transition: .2s ease;
  margin-left: 10px;
  width: 70px;
  height: 90px;
  display: block;
  float: left;
}
.menu i:hover {
  top: -10px;
}
  </div>

При выборе этого варианта, кнопки будут выпадать снизу.

Для 2 варианта

Код
.menu {
  border-top: 1px solid #ccc;
  text-align: center;
  height: 60px;
  overflow: hidden;
  margin: 10px auto;
  width: 490px;
  font-size: 3em;
  cursor: default;
}
.menu i {
  position: relative;
  bottom: 30px;
  transition: .2s ease;
  margin-left: 10px;
  width: 70px;
  height: 74px;
  display: block;
  float: left;
}
.menu i:hover {
  top: -10px;
}

Теперь нам осталось прописать стили на сами кнопки:

Код
.fb{ background: url('/icon/fb.png') center no-repeat; }
.sk{ background: url('/icon/79/skype.png') center no-repeat; }
.tv{ background: url('/icon/twitter.png') center no-repeat; }
.go{ background: url('/icon/go.png') center no-repeat; }
.ty{ background: url('/icon/tumblr.png') center no-repeat; }
.yt{ background: url('/icon/youtube.png') center no-repeat; }

Осталось лишь скачать иконки с моего блога и залить их в папку "icon"
На этом всё. Надеюсь вам пригодится данный вариант меню.

Нашли ошибку в тексте?
Выделите её и нажмите Ctrl+Enter. Сообщая мне об ошибке вы помогаете сделать мой блог лучше.
Автор материала
Сохраните в социальную сеть
Комментарии (0)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.