Выдвижной поиск для сайта uCoz


Выдвижной поиск для сайта uCoz

421
9 из 10
Проголосовало: 8






На днях меня попросили модифицировать один выдвижной поиск...

Суть скрипта заключается в следующем: В левой части сайта будет плавающая панель поиска. При наведении на данный поиск, он выезжает полностью и становится полностью видимым, а если мышку убрать, уезжает данный поиск обратно. А теперь при клике на поле поиска если даже убираешь мышку панель скрываться не будет, пока пользователь нажмет вне поля данного поиска.

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

Установка:

1) HTML-код вставляем куда душе угодно:

Код

<div class="s_panel">  
  <div id="ipanls" style=" border-top: 1px solid rgba(0, 0, 0, 0.05);">  
  <div class="searchs">  
  <form action="/search/" method="get" onsubmit="this.sfSbm.disabled=true">  
  <input type="text" class="one_text" maxlength="50" name="q" placeholder="Поиск по сайту...">  
  <input type="submit" class="one_button transition-opacity" name="sfSbm" value="">  
  </form>  
  </div>  
  </div>  
  </div>


2) Далее вставляем CSS-код:

Код

<style>  
  /* Выдвижной поиск */  
  .s_pane2 {position: fixed;box-shadow: 0px 8px 35px rgba(0,0,0,0.24);text-align: center; top: 100px; left: 0 !important; opacity:1 !important; background: url("http://webo4ka.ru/Ucoz8/roseglossback.jpg") repeat; border: 0px solid #e2e2e2;width: 195px; height: auto; padding: 0px 0px 0px 0px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s;-o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0;border-radius: 0 3px 3px 0;z-index: 2;}  
  .s_panel:hover { left: 0; opacity:1; }  
  .s_panel { position: fixed;box-shadow: 0px 8px 35px rgba(0,0,0,0.24);text-align: center; top: 100px; left: -140px;background: url("http://webo4ka.ru/Ucoz8/roseglossback.jpg") repeat; border: 0px solid #e2e2e2;width: 195px; height: auto; padding: 0px 0px 0px 0px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s;-o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0;border-radius: 0 3px 3px 0;z-index: 2;opacity:0.6; }  
  #ipanls {font: 10px Open Sans;color:#777;padding:4px 10px;background:rgba(0, 0, 0, 0.1);margin-bottom:0px;}  
  .searchs ::-webkit-input-placeholder {color:#fff;}  
  .searchs ::-moz-placeholder {color:#fff;}/* Firefox 19+ */  
  .searchs :-moz-placeholder {color:#fff;}/* Firefox 18- */  
  .searchs :-ms-input-placeholder {color:#fff;}  
  input.one_text {background: rgba(0, 0, 0, 0.2);font: 10px Open Sans; color: #fff; border: 0px solid rgba(0, 0, 0, 0.02);width: 140px;-webkit-border-radius: 3px !important;-moz-border-radius: 3px !important;border-radius: 3px !important; margin: 2px -10px 2px -12px; height: 20px; padding:0 5px;}  
  input.one_button {display:none;}  
  /* Выдвижной поиск */  
  </style>


3) Ну и не забываем JS-код:

Код

<script>  
  $('.one_text').click(function(){$(".s_panel").addClass("s_pane2");});  
  $(document).click(function(w){if($(w.target).closest(".s_pane2").length) return; $(".s_pane2").removeClass("s_pane2"); w.stopPropagation();});  
  </script>


установка окончена...
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://webo4ka.ru/
  • Всего комментариев: 1

-D-I-N-I-S-
0
-D-I-N-I-S- написал: Написано 04 Апреля 2016 в 16:02
Комментарий №1
Класс! Спасибо большое))

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2111
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • LeKcUs написал:
  • Да понятное дело что можно еще кучей вариантов вывести ну данный вариант вывода используеться если у Вас есть уже офрмление <a href а Вы хотите что то новое по этому есть такой вариант <span и только...

    dry
  • Marishka написал:
  • Тоже нефига не поняли wink ... В любой элемент можно вставить onclick и в нем все прописать. (Window.open, location и т.д)
  • LeKcUs написал:
  • biggrin biggrin biggrin biggrin
    Да все очень просто теперь можно ставить место ссылок стандартных типа вот таких
    Код
    <a href="/load/" rel="v:url" property="v:title">Раздел uCoz</a>


    вот такие новые (через span).

    Код
    <span class="rotate greentext" onclick="InWin('/load/')">Раздел uCoz</span>


    Не всем нужно но пригодиться комуто! Мне нужно было вот и решил поделиться! dry
  • Вовчик написал:
  • что-то я нефига не понял
  • LeKcUs написал:
  • В самый конец просто добавьте вот такие теги... И у Вас не будет больше возникать вопросов! cry

    <!-- </popup> -->$POWERED_BY$<!-- <popup> -->
    Последние темы
    Опрос
    424
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 3
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: