• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Панель управление Venta с профилем для uCoz (Горизонтальное)
Панель управление Venta с профилем для uCoz
Kosten
Суббота, 02 Апреля 2016 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
Вообщем этот скрипт можно переменить как горизонтальное меню а также панель для блога. В него входит логотип с правой стороны и безусловно мини профиль от yraaa.ru, который просто был немного сделано под другой оттенок цвета.

Так видит гость сайта.



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



Вы можете поставить туда или добавить навигацию, а также поиск по сайту, так же вывести личные сообщение, но вообщем что вам нужно.

Вверх сайта:

Код
<div class="header">
<div class="max_width">
<div style="-webkit-pointer-events: none; pointer-events: none;">
</div>
<div class="h_menu">
<div class="h_sign_over">
<?if($LOGIN_FORM$)?><div class="h_sign">
<a href="javascript://" rel="nofollow" onclick="new _uWnd('LF',' ',-250,-110,{autosize:1,closeonesc:1,resize:1},{url:'/index/40'});return false;">Вход</a>
</div>
</div>
<div class="h_sign_over">
<div class="h_sign">
<a href="/index/3">Регистрация</a>
</div><?endif?><?else?>
<?if($USER_LOGGED_IN$)?>
<div class="profile">
<div class="profile-menu">
<a href="$PERSONAL_PAGE_LINK$" class="profile-button" title=""><span class="profile-avatar"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" alt="" title=""><?else?><img src="http://webmaster-ucoz.ru/master/avatar.png" alt="" title=""><?endif?></span> $USERNAME$ <i></i></a>
<div class="profile-list">
<div class="profile-list-in">
<a href="$PERSONAL_PAGE_LINK$" title="">Мой профиль</a>
<a href="/index/14" title="">Сообщения</a>
<a href="/index/15" title="">Пользователи</a>
<a href="/load/0-0-0-0-1" title="">Добавить материал</a>
<a href="/index/11" title="">Настройки</a>
<a href="/index/10" class="last" title="">Выйти</a>
</div>
</div>
</div>
</div>
<?endif?>
</div>
</div>
<a href="/" class="logo" title="Главная"></a>
</div>
</div>


CSS:

