• Карта сайта
  • Статьи
  • Видео уроки
  • Заказать
  • Support
Рекомендуем
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Все для Ucoz » Скрипты для Ucoz » Нижняя панель для пользователей v.1.0
Нижняя панель для пользователей v.1.0
AndWeBarДата: Понедельник, 12.03.2012, 21:04 | Сообщение # 1
Модератор NIKMC-I
Группа: Проверенные
Сообщений: 8
Награды: 2
Репутация: 6
Статус: Offline


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

1)

Всё решение будет состоять из html-css, поэтому мы не будем использовать какие-либо скрипты или дополнительные библиотеки jQuery:

- создадим основной контейнер div с идентификатором bottom_bar
- в него поместим списки ul li, которым пропишем классы bb_li, right и menu_niz
- в списки li добавим следующие функции, на главную страницу, форму поиска, мини профиль, вход, регистрация и выпадающее меню

Code

<!-- Начало тегов Нижняя панель для пользователей -->     
     <div id="bottom_bar">     
     <ul id="bb_ul">     
     <li class="bb_li">     
     <a href="$HOME_PAGE_LINK$"><img alt="home" title="На главную страницу сайта" src="http://demo-dm.ucoz.ru/icon_home.png"></a>     
     </li>     
     <li class="bb_li">     
     <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>     
     </li>     
         
     <li class="bb_li right menu_niz">     
     <div class="menu_rightn menu_n">     
     <a href="#" class="drop">Меню</a>     
     <div class="dd_menu">     
     <span class="dd_ugol1"></span>     
     <ul class="blogroll3">     
     <li><a href="#">Проверка</a></li>     
     <li><a href="#">Проверка</a></li>     
     <li><a href="#">Проверка</a></li>     
     <li><a href="#">Проверка</a></li>     
     <li><a href="#">Проверка</a></li>     
     <li><a href="#">Проверка</a></li>     
     <li><a href="#">Проверка</a></li>     
     <li><a href="#">Проверка</a></li>     
     </ul>     
     </div>     
     </div>     
     </li>     
         
     <?if($USER_LOGGED_IN$)?>     
     <li class="bb_li uzer_li">     
     <div class="info_uzer">     
     <a href="$PERSONAL_PAGE_LINK$" >     
     <?if($USER_AVATAR_URL$)?>     
     <img class="vxod_avatar" alt="аватар" title="Вы зашли на сайт как $USERNAME$" src="$USER_AVATAR_URL$">     
     <?else?>     
     <img class="vxod_avatar" alt="аватар" title="Вы зашли на сайт как $USERNAME$" src="http://www.center-dm.ru/site/no_avatar.jpg">     
     <?endif?>     
     </a>     
     <span><a href="$PM_URL$">Почта ($UNREAD_PM$)</a> </span>     
     <span><a href="$LOGOUT_LINK$" title="Выход"><!--<s5164>-->Выход<!--</s>--></a></span>     
     </div>     
     </li>     
     <?else?>     
     <li class="bb_li right">     
     <div class="vxod_reg">     
     <a href="$LOGIN_LINK$" title="Вход" class="login-link"><!--<s3087>-->Вход<!--</s>--></a>     
     </div>     
     </li>     

     <li class="bb_li right">     
     <div class="vxod_reg">     
     <a href="$REGISTER_LINK$" title="Регистрация"><!--<s3089>-->Регистрация<!--</s>--></a>     
     </div>     
     </li>     
     <?endif?>     
     <li class="bb_li right"></li>     
     </ul>     
     </div>     
     <!-- /Конец тегов Нижняя панель для пользователей -->


2)

В css стилях:
- мы зафиксируем основной контейнер div внизу страницы вашего сайта и пропишем ему фон, тень
- у списков уберём символы вначале тега li и прижмём его к основному контейнеру
- пропишем основные стили выпадающему меню, форме поиска, мини профилю
Code

