KodeInfo | Learning resources for web and mobile development

Bootstrap Search Box

November 3rd, 2014 13:30:07 by Irfan Iqbal Comments(0) - Views(7992)

In this section let us design a fullscreen search box using bootstrap .As you are already familiar with bootstrap let me show you the design if you are new to bootstrap go to this link .

Now let us see the design .

It is fullscreen search box so click on search to view the effects .

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>search box</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<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');
					}
				});

				$('form').submit(function(event) {
					event.preventDefault();
					return false;
				})
			});
		</script>
		<style>
			body {
				padding: 40px 0px;
			}

			#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>

		<div class="container">
			<nav class="navbar navbar-default" role="navigation">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<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>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<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><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav>
		</div>

		<div id="search">
			<button type="button" class="close">
				×
			</button>
			<form>
				<input type="search" value=""  />
				<button type="submit" class="btn btn-primary">
					Search
				</button>
			</form>
		</div>
</html>

Thanks switch to another posts for more .

Kodeinfo.

Author

  • Irfan Iqbal
    Irfan Iqbal

    Irfan is a web developer and consultant from India. He is the co-founder of KodeInfo, the PHP and Laravel Community . In the meantime he follows other projects, manages everything related to marketing and seo for kodeinfo , works as a freelance backend consultant for PHP applications and studies IT Engineering . He loves to learn new things, not only about PHP or development but everything.

Related

WHY USE A FRAMEWORK OVER PLAIN PHP

WHY USE A FRAMEWORK OVER PLAIN PHP
read more

GETTING STARTED WITH LARAVEL

GETTING STARTED WITH LARAVEL
read more

UNDERSTANDING LARAVEL STRUCTURE

UNDERSTANDING LARAVEL STRUCTURE
read more

UNDERSTANDING LARAVEL ROUTES

UNDERSTANDING LARAVEL ROUTES
read more

comments powered by Disqus