» »

Вверх сайта с меню плюс мини профиль uCoz


Вверх сайта с меню плюс мини профиль uCoz

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

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

Теперь о минусах:

1) Сам реально хотел и возможно поставлю на сайт, только остается его адаптировать под мобильные операторы.

2) Цвет если менять, то вам придется на фотощоп менять один дизайн, а точнее круг, где установлен Avatar и лучше с начало там поменять, а потом уже все остальное.

3) Нет поиска по сайту, но просто он не поместился не куда, здесь или меню убирать и ставить туда, и оно также по центру будет, или оставить как есть, все на ваше усмотрение.



Установка:

Но с начало скопируем код и поместим его вместо шапки, так как это у нас и будет полный вверх сайта, но можно сделать, чтоб в низу еще изображение были, но здесь вы сами как то разберетесь. как вам лучше.

Код
<header>
<div id="headerTop">
<div class="main hidden">
<div id="headerLeft"><a href="http://zornet.ru/" class="logo">ZorNet.Ru</a></div>
<div id="headerRight">

<?if($LOGIN_FORM$)?><a href="/index/3" class="h_reg_link" title="Регистрация">Регистрация</a>
<a href="javascript://" rel="nofollow" onclick="new _uWnd('LF',' ',-250,-127,{autosize:0,closeonesc:1,resize:1},{url:'/index/40'});return false;" class="h_login_link">Войти</a><?endif?>  
<div class="profile">
<?if($LOGOUT_LINK$)?>
<div class="profile_avatar">
<a href="/index/8" title=""><span class="round"></span><?if($USER_AVATAR_URL$)?><img class="userAvatar" title="$USERNAME$" src="$USER_AVATAR_URL$" border="0"><?else?><img class="userAvatar" title="$USERNAME$" src="http://zornet.ru/SKRIPT/Kransel/noavatar.png" border="0"><?endif?></a></div>  
<a href="/index/14" class="m_link" title="Личные сообщения"><i></i></a>
<a href="/index/15" class="m_link m_users" title="Пользователи"><i></i></a>
<a href="/load/0-0-0-0-1" class="m_link m_add" title="Добавить материал"><i></i></a>
<a href="/index/11" class="m_link m_set" title="Редактирование личной информаций"><i></i></a>
<a href="/index/10" class="m_link m_quit" title="Выход сайта"><i></i></a>
<?endif?>  
</div>
   
</div>
<div id="headerCenter">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/forum">Форум</a></li>
<li><a href="/index/0-3">Контакты</a></li>
</ul>
</div>
</div>
</div>
</header>


CSS:

