Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- HTML:
- <ul class="nav navbar-nav navbar-right">
- <li><a href="#search">Search</a></li>
- </ul>
- CSS:
- #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;
- background-color: limegreen;
- border: black;
- }
- #search .close {
- position: fixed;
- top: 15px;
- right: 15px;
- color: #fff;
- background-color: limegreen;
- border-color: green;
- opacity: 1;
- padding: 10px 17px;
- font-size: 27px;
- }
- JS:
- $(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;
- })
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement