Форма поиска на весь экран / Формы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Каталог: Сниппеты Bootstrap

Категория: Формы

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 2031

Количество символов:

Посмотрели: 5122 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 3.2 / 5 - 77 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: seach, Snippet, формы, Form, сниппет, Bootstrap, Responsive, html, адаптивные

Поделился: BootstrapТема

Добавлено: 2017-05-03 в 14:11

Метка: 1493809904

⇄ ⇅

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Screen Search | BootstrapTema</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
#search {
 position: fixed;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.7);
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 -webkit-transform: translate(0px, -100%) scale(0, 0);
 -moz-transform: translate(0px, -100%) scale(0, 0);
 -o-transform: translate(0px, -100%) scale(0, 0);
 -ms-transform: translate(0px, -100%) scale(0, 0);
 transform: translate(0px, -100%) scale(0, 0);
 
 opacity: 0;
}
#search.open {
 -webkit-transform: translate(0px, 0px) scale(1, 1);
 -moz-transform: translate(0px, 0px) scale(1, 1);
 -o-transform: translate(0px, 0px) scale(1, 1);
 -ms-transform: translate(0px, 0px) scale(1, 1);
 transform: translate(0px, 0px) scale(1, 1); 
 opacity: 1;
}
#search input[type="search"] {
 position: absolute;
 top: 50%;
 width: 100%;
 color: rgb(255, 255, 255);
 background: rgba(0, 0, 0, 0);
 font-size: 60px;
 font-weight: 300;
 text-align: center;
 border: 0px;
 margin: 0px auto;
 margin-top: -51px;
 padding-left: 30px;
 padding-right: 30px;
 outline: none;
}
#search .btn {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: 61px;
 margin-left: -45px;
}
#search .close {
 position: fixed;
 top: 15px;
 right: 15px;
 color: #fff;
 background-color: #428bca;
 border-color: #357ebd;
 opacity: 1;
 padding: 10px 17px;
 font-size: 27px;
}
</style>
</head>
<body>
 <nav class="navbar navbar-default" role="navigation">
 <div class="container-fluid">
 
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Full Screen Search</a>
 </div>
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">Link</a></li>
 <li><a href="#">Link</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider">
 </li>
<li><a href="#">Separated link</a></li>
 <li class="divider">
 </li>
<li><a href="#">One more separated link</a></li>
 </ul>
 </li>
 </ul>
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#search">Search</a></li>
 </ul>
 </div>

 </div>

 </nav>

<div id="search">
 <button type="button" class="close">×</button>
 <form>
 <input type="search" value="" placeholder="enter what you want">
 <button type="submit" class="btn btn-primary">Search</button>
 </form>
</div>

<script>
$(function () {
 $('a[href="#search"]').on('click', function(event) {
 event.preventDefault();
 $('#search').addClass('open');
 $('#search > form > input[type="search"]').focus();
 });
 
 $('#search, #search button.close').on('click keyup', function(event) {
 if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
 $(this).removeClass('open');
 }
 });
});
</script>
</body>
</html>