На сайтах часто можно встретить выдвижную форму поиска, это и удобно и красиво. Пользователь кликает по полю поиска и панель выдвигается.
HTML разметка формы поиска.
Форма поиска задаётся с помощью тега <form>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Выдвижная форма поиска</title>
</head>
<body>
<div class="wrapper">
<h1>Кликните по значку поиска справа</h1>
<form>
<input class="search" placeholder="Поиск" type="text">
</form>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Выдвижная форма поиска</title>
</head>
<body>
<div class="wrapper">
<h1>Кликните по значку поиска справа</h1>
<form>
<input class="search" placeholder="Поиск" type="text">
</form>
</div>
</body>
</html>
В браузере мы увидим вот такую простенькую форму.
Стилизация формы поиска.
В файле style.css пишем стили. За форму поиска отвечает класс search.
body{
background: #ccc;
}
.wrapper {
margin: 0 auto;
width: 760px;
overflow: hidden;
padding: 10px;
}
.search {
width: 0px;
height: 30px;
padding: 5px 10px 5px 45px;
float: right;
border: solid 3px #999;
background: #eee url(images/search.png) no-repeat 10px center;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
background: #ccc;
}
.wrapper {
margin: 0 auto;
width: 760px;
overflow: hidden;
padding: 10px;
}
.search {
width: 0px;
height: 30px;
padding: 5px 10px 5px 45px;
float: right;
border: solid 3px #999;
background: #eee url(images/search.png) no-repeat 10px center;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
На данном этапе наша форма поиска будет неподвижной.
Делаем форму поиска выдвижной.
Для этого используем псевдокласс focus.
В этом случае при клике по значку поиска форма выдвигается влево.
.search:focus {
width: 700px;
border: 3px solid #f00;
background-color: #fff;
outline: none;
}
width: 700px;
border: 3px solid #f00;
background-color: #fff;
outline: none;
}
Вот что у нас должно получиться при клике по значку поиска.
