Full Screen Search with Bootstrap
Last active
January 7, 2019 11:00
-
-
Save prosantamazumder/06e090486196837b7b2785fb8a4ffc0e to your computer and use it in GitHub Desktop.
Full Screen Search
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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="" placeholder="SEARCH KEYWORD(s)" /> | |
<button type="submit" class="btn btn-primary">Search</button> | |
</form> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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; | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$black: #333; | |
$white: #fff; | |
$gray: #777; | |
$limegreen: limegreen; | |
html { | |
background-color: $gray; | |
} | |
body { | |
padding: 40px 0px; | |
background-color: $gray; | |
} | |
#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; | |
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; | |
} | |
.btn { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
margin-top: 61px; | |
margin-left: -45px; | |
background-color: $limegreen; | |
border: black; | |
} | |
.close { | |
position: fixed; | |
top: 15px; | |
right: 15px; | |
color: #fff; | |
background-color: limegreen; | |
border-color: green; | |
opacity: 1; | |
padding: 10px 17px; | |
font-size: 27px; | |
} | |
&.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; | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment