The search bar can be opened on click, it has a fluid width and it's mobile-friendly.
30 | 31 |├── README.md ├── css ├── component.css └── default.css ├── fonts ├── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt └── icomoon │ ├── icomoon.dev.svg │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ ├── icomoon.woff │ └── license.txt ├── index.html └── js ├── classie.js ├── modernizr.custom.js └── uisearch.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | Expanding Search Bar Deconstructed 3 | ========= 4 | A tutorial on how to create a mobile-friendly and responsive expanding search bar. 5 | 6 | [article on Codrops](http://tympanus.net/codrops/?p=15599) 7 | 8 | [demo](http://tympanus.net/Tutorials/ExpandingSearchBar/) 9 | 10 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/) -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | /* Search icon by IcoMoon, made with http://icomoon.io/app/ */ 2 | @font-face { 3 | font-family: 'icomoon'; 4 | src:url('../fonts/icomoon/icomoon.eot'); 5 | src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'), 6 | url('../fonts/icomoon/icomoon.woff') format('woff'), 7 | url('../fonts/icomoon/icomoon.ttf') format('truetype'), 8 | url('../fonts/icomoon/icomoon.svg#icomoon') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | /* Container for the entire search element */ 13 | .sb-search { 14 | position: relative; 15 | margin-top: 10px; 16 | width: 0%; 17 | min-width: 60px; 18 | height: 60px; 19 | float: right; 20 | overflow: hidden; 21 | -webkit-transition: width 0.3s; 22 | -moz-transition: width 0.3s; 23 | transition: width 0.3s; 24 | -webkit-backface-visibility: hidden; 25 | } 26 | /* The input element on the search element */ 27 | .sb-search-input { 28 | position: absolute; 29 | top: 0; 30 | right: 0; 31 | border: none; 32 | outline: none; 33 | background: #fff; 34 | width: 100%; 35 | height: 60px; 36 | margin: 0; 37 | z-index: 10; 38 | padding: 20px 65px 20px 20px; 39 | font-family: inherit; 40 | font-size: 20px; 41 | color: #2c3e50; 42 | } 43 | 44 | 45 | input[type="search"].sb-search-input { 46 | /* remove special webkit formatting on the search input */ 47 | -webkit-appearance: none; 48 | -webkit-border-radius: 0px; 49 | } 50 | 51 | /* browser specific placholder text color */ 52 | .sb-search-input::-webkit-input-placeholder { 53 | color: #efb480; 54 | } 55 | 56 | .sb-search-input:-moz-placeholder { 57 | color: #efb480; 58 | } 59 | 60 | .sb-search-input::-moz-placeholder { 61 | color: #efb480; 62 | } 63 | 64 | .sb-search-input:-ms-input-placeholder { 65 | color: #efb480; 66 | } 67 | /* format the search button and submit to share the same size and space */ 68 | .sb-icon-search, 69 | .sb-search-submit { 70 | width: 60px; 71 | height: 60px; 72 | display: block; 73 | position: absolute; 74 | right: 0; 75 | top: 0; 76 | padding: 0; 77 | margin: 0; 78 | line-height: 60px; 79 | text-align: center; 80 | cursor: pointer; 81 | } 82 | /* hide the submit but leave it clickable */ 83 | .sb-search-submit { 84 | background: #fff; /* IE needs this */ 85 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ 86 | filter: alpha(opacity=0); /* IE 5-7 */ 87 | opacity: 0; 88 | color: transparent; 89 | border: none; 90 | outline: none; 91 | z-index: -1; 92 | } 93 | 94 | /* format the search icon */ 95 | .sb-icon-search { 96 | color: #fff; 97 | background: #e67e22; 98 | z-index: 90; 99 | font-size: 22px; 100 | font-family: 'icomoon'; 101 | speak: none; 102 | font-style: normal; 103 | font-weight: normal; 104 | font-variant: normal; 105 | text-transform: none; 106 | -webkit-font-smoothing: antialiased; 107 | } 108 | 109 | /* add the magnifying glass character from the icomoon font as a before pseudo element */ 110 | .sb-icon-search:before { 111 | content: "\e000"; 112 | } 113 | 114 | /* Open state */ 115 | .sb-search.sb-search-open, 116 | .no-js .sb-search { 117 | width: 100%; 118 | } 119 | 120 | /* add the "active" color on the search button */ 121 | .sb-search.sb-search-open .sb-icon-search, 122 | .no-js .sb-search .sb-icon-search { 123 | background: #da6d0d; 124 | color: #fff; 125 | z-index: 11; 126 | } 127 | 128 | /* adjust z-index to make sure the search submit is clikacble and not below any other elements */ 129 | .sb-search.sb-search-open .sb-search-submit, 130 | .no-js .sb-search .sb-search-submit { 131 | z-index: 90; 132 | } 133 | -------------------------------------------------------------------------------- /css/default.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 3 | 4 | @font-face { 5 | font-family: 'codropsicons'; 6 | src:url('../fonts/codropsicons/codropsicons.eot'); 7 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 9 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 10 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 16 | body, html { font-size: 100%; padding: 0; margin: 0;} 17 | 18 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 19 | .clearfix:before, .clearfix:after { content: " "; display: table; } 20 | .clearfix:after { clear: both; } 21 | 22 | body { 23 | font-family: 'Lato', Calibri, Arial, sans-serif; 24 | color: #eaeaea; 25 | background: #2c3e50; 26 | } 27 | 28 | a { 29 | color: #b4c7da; 30 | text-decoration: none; 31 | } 32 | 33 | a:hover, 34 | a:active { 35 | color: #fff; 36 | } 37 | 38 | /* Header Style */ 39 | .main, 40 | .container > header { 41 | margin: 0 auto; 42 | padding: 2em; 43 | } 44 | 45 | .container > header { 46 | text-align: center; 47 | background: rgba(0,0,0,0.01); 48 | } 49 | 50 | .container > header h1 { 51 | font-size: 2.625em; 52 | line-height: 1.3; 53 | margin: 0; 54 | font-weight: 300; 55 | } 56 | 57 | .container > header span { 58 | display: block; 59 | font-size: 60%; 60 | color: #e67e22; 61 | padding: 0 0 0.6em 0.1em; 62 | } 63 | 64 | /* Main Content */ 65 | .main { 66 | max-width: 69em; 67 | } 68 | 69 | .column { 70 | float: left; 71 | width: 50%; 72 | padding: 0 2em; 73 | min-height: 300px; 74 | position: relative; 75 | } 76 | 77 | .column:nth-child(2) { 78 | box-shadow: -1px 0 0 rgba(0,0,0,0.1); 79 | } 80 | 81 | .column p { 82 | font-weight: 300; 83 | font-size: 2em; 84 | padding: 0; 85 | margin: 0; 86 | text-align: right; 87 | line-height: 1.5; 88 | } 89 | 90 | .column a { 91 | border: 3px solid #b4c7da; 92 | padding: 0 15px; 93 | display: inline-block; 94 | margin: 20px 0; 95 | } 96 | 97 | .column a:hover { 98 | border-color: #fff; 99 | } 100 | 101 | /* To Navigation Style */ 102 | .codrops-top { 103 | background: #566472; 104 | background: rgba(255, 255, 255, 0.2); 105 | text-transform: uppercase; 106 | width: 100%; 107 | font-size: 0.69em; 108 | line-height: 2.2; 109 | } 110 | 111 | .codrops-top a { 112 | padding: 0 1em; 113 | letter-spacing: 0.1em; 114 | color: #fff; 115 | display: inline-block; 116 | } 117 | 118 | .codrops-top a:hover { 119 | background: rgba(255,255,255,0.8); 120 | color: #2c3e50; 121 | } 122 | 123 | .codrops-top span.right { 124 | float: right; 125 | } 126 | 127 | .codrops-top span.right a { 128 | float: left; 129 | display: block; 130 | } 131 | 132 | .codrops-icon:before { 133 | font-family: 'codropsicons'; 134 | margin: 0 4px; 135 | speak: none; 136 | font-style: normal; 137 | font-weight: normal; 138 | font-variant: normal; 139 | text-transform: none; 140 | line-height: 1; 141 | -webkit-font-smoothing: antialiased; 142 | } 143 | 144 | .codrops-icon-drop:before { 145 | content: "\e001"; 146 | } 147 | 148 | .codrops-icon-prev:before { 149 | content: "\e004"; 150 | } 151 | 152 | @media screen and (max-width: 46.0625em) { 153 | .column { 154 | width: 100%; 155 | min-width: auto; 156 | min-height: auto; 157 | padding: 1em; 158 | } 159 | 160 | .column p { 161 | text-align: left; 162 | font-size: 1.5em; 163 | } 164 | 165 | .column:nth-child(2) { 166 | box-shadow: 0 -1px 0 rgba(0,0,0,0.1); 167 | } 168 | } 169 | 170 | @media screen and (max-width: 25em) { 171 | 172 | .codrops-icon span { 173 | display: none; 174 | } 175 | 176 | } -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ExpandingSearchBar/790e7be077fa1251508d65e754921ac3cff64da2/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ExpandingSearchBar/790e7be077fa1251508d65e754921ac3cff64da2/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ExpandingSearchBar/790e7be077fa1251508d65e754921ac3cff64da2/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.dev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ExpandingSearchBar/790e7be077fa1251508d65e754921ac3cff64da2/fonts/icomoon/icomoon.eot -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ExpandingSearchBar/790e7be077fa1251508d65e754921ac3cff64da2/fonts/icomoon/icomoon.ttf -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ExpandingSearchBar/790e7be077fa1251508d65e754921ac3cff64da2/fonts/icomoon/icomoon.woff -------------------------------------------------------------------------------- /fonts/icomoon/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: IcoMoon - Free -- http://keyamoon.com/icomoon/ 2 | License: CC BY 3.0 -- http://creativecommons.org/licenses/by/3.0/ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 |The search bar can be opened on click, it has a fluid width and it's mobile-friendly.
30 | 31 |