Hi friends in this post I am sharing method for Expand Search Bar on click. It is beautiful and smooth html layout and responsive as well. In uses purpose many people want a search box which don’t use much space in website and automatically expand when in use and collapse.
So by keeping these points in mind I am developing a search box which will be expand when we in need of it by clicking search icon given and collapse when not required. In this when we can use this input search box in many place in the website where space is less.
Search Input box is following fluid width so that it can we useful in small media device too as it is a responsive search box.
Let’s get some idea about its technical aspect like like why this is very smooth while expanding and collapsing, here with this html search bar I am using advance CSS transition properties make their movement smooth and flexible.
So without wasting your precious time going to share it code structure with you all.
HTML Code:
1 2 3 4 5 6 7 | <div id="sb-search" class="sb-search"> <form> <input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="search" id="search"> <input class="sb-search-submit" type="submit" value=""> <span class="sb-icon-search"></span> </form> </div> |
CSS Code: Default.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 | /* General Demo Style */ @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); @font-face { font-family: 'codropsicons'; src:url('../fonts/codropsicons/codropsicons.eot'); src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); font-weight: normal; font-style: normal; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body, html { font-size: 100%; padding: 0; margin: 0;float: left; width: 100%; display: block; height: 100%;} /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } body { font-family: 'Lato', Calibri, Arial, sans-serif; color: #eaeaea; background-image: linear-gradient(to right top, #a200ff, #803eff, #5d54fe, #3a61f6, #126beb); background-repeat: no-repeat; } a { color: #FFC500; text-decoration: none; } a:hover, a:active { color: #fff; } /* Header Style */ .main, .container > header { margin: 0 auto; padding: 2em; } .container > header { text-align: center; background: rgba(0,0,0,0.01); } .container > header h1 { font-size: 2.625em; line-height: 1.3; margin: 0; font-weight: 300; } .container > header span { display: block; font-size: 60%; color: #FFC500; padding: 0 0 0.6em 0.1em; } /* Main Content */ .main { max-width: 69em; } .column { float: left; width: 50%; padding: 0 2em; min-height: 300px; position: relative; } .column:nth-child(2) { box-shadow: -1px 0 0 rgba(0,0,0,0.1); } .column p { font-weight: 300; font-size: 2em; padding: 0; margin: 0; text-align: right; line-height: 1.5; } .column a { border: 2px solid #FFC500; padding: 6px 27px; display: inline-block; margin: 20px 0; border-radius: 30px; font-size: 25px; box-shadow: 5px 5px 15px rgba(0,0,0,0.2); } .column a:hover { border-color: #fff; } /* To Navigation Style */ .codrops-top { background: #566472; background: rgba(255, 255, 255, 0.2); text-transform: uppercase; width: 100%; font-size: 0.69em; line-height: 2.2; } .codrops-top a { padding: 0 1em; letter-spacing: 0.1em; color: #fff; display: inline-block; } .codrops-top a:hover { background: rgba(255,255,255,0.8); color: #2c3e50; } .codrops-top span.right { float: right; } .codrops-top span.right a { float: left; display: block; } .codrops-icon:before { font-family: 'codropsicons'; margin: 0 4px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .codrops-icon-drop:before { content: "\e001"; } .codrops-icon-prev:before { content: "\e004"; } @media screen and (max-width: 46.0625em) { .column { width: 100%; min-width: auto; min-height: auto; padding: 1em; } .column p { text-align: left; font-size: 1.5em; } .column:nth-child(2) { box-shadow: 0 -1px 0 rgba(0,0,0,0.1); } } @media screen and (max-width: 25em) { .codrops-icon span { display: none; } } |
CSS Code: Component.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | /* Search icon by IcoMoon, made with http://icomoon.io/app/ */ @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot'); src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff') format('woff'), url('../fonts/icomoon/icomoon.ttf') format('truetype'), url('../fonts/icomoon/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } .sb-search { position: relative; margin-top: 10px; width: 0%; min-width: 60px; height: 60px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; box-shadow: 5px 5px 15px rgba(0,0,0,0.2); border-radius: 30px; } .sb-search-input { position: absolute; top: 0; right: 0; border: none; outline: none; background: #fff; width: 100%; height: 60px; margin: 0; z-index: 10; padding: 20px 65px 20px 20px; font-family: inherit; font-size: 20px; color: #2c3e50; } .sb-search-input::-webkit-input-placeholder { color: #efb480; } .sb-search-input:-moz-placeholder { color: #efb480; } .sb-search-input::-moz-placeholder { color: #efb480; } .sb-search-input:-ms-input-placeholder { color: #efb480; } .sb-icon-search, .sb-search-submit { width: 60px; height: 60px; display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; line-height: 60px; text-align: center; cursor: pointer; } .sb-search-submit { background: #fff; /* IE needs this */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter: alpha(opacity=0); /* IE 5-7 */ opacity: 0; color: transparent; border: none; outline: none; z-index: -1; } .sb-icon-search { color: #fff; background: #FFC500; z-index: 90; font-size: 22px; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; } .sb-icon-search:before { content: "\e000"; } /* Open state */ .sb-search.sb-search-open, .no-js .sb-search { width: 100%; } .sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search { background: #FFC600; color: #fff; z-index: 11; } .sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit { z-index: 90; } |
JQuery Code:
1 2 3 4 5 | <script src="js/classie.js"></script> <script src="js/uisearch.js"></script> <script> new UISearch( document.getElementById( 'sb-search' ) ); </script> |