Код
/*=== Vxod na sait ===*/  
.h_search_right{text-align:right}
.h_login_link, .h_login_link:hover{text-transform:uppercase;font-weight:bold;color:#FFF;border:2px solid #FFF;text-decoration:none;display:inline-block;padding:5px 14px;padding-top:7px;margin-right:12px;margin-top:16px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.h_login_link:hover{background:#154567;color:#FFF;}
.h_reg_link, .h_reg_link:hover{text-transform:uppercase;font-weight:bold;color:#FFF;text-decoration:none;display:inline-block;padding:5px 14px;padding-top:7px;margin-right:12px;margin-top:16px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;line-height: 35px;}

.left { float: left; }
.right { float: right; }
.hidden { overflow: hidden; }
.main {width: 1000px; margin: 0px auto;height: 80px;}

#headerTop_main {position: relative; height: 360px; display: block; font-size: 13px; background:#5073a2 center;}
  #headerTop_main a { color: #FFFFFF; }
  #headerTop_main #headerCenter a:hover { text-decoration: underline; }
#headerTop {height: 80px; display: block; font-size: 13px;background: #1D587F;}
  #headerLeft { float: left; }
  #headerRight { float: right;height: 70px;}
  #headerTop a { color: #ffffff; }
  #headerTop #headerCenter a:hover { text-decoration: underline; }
  a.logo {position: relative;height: 80px; color: #fff !important; font-family: 'Lintel'; font-size: 30px;line-height: 70px; display: block; float: left;}
  #headerAuth {position: relative; float: right; height: 24px; }
  #headerAuth ul { list-style-type: none; height: 24px; }
  #headerAuth ul li { float: left; height: 60px; line-height: 57px; margin-left: 21px; }
  #headerCenter {height: 80px;overflow: hidden;}
  #headerCenter ul { list-style-type: none;height: 60px;float: left;left: 40%;margin: 10px; position: relative;font-size: 15px; font-weight: bold;}
  #headerCenter ul li { height: 60px; line-height: 57px; position: relative; right: 50%; float: left; overflow: hidden; padding-left: 11px; padding-right: 11px; }
  #headerProfile {float: right;height: 80px; overflow: hidden;}

/*Profel mini*/
.profile {margin-top: 23px;height:30px;font-size:13px;float:right}
.profile_avatar {width:30px;height:30px;overflow:hidden;float:left;margin-right:7px;margin-top:2px}
.profile_avatar .round {position:absolute;display:inline-block;background:url('http://image.prntscr.com/image/7b1bc8e8f801451e8a7f196af1938323.png');width:30px;height:30px}
.profile_avatar img {width:30px}
.rerr {background:#f5583e;color:#FFF;padding:10px 20px;text-align:center;margin-bottom:10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.m_link span {font-family:Tahoma;font-size:11px;text-align:center;width:16px;display:inline-block;margin-left:18px;margin-top:-4px;position:absolute;padding:1px 0px;color:#FFF;background:#3297db;z-index:2;-webkit-border-radius: 14px;-moz-border-radius: 14px;border-radius: 14px;}
.m_link {float:left;width:25px;height:25px;padding:5px 6px;padding-left:7px;display:inline-block;}
.m_link i {opacity:0.9;width:25px;height:25px;display:inline-block;background-image:url('http://zornet.ru/ZORNET/drental/menu.png')}
.m_link:hover i {opacity:1}
.m_users i {background-position:0 -25px}
.m_add i {background-position:0 -50px}
.m_set i {background-position:0 -75px}
.m_quit i {background-position:0 -100px}


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

Источник:

Каркас: Интернет
Профиль: Yraaa.ru
12.07.2016 Просмотров: 512 Комментарий: (10)

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

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

Комментарий: 9
tsakonter
tsakonter 12.07.2016 20:261
0
Сейчас основном такой вверх сайта делают, только вот мини профиль другой. Так не чего. не когда бы раньше не подумал, что горизонтальное меню, будет шапкой. Но и новые шаблоны это позволяют сделать.
Kosten
Kosten 12.07.2016 20:372
0
Но почему только одно меню. но можно заметить, что шире иногда делают, и на главную можно выставить во всей красоте. Это можно понять, если на файл переходишь, что это красота вверх шапки не нужна, а одна как раз такой вверх останется.
FeStemBer
FeStemBer 12.07.2016 20:393
0
Костен, а что просто не напишешь также домен, а убрать "Главная" но здесь же все понятно, что на главную как раз выводить будет.
Kosten
Kosten 12.07.2016 20:434
0
Здесь нужно выводить и делать по размеру больше, так что лучше так оставить и понятливее.
Maryges
Maryges 12.07.2016 21:257
0
Все правильно, нужно специально выводить, чтоб по вверх не было полосы, и логотип нарисовать, будет намного красивее.
Сопрано
Сопрано 12.07.2016 20:535
0
Но адаптацию нужно наверно делать уже на сайте, когда установлен этот вверх сайта, просто так наверно можно сделать, как то же делают вид материала, а так не чего, хотя немного всего изменено.
Tergran
Tergran 12.07.2016 21:236
0
Здесь сделать адаптацию и оставить для мобильного "аппарата" только доменное имя и будет нормально, профиль слишком широкий будет для некоторых.
Kosten
Kosten 12.07.2016 21:348
0
Есть там какой то малый размер, точно как у меня, думал что только у меня как приоритет остался, такое, привет из того века, а нет еще видать пользуется хоть не спросом, но есть много кто предпочитает небольшой корпус.
feliksteg
feliksteg 14.07.2016 00:279
0
Мне вот тоже логотип бы больше понравился. А так не чего сказать не могу, просто простая сборка, главное чтоб правильно собрана была. Как помню у профиля была функция, что ты наводить и с низу показывается надпись, за что отвечает. Но здесь наверно от этого сайта стоит и нет такого, но для этого финт есть. Можно вообще красивые подсказки сделать.
avatar