Плавающая кнопка меню от 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$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

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

Классическая форма входа для сайтов с uID авторизацией
Классическая форма входа для сайтов
Онлайн сервисов для нанесения водяных знаков на изображения
Онлайн сервисов для нанесения водян
Face Your Manga – сервис для создания аватарок
Face Your Manga – сервис для создан
Смена фона страницы в зависимости от времени суток
Смена фона страницы в зависимости о
Смена ника без ПУ.
Смена ника без ПУ.
Mail Interface
Mail Interface