bar-reaktor.ru

"Помощь в развитии Сайта"     "Торрент- трекер от Наших сайтов"     "Архив сайта"

Выбрать дизайн:
Страница 1 из 11
Модератор форума: XemorDio 
Форум » Для вебмастеров » Графика для сайта » Скрипты сталкер для Ucoz » Верхняя панель для пользователей v.1.0
Верхняя панель для пользователей v.1.0
CURIOUS Дата: Вт, 26.06.2012, 20:23:24 | Сообщение # 1

Смотритель
В Зоне Реактора с 11.03.2011
Сообщений: 2
Заслуги в Зоне Реактора


Здесь все в пользу тега div, и плюс добавлена выпадающая ячейка с мини профилем пользователя .
ИТАК...
[TableGrey]Шаг 1 - Установим HTML:[/TableGrey]
Будем использовать лишь html-css и никаких скриптов .
Code
<!-- Начало тегов Верхняя панель для пользователей -->   
<div id="top_bar">  
   <div id="top_bar_os">  
   <div class="td_l">  
   <a href="$HOME_PAGE_LINK$"><img alt="home" title="На главную страницу сайта" src="http://www.center-dm.ru/ucoz/user_bar/v2/icon_home.png"></a>  
   </div>   
     
   <div class="td_l">  
   <form class="poick_os1" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" >  
   <input class="poick_pole1"type="text" name="q" maxlength="45" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}"/>  
   <input class="poick_knopka1" type="submit" value="Найти" />  
   <input type="hidden" name="t" value="0" />  
   </form>   
   </div>   
     
   <div class="menu_p td_p">  
   <a href="#" class="drop">Меню</a>  
   <div class="dd_menu">  
   <span class="dd_ugol2"></span>   
   <ul class="menu_top">  
   <li><a href="http://www.center-dm.ru/news/nemnogo_o_css_3/1-0-8">Проверка</a></li>  
   <li><a href="http://www.center-dm.ru/news/nemnogo_o_css_3/1-0-8">Проверка</a></li>  
   <li><a href="http://www.center-dm.ru/news/nemnogo_o_css_3/1-0-8">Проверка</a></li>  
   <li><a href="http://www.center-dm.ru/news/nemnogo_o_css_3/1-0-8">Проверка</a></li>  
   <li><a href="http://www.center-dm.ru/news/nemnogo_o_css_3/1-0-8">Проверка</a></li>  
   <li><a href="http://www.center-dm.ru/news/nemnogo_o_css_3/1-0-8">Проверка</a></li>  
   <li><a href="http://www.center-dm.ru/news/nemnogo_o_css_3/1-0-8">Проверка</a></li>  
   <li><a href="http://www.center-dm.ru/news/nemnogo_o_css_3/1-0-8">Проверка</a></li>  
   </ul>   
   </div>  
   </div>   

<?if($USER_LOGGED_IN$)?>   
   <div class="menu_p td_p">  
   <a href="#"><img class="mini_avatar" alt="аватар" title="Вы зашли на сайт как $USERNAME$" src="http://www.center-dm.ru/site/no_avatar.jpg"></a>  
   <div class="dd_menu_p">  
   <span class="dd_ugol1"></span>   
   <div class="mini_profil">  

<a title="Мой профиль" href="$PERSONAL_PAGE_LINK$">  
<?if($USER_AVATAR_URL$)?>  
   <img class="mp_avatar" alt="аватар" title="Вы зашли на сайт как $USERNAME$" src="$USER_AVATAR_URL$">  
<?else?>  
   <img class="mp_avatar" alt="аватар" title="Вы зашли на сайт как $USERNAME$" src="http://www.center-dm.ru/site/no_avatar.jpg">  
<?endif?>   
</a>  
     
   <ul class="mp_info">  
   <li class="border_v"><span class="bold">$USERNAME$</span></li>  
   <li>Твой IP: <span class="bold">$IP_ADDRESS$</span></li>  
   <li>Ты в группе: <span class="bold">$USER_GROUP$</span></li>  
   <li>Ты здесь: <span class="bold">$USER_REG_DAYS$-й день</span></li>  
   <li class="border_n"><a href="/index/11">Настройки профиля</a></li>   
   </ul>   
   <a href="$LOGOUT_LINK$" title="Выход" class="knopka_vixod"><!--<s5164>-->Выход<!--</s>--></a>  

   </div>   
   </div>  
   </div>   

   <div class="td_p">   
   <a href="$PM_URL$" title="Почта" class="knopka_pochta">Почта ($UNREAD_PM$)</a>  
   </div>   

