Предлагаю вам интересное меню разработанное в стиле 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.
Вот и все. Должно получиться так: