Expanding Search Bar is an expanding search bar extension for any HTML page or Jekyll. This extension is a lightweight version of Expanding Search Bar Deconstructed for using in Jekyll or HTML. This extension is used in my blog.
Because my blog have used icon set from Font Awesome. I change icon set from the original project into Font Awesome as in my blog.
- Home: http://mildronize.github.io/articles/2015/05/07/responsive-expanding-search-bar/
- Demo: http://mildronize.github.io/demo/responsive-expanding-search-bar/
- copy all of project's resource to your project.
/css
/fonts
/js
- Insert css header into your HTML
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/expanding-search-bar.css" />- Place below code into top of HTML code or anywhere what you want.
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input search-bar" placeholder="Enter your search term..." type="text" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="fa fa-search sb-icon-search"></span>
</form>
</div>- Add JS at bottom of HTML code
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script>
new UISearch( document.getElementById( 'sb-search' ) );
</script>A tutorial on how to create a mobile-friendly and responsive expanding search bar.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent