Простой дизайнерский финт с добавлением удобства поисковой строки на своем сайте uCoz системы. Стандартная форма поиска крепится вторым слоем наложения и прикрепляется к верху браузерного окна, таким образом при перемещение по вертикали сайта поисковая строка остается на том же месте.
В форму так же можно добавить блок авторизации пользователя, или другого что необходимо под другой пользователя обязательно.
Оформление окна поиска можно изменять при помощи стиля и классов, по своему усмотрению под цвет и дизайна ресурса.
Установка:
Это в Нижнюю часть сайта:
Код
<script type="text/javascript">
var startPos = $('.poick_os').offset().top;
var leftPos = $('.poick_os').offset().left;
$(window).scroll(function() {
if($(this).scrollTop() > startPos){
$('.poick_os').removeClass('p_top').addClass('p_bottom ').css('left', leftPos);
}
if($(this).scrollTop() < startPos){
$('.poick_os').removeClass('p_bottom ').addClass('p_top').css('left', leftPos);
}
});
</script>
Это в нужное место:
Код
<div class="poick_os p_top">
<form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" >
<input class="poick_pole"type="text" name="q" maxlength="30" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}"/>
<input class="poick_knopka" type="submit" value="Найти" />
<input type="hidden" name="t" value="0" />
</form>
</div>
Это в CSS:
Код
/* Движущаяся форма поиска для uCoz
------------------------------------------*/
.poick_os,
.content_os {
width: 440px;
margin: 0 auto;
padding: 15px 30px 15px 30px;
}
.p_bottom {
top: 0;
position:fixed;
}
.poick_os {
float:left;
background:#F3F3F3;
border-bottom: 1px solid #CAD1DB;
}
.poick_os input {
float:left;
margin:0px;
vertical-align:middle;
font:11px Verdana,Arial,Helvetica,sans-serif;
}
.poick_pole {
color:#555;
width:349px;
height:15px;
padding:5px 10px;
border: 1px solid #CAD1DB!important;
border-right:none!important;
}
.poick_pole:focus {
box-shadow:inset 0px 0px 3px #ccc!important;
-webkit-box-shadow:inset 0px 0px 3px #ccc!important;
-moz-box-shadow:inset 0px 0px 3px #ccc!important;
}
.poick_knopka {
width:70px;
height:27px;
cursor:pointer;
border:1px solid #d6982f!important;
color:#73450d!important; text-shadow:1px 1px 1px #fff7e5!important;
background: #febf4e!important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fed76e), color-stop(1, #ffbd4b))!important;
background: -moz-linear-gradient(top, #fed76e 1%, #ffbd4b 100%)!important;
background: -o-linear-gradient(#fed76e, #ffbd4b)!important;
}
.poick_knopka:active {
box-shadow:inset 0px 0px 3px #bb8323!important;
-webkit-box-shadow:inset 0px 0px 3px #bb8323!important;
-moz-box-shadow:inset 0px 0px 3px #bb8323!important;
}
.poick_knopka:hover {
background:#fedc77!important;
}
Меню сайта
Меню сайта
