Всем привет! сегодня решил выложить на сайт меню в стиле нового вк
Данное меню является частью полного шаблона в стиле вк который я решил сделать для uCoz но после решил бросить так как потерял интерес но удалить его рука не поднялась и я решил разбить его на несколько частей и выложить на сайт
Вид меню
Установка
Заходим в панель управления управление дизайном верхняя часть и ставим код ниже
Код
<div class="header">
<div class="max_width">
<ul>
<li class="logo">
<a href="/"><span>TALANTLEV</span></a>
</li>
<li class="poiscHead"><div class="ffbsok">
<form onsubmit="search();return false;" method="post" action="/load/" id="searchform">
<input id="story" type="text" name="query" placeholder="Поиск" class="searchform" autocomplete="off">
<input type="hidden" name="a" value="2"><input class="srch_btn" type="image" src="img/search.png">
</form>
</div></li>
<li class="profil"><a href="/INDEX/8-$USER_ID$">
<span>$USERNAME$</span>
<?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" class="top_profile_img"><?else?><img src="ССЫЛКА НА КАРТИНКУ НЕТ АВАТАРА" class="top_profile_img"><?endif?>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</a></li>
<div id="clr"></div>
</ul>
</div>
</div>
<div class="clon"></div>
В коде выше есть такая строчка
Цитата
"ССЫЛКА НА КАРТИНКУ НЕТ АВАТАРА"
Замените её на ссылку которая будет выводится если у пользователя нет аватара
Если вам нужно добавить пункты меню то вам нужно просто скопировать пример ниже и добавить после кода поиска
Код
<li><a href="Ссылка">Текст ссылки</a></li>
Хотя наверное для удобства я сам добавлю пару ссылок для примера
вот данный код уже ссылками
Пример
Код
<div class="header">
<div class="max_width">
<ul>
<li class="logo">
<a href="/"><span>TALANTLEV</span></a>
</li>
<li class="poiscHead"><div class="ffbsok">
<form onsubmit="search();return false;" method="post" action="/load/" id="searchform">
<input id="story" type="text" name="query" placeholder="Поиск" class="searchform" autocomplete="off">
<input type="hidden" name="a" value="2"><input class="srch_btn" type="image" src="img/search.png">
</form>
</div></li>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
<li><a href="">Ссылка</a></li>
<li class="profil"><a href="/INDEX/8-$USER_ID$">
<span>$USERNAME$</span>
<?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" class="top_profile_img"><?else?><img src="ССЫЛКА НА КАРТИНКУ НЕТ АВАТАРА" class="top_profile_img"><?endif?>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</a></li>
<div id="clr"></div>
</ul>
</div>
</div>
<div class="clon"></div>
В таблицу стилей в самый конец добавим код
Код
.max_width {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 125;
height: 42px;
background: #4a76a8;
}
.clon {
height: 42px;
display: block;
width: 100%;
}
.header ul li {
float: left;
padding: 0 10px;
height: 42px;
}
.header ul li a {
display: block;
padding: 8px 0;
clear:both;
color: #FFF;
font-size: 13px;
line-height: 26px;
}
.header ul li:hover {
background: rgba(0,0,0,.1);
}
li.logo {
width: 150px;
}
li.logo span {
display: block;
line-height: 26px;
color: #FFF;
font-size: 16px;
float: left;
}
li.logo:hover {
background: none;
}
li.profil {
float: right!important;
}
li.profil .top_profile_img {
width: 28px;
height: 28px;
border-radius: 14px;
margin: 0 10px;
float: left;
}
li.profil span {
float: left;
}
li.profil a i {
font-size: 11px;
color: rgba(255,255,255,.5);
}
li.poiscHead:hover {
background: none!important;
}
.ffbsok {
position: relative;
}
.searchform::placeholder {color: #8FADC8;}
.searchform {
width: 200px;
border: none;
border-radius: 20px;
overflow: hidden;
padding: 7px 20px;
padding-left: 40px;
margin: 7px 0;
background: #224B7A;
}
.searchform:focus, .searchform:focus::placeholder {
background: #FFF;
color: #434343;
}
.srch_btn {
position: absolute;
top: 14px;
left: 10px;
z-index: 2;
cursor: pointer;
}
Теперь сохраняем чистим кеш и не забываем скачать архив с картинкой которую нужно добавить в файловый менеджер на сайт в папку img
waak 
