ZorNet.Ru — сайт для вебмастера » HTML и CSS » Стильно сделан адаптивный верх для uCoz

Стильно сделан адаптивный верх для uCoz

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

Его плюсы, это безусловно адаптация под разные размеры монитора, где также вы сможете его в цветовой гамме вывести под свой дизайн сайта. Все очень просто, вверх создан на стилях, и все выводится в CSS по редактированию цветового оттенка. В профили будут кнопки у которых будет эффект при наведении, они просто будут светлее становиться. И теперь у вас есть возможность поставить на полноценный интернет ресурс, но по мне он больше подойдет для одного модуля, как примет это каталог блог.

Здесь видим как реально будет смотреться на полном экране.

Информационная панель для сайта

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

Панель сайта адаптированная мобильная

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

Копируем код и ставим вверх сайта в самый его потолок.

Код
<div class="header">  
<div class="max_width">  
<div style="-webkit-pointer-events: none; pointer-events: none;">  
</div>  
<div class="h_menu">  
  

<div class="i_avatar"><div class="i_avatar_in"><a href="$PERSONAL_PAGE_LINK$"></a><img src="$USER_AVATAR_URL$" alt="$USERNAME$"><img src="ссылка на заглушку нет аватара" alt="Noavatar"></div></div>  
<div class="i_pm"><a href="$PM_URL$"></a></div>  
<div class="i_users"><a href="$USERS_LIST_URL$"></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="$LOGOUT_LINK$"></a></div>  
  
<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>  
  

</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"></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('/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('/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('/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('/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('/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('/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('/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;}

@media only screen and (max-width: 1150px) {  
.max_width {width: 100%;}  
}  

@media only screen and (max-width: 900px) {  
.stat {display: none;}  
.search-bg {display: none;}  
}  
@media only screen and (max-width: 600px) {  
.logo {display: none;}  
.h_menu {margin-right: 30px;}  
}


Рассмотрим этот стиль:

Код
.h_menu {margin-right: 30px;}

Когда экран узкий, то иногда профиль или у кого как, это может и поиск быть, то он будет не по центру. И здесь он как раз отвечает за отступ, где вы уже сами выставляете по центру, чтоб смотрелось корректно.

Большое спасибо пользователям First и waak, которые полностью довели его до ума, а точнее до рабочей версий.
26 Марта 2017 Загрузок: 12 Просмотров: 2082 Комментариев: (12)

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

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

Оставь свой отзыв

Комментарии: 12
Kolinkor
Kolinkor 26 Марта 2017 18:171
0
Хорошо получилось, таких файлов бы по больше.
Сафрон
Сафрон 26 Марта 2017 19:142
0
Можно было просто заметить этот материал, но здесь видней кто размещает, но что доведен до ума, это хорошо, уже поставил посмотреть, не думал, что немного добавленных стилей такое делают.

Но здесь, если у вас не адаптирован сам сайт, то незачем ставить.
Kosten
Kosten 26 Марта 2017 19:263
0
Но решил новый материал создать, нужно было просто в темном цвете сделать, но это в стилях каждый может вывести. А так сейчас не нужна шапка по сути и вместо ее как раз информационное табло такое поставить можно, если говорить о блоге.
Kolinkor
Kolinkor 26 Марта 2017 20:084
0
А если добавить информер, сколько за сутки зарегистрировались, это адаптацию нужно переделывать, или все она сделано и можно добавлять или поиск по сайту на что то другое сменить.
First-1
First-1 26 Марта 2017 20:547
+2
Ну если ты хочешь заменить кто на сайте на новых задень так меняй

Код
<div class="stat">     
<li>     
Всего на сайте:     
<span class="tnc"><?substr($ONLINE_COUNTER$, 48, strrpos($ONLINE_COUNTER$,"onl2")-48-36)?></span>     
</li>     
</div>


на

Код
<div class="stat">     
<li>     
Всего на сайте:     
<span class="tnc">$TODAY$</span>     
</li>     
</div>
и в адаптивность лезть не нужно

Ну а если хочешь добавить что-то свое, так просто добавь класс в медиа запрос
К примеру:

Код
@media only screen and (max-width: 900px) {     
.stat {display: none;}     
.search-bg {display: none;}
.ВАШ КЛАСС {display: none;}     
}
Kolinkor
Kolinkor 26 Марта 2017 21:1111
0
Вот бы сразу все в материале расписать по полочкам, но видно это не блог, а просто файл.
Плюс!
VIP9514
VIP9514 26 Марта 2017 20:405
0
Чем отличается адаптивность от адаптации ?
Kosten
Kosten 26 Марта 2017 20:486
0
Адаптация как понимаю. это с другого CMS идет, а адаптивность, это на мобильные аппараты, вообщем сам запутался.)
VIP9514
VIP9514 26 Марта 2017 20:558
0
Совершенно верно. Не путайте слова и их понятия :)
Адаптивность - Это поддержка всех разрешений экрана (включая мобильные девайсы)

Адаптация - В случае WEB, это относится к натяжке элементов с одной CMS на другую.

Значит как я понимаю, данное меню было адаптировано с другой CMS?
Scheme
Scheme 26 Марта 2017 21:029
0
Думаю здесь из за ключевого слова, просто многие не обращают внимание, и адаптация сравни с шаблоном идет.
VIP9514
VIP9514 26 Марта 2017 21:0910
0
В таком случае писать заголовок надо правильно, а именно: "Адаптивный вверх сайта для ucoz", дабы не вводить в заблуждение пользователей
Kosten
Kosten 26 Марта 2017 21:2412
0
Спасибо за просвещение, все исправил. чтоб пользователя в блудняк не заводить.
avatar