<?else?>  

   <div class="td_p">   
   <a href="$REGISTER_LINK$" title="Регистрация" class="knopka_reg"><!--<s3089>-->Регистрация<!--</s>--></a>  
   </div>   
     
   <div class="td_p">   
   <a href="$LOGIN_LINK$" title="Вход" class="knopka_vxod"><!--<s3087>-->Вход<!--</s>--></a>  
   </div>   

<?endif?>  
     
   </div>   
</div>   
<!-- /Конец тегов Верхняя панель для пользователей -->

[TableGrey]Шаг 2 - Установим CSS:[/TableGrey]
Теперь нам следует установить css стили:
Code
/* Верхняя панель для пользователей v.1.0  
  ============================================================================*/  
#top_bar {  
   position:fixed;  
   z-index:997;  
   top:0;   
   min-width:100%;  
   height:35px;  
   background: #353535;  
   border-top: 1px solid #000;  
   box-shadow: 0px 0px 5px #111;  
}  

#top_bar_os {  
   padding:0px;  
   width:1024px;  
   height:35px;  
   margin: 0px auto;  
}  

#top_bar_os a{  
   text-decoration:none;  
}  

.td_l {  
   float:left;  
   padding:5px 10px 0px 10px;  
   height:30px;  
   background:url(http://www.center-dm.ru/ucoz/user_bar/v1/li_linia.gif) no-repeat right;  
}   

.td_p {  
   float:right;  
   height:35px;  
   padding: 0px 0px 0px 0px;   
   background:url(http://www.center-dm.ru/ucoz/user_bar/v1/li_linia.gif) no-repeat right;  
}   

/* Форма поиска синяя кнопка   
  ------------------------------------------*/  
.poick_os1 input {  
   font:11px Verdana,Arial,Helvetica,sans-serif!important;   
   margin:0px!important;   
   vertical-align:middle!important;   
}  

.poick_pole1 {  
   color:#a7a7a7!important; text-shadow: 1px 1px 1px #252525!important;   
   padding:4px 4px!important;   
   width:300px!important;   
   height:15px!important;   
   background:#484848!important;   
   border: 1px solid #252525!important;   
}  
     
.poick_pole1:focus {  
   background:#545454!important;   
}   
     
.poick_knopka1 {  
   color:#bfbfbf!important; text-shadow: 1px 1px 1px #460953!important;   
   padding: 0px 10px!important;   
   height:25px!important;   
   background: #1d367d!important;   
   border: 1px solid #0c123b!important;   
   cursor:pointer!important;   
}  
     
.poick_knopka1:hover {  
   background:#3b3b97!important;   
}   

/* Выпадающее меню  
  ------------------------------------------*/  
.menu_p {  
   display:block;  
   position:relative;   
}  

.menu_p .drop {  
   float:left;  
   color:#66B427;  
   text-shadow:1px 1px 1px #000;font-weight: 700;   
   padding: 10px 17px 0px 10px;   
   margin-right: 10px;   
   background:url(http://www.center-dm.ru/ucoz/user_bar/v1/drop1.png) no-repeat right 15px;  
}  

.menu_p:hover .drop{  
   background:url(http://www.center-dm.ru/ucoz/user_bar/v1/drop2.png) no-repeat right 15px;  
   color:#2784b4;   
}   

.dd_ugol1,  
.dd_menu {  
   width:240px;  
}   

.dd_ugol2,  
.dd_menu_p {  
   width:300px;  
}   

.dd_menu,   
.dd_menu_p {  
   float:left;  
   position:absolute;  
   margin:0px auto;  
   background:#4c4c4c;  
   padding:5px;  
   left:-999em;  
   z-index:998;  
   border:1px solid #111;   
   -moz-border-radius:5px 5px 5px ;  
   -webkit-border-radius:5px 5px 5px ;  
   border-radius:5px 5px 5px ;  
   box-shadow: 0px 0px 5px #111;  
}   
     
.menu_p:hover .dd_menu,  
.menu_p:hover .dd_menu_p{  
   top:40px;   
   left:auto;  
   right:0px;   
}  

.dd_ugol1,   
.dd_ugol2 {   
   height:25px;  
   float:left;  
   position:absolute;   
   top: -25px;  
   right: 25px;  
   background:url(fon_ugol_1.png) no-repeat;  
   background-position: right bottom;   
}  

.dd_ugol1 {right:2px!important;}  
.dd_menu_os {width:218px;}  
.mini_profil {width:278px;}  

.dd_menu_os,  
.mini_profil {   
   overflow:hidden;  
   background:#eee;  
   border: 1px solid #353535;   
   margin:0;  
   padding:10px;  
}  

/* Вертикальное меню  
  ------------------------------------------*/  
.menu_top {   
   margin:0;  
   padding:0;  
   list-style:none;   
   overflow:hidden;  
   width:238px;  
   background:#eee;  
   border: 1px solid #353535;   
}  

.menu_top li a:link,  
.menu_top li a:visited {  
   display:block;  
   text-align:left;   
   color:#555;  
   width:100%;  
   padding:4px 10px;  
   border-bottom: 1px solid #d0d0d0;  
   border-top: 1px solid #fff;   
}  

.menu_top li a:hover {  
   background:#fff;  
}   

/* Мини профиль  
  ------------------------------------------*/  
.mini_avatar {  
   width:35px;  
   height:35px;  
}  

.mp_avatar {  
   float:right;   
   margin: 0px 0px 0px 0px;   
   width:50px;  
   height:50px;  
   border: 3px solid #666;  
}  

.mp_info {  
   float:left;  
   margin:0;  
   padding:5px;  
   width:200px;  
   list-style:none;   
}  

.mp_info a:link,  
.mp_info a:visited{color:#2784b4; font-weight: bold;}  
.mp_info a:hover {color:#66B427;}  

.mp_info li {  
   font: 10px Verdana,Arial,Helvetica, sans-serif;  
   padding: 2px 0px;   
   border-top: 1px solid #fff;  
   border-bottom: 1px solid #B7B7B7;  
}  

.border_v {border-top:none!important;}   
.border_n {border-bottom:none!important;}   
.bold {font-weight: bold;}  

/* Кнопки  
  ------------------------------------------*/  
.knopka_vxod:link,  
.knopka_vxod:visited,  
.knopka_reg:link,  
.knopka_reg:visited {  
   float:left;  
   font-weight: bold;  
   color:#66B427;  
   text-shadow: 1px 1px 1px #000;  
   padding: 10px 10px 0px 10px;   
}  

.knopka_vxod:hover,   
.knopka_reg:hover {color:#2784b4;}  

.knopka_pochta:link,  
.knopka_pochta:visited{  
   float:left;  
   font-weight: bold;  
   color:#2784b4;  
   text-shadow: 1px 1px 1px #000;  
   padding: 10px 10px 0px 10px;   
}  
.knopka_pochta:hover {color:#66B427;}  

.knopka_vixod:link,  
.knopka_vixod:visited{  
   float:right;   
   font: 9px Verdana,Arial,Helvetica, sans-serif;  
   color:#F1EDED; text-shadow: 1px 1px 1px #000;  
   background:#353535;  
   padding: 2px 7px 3px 7px;   
   margin: 5px 4px 0px 0px;   
}  
.knopka_vixod:hover {background:#444;}

[Table]В rar архиве, вы найдёте все изображения которые были использованны в примере, на этом всё...[/Table]
СКАЧАТЬ


Сталкер Ушёл из жизни, он навсегда остался в зоне
Дополнительная информация

Немного о CURIOUS..
Зарегистрирован: 11.03.2011
Группа: Свободные Сталкеры
Страна: Российская Федерация
город: Волгоград
 
Форум » Для вебмастеров » Графика для сайта » Скрипты сталкер для Ucoz » Верхняя панель для пользователей v.1.0
Страница 1 из 11
Поиск:

Сегодня в Баре - Реактор

Кто был:
Легенда условных обозначений : Призрак, Администратор, Модератор, Проводник, Сталкеры, Чистое небо, Тёмные, Свобода, Наёмники, Нейтралы, Военные, Долг, Монолит, Заблокированные .

Последние сообщения:

Чат

Активисты Форума:

Нужные темы:


Radio Унесённых Сталкером
Тот, кто хвастается, что приобрел множество друзей, никогда не имел ни одного друга.
CMIT               (03.04.2016)
kapa               (09.01.2014)
Dimon02022               (08.11.2011)
Strelok               (01.11.2014)
ULTRA               (04.09.2015)
tyman21               (09.11.2013)
garwas               (12.11.2011)
Этот               (01.08.2015)
WULF               (22.10.2015)

Пришедшие в Бар:


Банан2000               (23.06.2017)
myc               (22.06.2017)
shmel               (18.06.2017)
Француз               (16.06.2017)
Стервятник               (16.06.2017)
Digger_Crem               (16.06.2017)
Яндекс.Метрика