/* Нижняя панель для пользователей     
     ===============================*/     
     #bottom_bar {     
     position:fixed;     
     min-width:100%;     
     z-index:997;     
     bottom:0;     
     border-top: 1px solid #000;     
     height:35px;     
     background: #353535;     
     box-shadow: 0px 0px 5px #333;     
     }     

     #bb_ul{     
     list-style-type:none;     
     margin-left:auto;     
     margin-right:auto;     
     padding:0px;     
     width:1024px;     
     height:35px;     
     margin: 0px auto 0px auto;     
     }     

     .bb_li{     
     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;     
     }     
         
     /* Форма поиска синяя кнопка     
     ------------------------------------------*/     
     .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_n {     
     float:left;     
     display:block;     
     position:relative;     
     padding:6px 0px;     
     border:none;     
     }     
         
     .menu_n .drop{     
     outline:0;     
     padding-right:17px;     
     color:#66B427;     
     text-shadow:1px 1px 1px #000;     
     font-weight: 700;     
     background:url(http://www.center-dm.ru/ucoz/user_bar/v1/drop1.png) no-repeat right 5px;     
     }     

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

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

     .dd_menu {     
     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_n:hover .dd_menu{     
     left:auto;     
     right:0px;     
     bottom:30px;     
     }     

     .dd_ugol1 {     
     height:25px;     
     float:left;     
     position:absolute;     
     bottom: -25px;     
     right: 20px;     
     background:url(http://www.center-dm.ru/ucoz/user_bar/v1/fon_ugol_1.png) no-repeat;     
     background-position: right top;     
     }     

     .blogroll3 {     
     list-style:none;     
     overflow:hidden;     
     width:238px;     
     background:#eee;     
     border: 1px solid #353535;     
     margin:0;     
     padding:0;     
     }     

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

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

     /* Вход и мини профиль     
     ------------------------------------------*/     
     .vxod_reg {     
     color:#66B427;     
     text-shadow:1px 1px 1px #000;     
     font-weight: 700;     
     padding:6px 0px;     
     }     

     .uzer_li a:link,     
     .uzer_li a:visited,     
     .vxod_reg a:link,     
     .vxod_reg a:visited {color:#66B427;}     
     .uzer_li a:hover,     
     .vxod_reg a:hover {color:#2784b4;}     

     .uzer_li {     
     float:right!important;     
     margin:0!important;     
     padding:0!important;     
     }     

     .info_uzer {     
     color:#66B427;     
     text-shadow:1px 1px 1px #000;     
     font-weight: 700;     
     width:135px;     
     }     

     .info_uzer span {     
     float:left;     
     text-align:left;     
     width:70px;     
     padding: 1px 0px 0px 10px;     
     }     

     .vxod_avatar {     
     float:right;     
     width:35px;     
     height:35px;     
     }     

     /* Дополнительно     
     ------------------------------------------*/     
     img {border: none;}     
     a {text-decoration:none;outline:none}     

     #bottom_bar a:hover img {     
     filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);     
     -moz-opacity: 0.5;     
     opacity: 0.5;     
     filter: alpha(opacity=50);     
     }     

     .left {float:left;}     
     .right {float:right!important; }     
     .clear {clear:left;}


Источник http://center-dm.ru/


Сообщение отредактировал AndWeBar - Вторник, 13.03.2012, 20:37
 
Форум » Все для Ucoz » Скрипты для Ucoz » Нижняя панель для пользователей v.1.0
  • Страница 1 из 1
  • 1
Поиск:


Статистика Форума
Последние темы Лучшие пользователи Новые пользователи

1 Лечение глазных заболеваний германия

МурзикМунечка[1]

2 Как вы смотрите на онлайн казино?

natka-artnatka-art[0]

3 Обмен кнопками и баннерами!

NIKMCNIKMC[11]

4 Угадай игру по скриншоту

andrei01NIKMC[37]

5 Duke Nukem vs Serious Sam

NIKMCNIKMC[0]

6 Правила оформления тем

NIKMCNIKMC[0]

7 Правила клана AKADO_RAVEN

wererowerero[0]

8 Угадай Фильм или что то подобное по скриншоту!

wererowerero[27]

9 Выдвижная кнопка ВКонтакте

NIKMCNIKMC[0]

10 Загадка про доллары

NIKMCphotoshoper[5]

11 Предложения по сайту

NIKMCNIKMC[4]

12 Скрипт статистики сайта под темный дизайн

NIKMCNIKMC[0]

13 радио для сайта LandFM

NIKMCNIKMC[0]

14 ClanWars - статистика CW для ucoz, победы - Поражения

NIKMCNIKMC[0]

15 Игра - Время

NIKMCNIKMC[1]

16 Баги, ошибки на сайте

NIKMCNIKMC[1]

17 Красивый скрипт бесплатной отправки СМС для ucoz

AlekSSanderAlekSSander[0]

18 Меню сайта для темных дизайнов

LookflacoLookflaco[0]

19 Котёнок для сайта - скрипт для укоз

LookflacoLookflaco[0]

20 Новый мини чат

LookflacoLookflaco[0]

21 Состав клана - победы поражения для ucoz

LookflacoLookflaco[0]

22 Форма входа CSS3 & HTML5

LookflacoLookflaco[0]

23 TRANCE РАДИО

LookflacoLookflaco[0]

24 Информер популярных материалов

NIKMCMyLife[1]

25 Удаление личного сообщения by webo4ka

AndWeBarAndWeBar[0]

26 Мини-профиль

MyLifeMyLife[0]

27 Темный мини-чат для uCoz

MyLifeMyLife[0]

28 Новый отличный поск по сайту

MyLifeMyLife[0]

29 Красивое меню для сайта Ucoz

MyLifeMyLife[0]

30 Плеер для проигрывания мп3 на сайте

MyLifeMyLife[0]

Armeez

RUРейтинг: 54 Статьи: 97

Armeez

RUРейтинг: 8 Статьи: 11

Armeez

RUРейтинг: 12 Статьи: 3

Armeez

RUРейтинг: 11 Статьи: 14

Armeez

RUРейтинг: 6 Статьи: 0

Armeez

RUРейтинг: 0 Статьи: 0

Armeez

RSРейтинг: 0 Статьи: 0

Armeez

RUРейтинг: 0 Статьи: 0

Armeez

RUРейтинг: 13 Статьи: 0

Armeez

RUРейтинг: 18 Статьи: 0

Armeez

RUРейтинг: 9 Статьи: 0

Armeez

UAРейтинг: 60 Статьи: 0

Armeez

Рейтинг: 0 Статьи: 0

Armeez

UAРейтинг: 3 Статьи: 4

Armeez

Рейтинг: 0 Статьи: 0

Armeez

UAРейтинг: 0 Статьи: 0

Armeez

RUРейтинг: -3 Статьи: 0

Armeez

EEРейтинг: 0 Статьи: 0

Armeez

RUРейтинг: 0 Статьи: 0

Armeez

UAРейтинг: 9 Статьи: 0

Armeez

RUРейтинг: 0 Статьи: 1

Armeez

RUРейтинг: 0 Статьи: 0

Armeez

Рейтинг: 0 Статьи: 0

Armeez

UAРейтинг: 0 Статьи: 0

Armeez

BYРейтинг: 0 Статьи: 0

Armeez

KZРейтинг: 0 Статьи: 0

Armeez

UAРейтинг: 0 Статьи: 0

Armeez

RUРейтинг: 0 Статьи: 0

Armeez

RUРейтинг: 0 Статьи: 0

Armeez

RUРейтинг: 0 Статьи: 0

21:41 - 08.04.2020

23:04 - 05.12.2019

16:15 - 18.09.2018

01:40 - 29.07.2018

RU13:53 - 05.07.2016

00:41 - 17.06.2016

14:55 - 20.05.2016

UA00:32 - 25.04.2016

00:00 - 25.04.2016

05:03 - 01.12.2015

TK03:18 - 27.07.2015

04:01 - 27.11.2014

RU17:55 - 14.10.2014

11:17 - 19.09.2014

05:53 - 06.09.2014

RU22:10 - 29.04.2014

RU21:41 - 26.03.2014

MD04:05 - 16.03.2014

UA15:43 - 06.02.2014

RU16:55 - 30.01.2014

UA02:11 - 18.12.2013

KZ16:46 - 14.10.2013

AZ11:24 - 07.10.2013

RU14:53 - 16.06.2013

RU12:04 - 09.04.2013

US20:20 - 19.03.2013

17:49 - 19.03.2013

RU19:16 - 18.03.2013

RU20:33 - 23.02.2013

RU18:20 - 17.02.2013

Бесплатный хостинг uCoz