» »

Вверх панели инструментов для uCoz

Вверх панели инструментов для uCoz

Отличное решение на панель информации, где расположен логотип и статистика сайта, также с правой стороны будет мини профиль. Ставится на место горизонтального меню, плюс она фиксированная, что если вы будете прокручивать, то панель останется на своем месте. Здесь также расположен и поиск по сайту, что можно с уверенностью сказать, что по функциям не уступает другим по формату. Сделана на стилях, где вы сами можете выставить оттенок цвета, чтоб подходил на ваш основной дизайн.

По умолчанию там будут кнопки, как на вход для пользователя, так и на регистрацию. После чего появится мини профиль со всеми функциями для него. Но и Avatar с ним, который можно потом в стилях сделать круглым, но здесь как сам веб мастер решит. Логотип будет на изображение с левой стороны и здесь если панель темная, то светлый оттенок отлично впишется. Больше подойдет на такие площадки, как блог или статьи, не исключаю, что можно поставить на форум, вообще на портал с одним модулем, но и на сайт полноценный можно установить.

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

Давайте рассмотрим как видит гость.

Мини профиль на панели для сайта uCoz

Это уже вы как пользователь, после регистраций.

Красивая панель навигация для сайта

Можно посмотреть в темном оттенке, как будет.

Темный стиль навигация меню для сайта

Приступаем к установке:

хтмл

Код
<div class="header">  
<div class="max_width">  
<div style="-webkit-pointer-events: none; pointer-events: none;">  
</div>  
<div class="h_menu">  
<?if($USER_LOGGED_IN$)?>  

<div class="i_avatar"><div class="i_avatar_in"><?if($USER_AVATAR_URL$)?><a href="$PERSONAL_PAGE_LINK$"></a><img src="$USER_AVATAR_URL$" alt="$USERNAME$"><?else?><img src="ссылка на заглушку нет аватара" alt="Noavatar"><?endif?></div></div>  
<div class="i_pm"><a href="/index/14"></a></div>  

<div class="i_users"><a href="/index/15-1"></a></div>  
<div class="i_addition"><a href="/load/0-0-0-0-1"></a></div>  
<div class="i_cog"><a href="/index/11"></a></div>  
<div class="i_quit"><a href="/index/10"></a></div>  
<?else?>  
<div class="h_sign_over">  
<div class="h_sign">  
<a href="$LOGIN_LINK$">Вход</a>  
</div>  
</div>  

<div class="h_sign_over">  
<div class="h_sign">  
<a href="/register">Регистрация</a>  
</div>  
</div>  
<?endif?>  

</div>  
<a href="/" class="logo" title="">zornet</a>  
<div class="search-bg">  
<form action="/search/" name="searchform" method="get">  
<input type="hidden" name="do" value="search">  
<input type="hidden" name="subaction" value="search">  
<input title="Найти" alt="Найти" value="" type="submit">  
<input id="story" name="q" value="Поиск по сайту..." onblur="if(this.value=='') this.value='Поиск по сайту...';" onfocus="if(this.value=='Поиск по сайту...') this.value='';" type="text">  
</form>  
</div>  
<div class="stat">  
<li>  
Всего на сайте:  
<span class="tnc"><?substr($ONLINE_COUNTER$, 48, strrpos($ONLINE_COUNTER$,"onl2")-48-36)?></span>  
</li>  
</div>  
</div>  
</div>


CSS:

Код
.header {height:74px;width:100%;background:#236999;position:fixed;z-index:9999;padding:10px 0px}  
.max_width {width:1150px;margin:0px auto}  
.h_menu {float:right}  
.i_avatar {float:left;padding-top:23px;padding-left:12px}  
.i_avatar a {width:28px;height:28px; border: 2px solid #E8E8E8;display:inline-block;position:absolute;z-index:4;}  
.i_avatar_in, .i_avatar_in img {width:30px;height:30px;}  
.i_pm {float:left;padding-top:21px;padding-left:12px}  
.i_pm a {width:32px;height:32px;background:url('http://zornet.ru/Ajaxoskrip/AbavAg/i_pm.png');display:inline-block;opacity:0.5}  
.i_pm a:hover {opacity:1}  
.i_users {float:left;padding-top:20px;padding-left:12px}  
.i_users a {width:32px;height:32px;background:url('http://zornet.ru/Ajaxoskrip/AbavAg/i_users.png');display:inline-block;opacity:0.5}  
.i_users a:hover {opacity:1}  
.i_addition {float:left;padding-top:20px;padding-left:12px}  
.i_addition a {width:32px;height:32px;background:url('http://zornet.ru/Ajaxoskrip/AbavAg/i_addition.png');display:inline-block;opacity:0.5}  
.i_addition a:hover {opacity:1}  
.i_cog {float:left;padding-top:20px;padding-left:12px}  
.i_cog a {width:32px;height:32px;background:url('http://zornet.ru/Ajaxoskrip/AbavAg/i_cog.png');display:inline-block;opacity:0.5}  
.i_cog a:hover {opacity:1}  
.i_quit {float:left;padding-top:20px;padding-left:12px}  
.i_quit a {width:32px;height:32px;background:url('http://zornet.ru/Ajaxoskrip/AbavAg/i_quit.png');display:inline-block;opacity:0.5}  
.i_quit a:hover {opacity:1}  

.logo {width:188px;height:37px;position:relative;top:18px;right:0px;display:inline-block;font-size:0px;color:rgba(0,0,0,0);background:url('http://zornet.ru/Aben/Gsa/zartyn/5a1.png') top;float:left}  
.logo:hover {opacity:0.9}  

.h_sign_over {padding-top:22px;display:inline-block;margin-left:10px}  
.h_sign {display:inline-block;background:#3297db;color:rgba(255,255,255,0.5);font-size:13px;padding:7px 16px;-webkit-border-radius: 5px;  
-moz-border-radius: 5px;  
border-radius: 5px;}  
.h_sign a {color:rgba(255,255,255,0.8);text-decoration:none}  
.h_sign a:hover {color:#FFF;text-decoration:none}  

div.search-bg{background: #A99595;border: 1px solid #90B3CC;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;float: left;height: 28px;padding: 0 3px 0 12px;margin-top: 24px;margin-left: 75px;width:233px;}  
div.search-bg input[type="text"]{background:none;border:none;color:#ffffff;display:inline-block;font-style:italic;height:16px;margin-top:5px;padding:0;width:200px;}
div.search-bg input[type="submit"]{background:url('http://zornet.ru/Ajaxoskrip/AbavAg/icons1.png') no-repeat 5px -495px;border:none;float:right;height:28px;vertical-align:top;margin:0;padding:0;width:28px;}  

.stat{float: left; padding: 0 3px 0 12px;margin-top: 24px;margin-left: 155px;}  
.stat li{color: #ffffff;display:block;}  
.tnc{position: relative;top: -6px;color: #fff;background: #e84c3d;padding: 0px 5px;border-radius: 10px;font-size: 12px;min-width: 12px;text-align: center;}

Спасибо пользователю First, который полностью доработал материал.
23.03.2017 Просмотров: 898 Комментарий: (50)

Поделиться в социальных сетях

Материал разместил

Комментарий: 50
Sтранник
Sтранник 23.03.2017 22:261
0
Не плохо 41b

Адаптивный под мобильные аппараты, это информационное табло, вы можете посмотреть здесь, которое все по дизайн точно такое.
Kosten
Kosten 23.03.2017 22:282
0
Это точно, осталось только адаптацию произвести под мобильные аппараты, и будет шикарно смотреться на сайте, здесь главное можно самому что то поменять, но и мини профиль, реально красиво вписался.
Sтранник
Sтранник 23.03.2017 22:373
0
Статистику кто онлайн, у себя тоже можно ставить. )))
Kosten
Kosten 23.03.2017 22:445
0
Можно поставить кто онлайн, но нужно понимать, если онлайн много будет, как то не красиво смотрится будет. А вот информер, кто сегодня зарегистрировался, мало место займет.
Kolinkor
Kolinkor 23.03.2017 22:424
0
Интересно, а почему информационная панель, а это потому, что нет горизонтального меню. Но так здорово сделали, хотя статистика на верху, это не новшество, но все же здесь идет.
Kosten
Kosten 23.03.2017 22:456
0
Но а как еще назвать, это панель, на ней информация, пусть даже логотип, остальное идет функцией.
First
First 23.03.2017 22:467
0
Можете глянуть на тестовом, пару дней ещё повесит qwa.ucoz.site
tsakonter
tsakonter 23.03.2017 23:059
0
First, это тестовый сайт? Просто там вид материала не, чего такой, ты не собираешься его в сеть скидывать?
First
First 23.03.2017 23:0710
0
Конечно же тестовый. А вид материалов есть в сети. Просто подправлю его не много и отдам как материал.
Kosten
Kosten 23.03.2017 23:1911
0
Значит в сети кривой или просто опять доработка своя?
First
First 23.03.2017 23:3312
0
В сети

Правильно
Kosten
Kosten 23.03.2017 23:5813
0
Понятно, здесь лучше подождать рабочую версию.
Scheme
Scheme 23.03.2017 23:028
0
Кнопки входа поменять, или сделать более яркими, но что то подобное уже встречал на сайте.
Kosten
Kosten 23.03.2017 23:5914
0
Да здесь можно просто надписи оставить и сделать красиво стилями.
trem200
trem200 24.03.2017 01:0415
0
Как я понял это фиксированная шапка, так как проверял на тестовом сайте, и при прокрутке страницы он всегда виден, а так классно смотрится.
Kosten
Kosten 24.03.2017 01:4216
0
Да, она фиксированная, просто забыл указать в описание.
vitsavu
vitsavu 25.03.2017 14:2225
0
Отличное решение.
1 2 3 »
avatar