Код
.header_ucoz {float:left;height:20px;cursor:default}
.header {height: 70px;width:100%;background:#236999;position:fixed;z-index:9999;padding:10px 0px}
.header_2 {height:74px;}
.max_width {width:1100px;margin:0px auto}

.h_menu_link a {display:inline-block;background:url('http://zornet.ru/CSS-ZORNET/Gresan/Sertsa/menu.png') 10px 10px no-repeat;width:52px;height:52px;position:absolute;right:20px;top:10px;z-index:7}
.h_menu_pda a {text-decoration:none;display:block;padding:20px 30px;font-size:16px;color:#6a7376;border-bottom:1px solid #dedede;background:#fff}
.h_menu_pda a:hover {text-decoration:none;background:#efefef}
.h_menu_link, .h_menu_pda {display:none}

.logo {width:105px;height:51px;position:relative;top:12px;right:0px;display:inline-block;font-size:0px;color:rgba(0,0,0,0);background:url('http://zornet.ru/CSS-ZORNET/Gresan/Sertsa/logo.png') top;float:left}
.logo:hover {opacity:0.9}
.redpoint {position:absolute;top:50px;right:10px;background:#FF0000;z-index:2;width:10px;height:10px;display:inline-block;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;}

.h_logo a.m_logo {display:inline-block;width:45px;height:74px;background:url('http://zornet.ru/CSS-ZORNET/Gresan/Sertsa/logo.png') 0px -8px}
.h_logo a.m_logo:hover {opacity:0.8}
.h_menu {float:right}

.h_sign_over {padding-top:22px;display:inline-block;margin-left:10px}
/* url('/img/fingerprint.png') 7px 9px no-repeat */
.h_sign {display:inline-block;background: #4491C5;color:rgba(255,255,255,0.5);font-size:13px;padding:7px 16px;-webkit-border-radius: 30px;
-moz-border-radius: 30px;border-radius: 10px;border: 1px solid #BFBFBF;}
.h_sign a {color:rgba(255,255,255,0.8);text-decoration:none}
.h_sign a:hover {color:#FFF;text-decoration:none}

.profile-menu {position:relative!important}
.profile-button s {display:inline-block;z-index:9;background:#3297db;font-size:10px;margin-right:10px;margin-left:1px;line-height:14px;padding:2px 6px;text-decoration:none;-webkit-border-radius: 55px;-moz-border-radius: 55px;border-radius: 55px;}
.profile-button, .profile-button:hover {display:inline-block;color:#fff;position:relative;line-height: 34px;padding-left: 45px;padding-right: 18px;text-decoration:none}
.profile-button i {position:absolute;right:0px;top:14px;width: 0;height: 0;border-left: 3px solid transparent;border-right: 3px solid transparent;border-top: 4px solid rgba(255,255,255,0.7);}
.profile-avatar, .profile-avatar img {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.profile-avatar {display:inline-block;width:54px;height: 55px;position:absolute;top:-0px;left:0px;border-radius: 20px;}
.profile-avatar img {width: 33px;height: 33px;object-fit:cover;vertical-align:bottom;background:#fff;border:2px solid #fff;}
.profile-menu:hover .profile-list {visibility:visible;}
.profile-list {position:absolute;width: 150px!important;right:0px!important;top: 30px;padding-top:18px;visibility:hidden;z-index:9;}
.profile-list-in {background: #235C84;width: 200px!important;max-width: 200px!important;padding:3px 0px;box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.45);-webkit-border-radius: 5px;-moz-border-radius: 5px;/* border-radius: 5px; */}
.profile-list-in a {display:block;padding:10px 20px;text-decoration:none;border-bottom: 1px solid #989696;font-size:12px;color: #F9F9F9;}
.profile-list-in a:hover {color: #BBBBBB;}
.profile-list-in a.last {border-bottom:0px !important}
.profile-list-in a i {background:#3297db;color:#fff;font-style:normal;font-size:10px;padding:2px 6px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}
.profile {margin-top: -5px;height:30px;font-size: 14px;float:right}
.profile_avatar, .profile_avatar img {-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;}
.profile_avatar {width:24px;height:24px;overflow:hidden;float:left;margin-right:7px;margin-top:2px;border:2px solid #fff}
.profile_avatar img {width:24px;height:24px;object-fit:cover}
Прикрепления: 3385534.jpg (16.8 Kb) · 4031126.jpg (39.2 Kb)
Страна: (RU)
Сопрано
Суббота, 02 Апреля 2016 | Сообщение 2
Оффлайн
Vip
Сообщений:462
Награды: 4
Что такая широкая панель?
Страна: (RU)
Kosten
Суббота, 02 Апреля 2016 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
Но для этого есть стили, чтоб уровнять, как нужно.
Страна: (RU)
Сафрон
Суббота, 02 Апреля 2016 | Сообщение 4
Оффлайн
Vip
Сообщений:224
Награды: 1
Что Костен заняться не чем. biggrin
Страна: (RU)
Kosten
Суббота, 02 Апреля 2016 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
Сафрон, да хотел залепить, не горизонтальное меню, а чисто только панель, так функций прописать, да что то на пол пути не пошло, а точнее заказ сбил, и потом уже как то не до этого стало, вот просто решил залить, кто то и доведет до ума, хотя полностью рабочая машина.
Страна: (RU)
Scheme
Воскресенье, 03 Апреля 2016 | Сообщение 6
Оффлайн
Пользователи
Сообщений:157
Награды: 1
Тут поиск поставить и больше не чего не нужно, горизонтальное меню не идет как основа, всегда на этот счет есть вертикальное.
Страна: (RU)
Kosten
Пятница, 15 Июля 2016 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
Еще бы стразу делать адаптацию на этот вверх сайта. biggrin
Страна: (RU)
FeStemBer
Пятница, 15 Июля 2016 | Сообщение 8
Оффлайн
Проверенные
Сообщений:355
Награды: 1
Kosten, нужно делать сразу на сайте, чтоб с ним вместе было.
Страна: (RU)
tsakonter
Суббота, 16 Июля 2016 | Сообщение 9
Оффлайн
Пользователи
Сообщений:220
Награды: 0
Если светлый логотип поставить, то явно будет намного круче.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Панель управление Venta с профилем для uCoz (Горизонтальное)
  • Страница 1 из 1
  • 1
Поиск: