Раскрывающаяся кнопка ПОИСК
Действие кнопки - поиск по сайту (в коде your_website заменить на адрес своего сайта)
Изначально находится в неактивном (disabled) состоянии и имеет вид
При наведении на кнопку курсора мыши (состояние hover) слева открывается поле для ввода текста. Кнопка активируется только после введения в поле не менее двух символов.
CODE:
1) Стили кнопки добавить в файл стилей style.css (рекомендую) или в файл index.php внутри элемента head
STYLE Действие кнопки - поиск по сайту (в коде your_website заменить на адрес своего сайта)
Изначально находится в неактивном (disabled) состоянии и имеет вид
При наведении на кнопку курсора мыши (состояние hover) слева открывается поле для ввода текста. Кнопка активируется только после введения в поле не менее двух символов.
CODE:
1) Стили кнопки добавить в файл стилей style.css (рекомендую) или в файл index.php внутри элемента head
2) В нужное место кода страницы добавить код кнопки, можно также позиционировать по горизонтали (у меня - на 8% от правого края)
CODE of BUTTON
3) Чтобы иконка поиска (лупа) отображалась, в код должна быть подключена библиотека иконок Font Awesome: внутри элемента head необходимо вставить ссылку
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"rel="stylesheet">
4) Чтобы кнопка работала корректно (активировалась только после заполнения поля), в код должна быть подключена библиотека jQuery: в header-е перед закрывающимся тегом head или в footer-е перед закрывающимся тегом body должен быть скрипт
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
</script>
----------------------------------------------------------------
Естественно, размер, цвет, слово "Поиск" можно изменять по вкусу и желанию ;-)