Плавающая кнопка меню от Kanavas
Предлагаю вам интересное меню разработанное в стиле Material design от Kanavas.
Material Design - это корпоративный стиль корпорации Google.

Меню очень просто установить. Можно впихнуть в глобальный блок или на отдельную страницу. По вашему выбору. Конечно можно переделать под себя и радовать свои глаза.



Установка


CSS:



Код
.menu_br {
  position: fixed;
  bottom: 0px;
  right: -15px;
}

.absolute-center {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  text-align: center;  
  font-size: 18px!important; color: #fff;
}
.menu_drop {
  position: absolute;
  bottom: 15px;
  right: 30px;
}
.menu_list {
  margin: 0 0 20px;
  padding: 0 0 0 0px;
  list-style: none;
  opacity: 0;
  transition: opacity .2s ease-out;
  display: none;
}
.menu_drop:hover .menu_list {
  opacity: 1; display:block;
}
.menu_item {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 15px 0;
  cursor: pointer;
  background-color: #f0f0f0;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
}
.menu_item > a img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.menu_yellow {
  background-color: #d4a717;
}
.menu_green {
  background-color: green;
}
.menu_orange {
  background-color:orange;
}
.menu_crimson {
  background-color:crimson;
}
.menu_blue {
  background-color: #3c80f6;
}

.menu_item:hover > .menu_label {
  opacity: 1;
}
.menu_btn {
  position: relative;
  width: 45px;
  height: 45px;
  float: right;
  cursor: pointer;
  background-color: #3080e8;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
}
.menu_btn:hover .menu_label {
  opacity: 1;
}
.menu_label {
  position: absolute;
  top: 14px;
  right: 115%;
  padding: 4px 8px;
  font-size: 14px;
  color: #fff;
  background-color:rgba(48, 128, 232, 0.7);
  border-radius:50px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .2s ease-out;
}

Html код:



Код
<div class="menu_br">
  <div class="menu_drop">
  <ul class="menu_list">
  <li class="menu_item">
  <span class="menu_label">$USERNAME$</span>
  <a href="/index/8-$USER_ID$"><img src="$USER_AVATAR_URL$" alt="" /></a>
  </li>
  <li class="menu_item menu_orange">
  <span class="menu_label">Пользователи</span>
  <a href="/index/15"><i class="absolute-center fa fa-user"></i></a>
  </li>
  <li class="menu_item menu_green">
  <span class="menu_label">Сообщения</span>
  <a href="/index/14"><i class="absolute-center fa fa-paper-plane-o"></i></a>
  </li>
  <li class="menu_item menu_crimson">
  <span class="menu_label">Подписки</span>
  <a href="load/0-0-0-0-17"><i class="absolute-center fa fa-star-o"></i></a>
  </li>
  <li class="menu_item menu_blue">
  <span class="menu_label">Настройки</span>
  <a href="/index/11"><i class="absolute-center fa fa-cog"></i></a>
  </li>
  <li class="menu_item menu_yellow">
  <span class="menu_label">Выйти</span>
  <a href="/index/10"><i class="absolute-center fa fa-sign-out"></i></a>
  </li>
  </ul>
  <div class="menu_btn">
  <span class="menu_label">
  Меню
  </span>
  <i class="absolute-center fa fa-bars"></i>
  </div>
</div>
</div>

Иконки взяты из сайта Fontawesome.


Вот и все. Должно получиться так:


Всего комментариев: (3)

kosten
в 17:10, 02 Апр 16
Но здесь все оригинальное.. чем нравится этот сайт.
VeL
в 15:19, 31 Янв 16
Наверное это первый отличный материал на сайте
Kanavas
в 15:59, 31 Янв 16
Здравствуйте. У каждого свое мнение! Спасибо ^_^
_LOGGED_IN$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

Случайные материалы

Простой плагин для создания анимации на сайте
Простой плагин для создания анимаци
Плавающая кнопка меню от Kanavas
Плавающая кнопка меню от Kanavas
Интересная замена фотографий «Нет аватара» для uCoz
Интересная замена фотографий «Нет а
Функциональный слайдер с автопрокруткой
Функциональный слайдер с автопрокру
Время в профиле с последнего посещения сайта
Время в профиле с последнего посеще
CSS3 ButtonGenerator
CSS3 ButtonGenerator