Стильно сделан адаптивный верх для 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, которые полностью довели его до ума, а точнее до рабочей версий. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 12 | |
|
| |
