Наш опрос
Любите ли вы участвовать в опросах?
Всего ответов: 30
Случайный анекдот
10 Идут двое русских по Берлину. Один – другому: – Спорим, что любой немец понимает по-русски? – Да ну! – Ну, смотри. Подходит к первому попавшемуся немцу и говорит: – Поцелуй меня в задницу. – WAS? – Да-да, меня и его тоже.
Статистика
Онлайн всего: 19
Гостей: 19
Пользователей: 0

» Сегодня нас посетили:
» Зарег. на сайте
Всего: 3476
Новых за месяц: 1
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 3
С активностью: 176
Авторизованных: 3296

   Выдвижной поиск по сайту



Как уже ясно из названия, форма поиска будет появляться после щелчка по иконке.

Установка:
Файлы архива закачайте в папку poisk файл менеджера.
В нижнюю часть сайта ставим этот код.
Код
<div class="poisk"><form class="poick_os" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/"><input id="search" class="poick_pole" type="text" name="q" maxlength="45" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}" id="acpro_inp11" autocomplete="off"><script src="/poisk/bgcolor.js" type="text/javascript"></script><span style="position:absolute;right: 10px;top: 6px;font-family: tahoma, sans-serif;font-size: 14px;font-style: normal;font-variant: normal;font-weight: normal;" id="poiskknopka"><img src="/poisk/fe6772a47ea5.png"></span></form></div>


В ксс ставим это
Код
.poisk{
  position:fixed;
  background-image:-webkit-linear-gradient(bottom,#426BFF,#60A5FF);
  background-image:-moz-linear-gradient(bottom,#426BFF,#60A5FF);
  background-image:-o-linear-gradient(bottom,#426BFF,#60A5FF);
  background-image:linear-gradient(bottom,#426BFF,#60A5FF);
  -webkit-box-shadow:0 0 3px black;
  -moz-box-shadow:0 0 3px black;
  -o-box-shadow:0 0 3px black;
  box-shadow:0 0 3px black;
  border:1px solid #404040;
  left:-200px;
  width:240px;
  height:30px;
  border-radius:3px;
  top:100px;
  color:white;
  text-shadow:0 0 3px black;
  -webkit-transition:all 0.4s ease;
  -moz-transition:all 0.4s ease;
  -o-transition:all 0.4s ease;
  transition:all 0.4s ease;
  padding:3px;
  }
  .poisk:hover{
  left:-3px;
  }
  .poisk #search{
  width:175px;
  position:relative;
  top:3px;
  left:5px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border-radius:3px;
  border:1px solid #606060;
  height:26px;
  }
  .poisk:hover #search{
  width:230px;
  }
  #search{
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease;
  transition:all 0.2s ease;
  }
  #search:focus{
  border:1px solid #404040;
  -webkit-box-shadow:inset 1px 1px 3px #ccc;
  -moz-box-shadow:inset 1px 1px 3px #ccc;
  box-shadow:inset 1px 1px 3px #ccc;
  }
  .poisk:hover #poiskknopka{
  display:none;
  }


Скачать архив 0,76 кб Html редактор
Автор: Prosvetekvator
Просмотров: 10837
04.05.2013


Другие статьи почитайка;)
Поделись ссылкой на форумах
Ссылка:
BB-code:
HTML:


« Пред. Выдвижной поиск по сайту След. »

Всего комментариев: 3

1 Алексей Чубаров (Prosvetekvator)
В коде для ксс замените left на right и подставь нужные значения.

01.03.2014 в 18:25 | Перейти к материалу >
-
0
+

2 Devid Gynin (super-gamers)
У меня форма поиска появляется с права а при наводе вылазит с лева. Что делать?

23.12.2015 в 21:26 | Перейти к материалу >
-
0
+

3 Алексей Чубаров (Prosvetekvator)
Нужно отредактировать код который ставится в ксс

30.12.2015 в 19:13 | Перейти к материалу >
-
0
+

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа

Мини-чат
Топ пользователей
Новое на форуме








Комментарии
11.06.2022