13.03.2012, 09:25 | |||||
Панель внизу сайтаСегодня мы будем создавать нижнюю панель для пользователей вашего сайта, в которой установим нужные функций сайта, во-первых, чтобы они всегда были перед глазами посетителей, во-вторых, чтобы они быстро помогали передвигаться по сайту. Всё решение будет состоять из 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="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> </li> <?if($USER_LOGGED_IN$)?> <li class="bb_li uzer_li"> <div class="info_uzer"> <a href="$PERSONAL_PAGE_LINK$" > <?if($код$)?> <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> <!-- /Конец тегов Нижняя панель для пользователей --> хочу обратить внимание, что в данном решении, я использовал специальные условные операторы: Code <?if($USER_LOGGED_IN$)?>ячейка №1<?else?>ячейка №2<?endif?> где в ячейки №2 расположены ссылки на вход и регистрацию, а в ячейки №1 расположен мини профиль. В 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;} Вот в целом и всё, благодаря разным решениям для вашего сайта, мы соединили их воедино и получили вот такую нижнею панель для ваших пользователей. Материал взят с сайта infoscript.ru
Теги: Скачать Панель внизу сайта
| |||||
Категория: Скрипты uCoz | Просмотров: 4021 | Добавил: antisept | Рейтинг: 5.0/4 | | |||||
Теги: |
Всего комментариев: 7 | ||||||
|
Кроме того, материал перепечатывали с сайта на сайт, ставили... файл можно найти на Вэбочке (название tables_tablichki_dli_foruma.js).