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.
Clone or download
Pull request Compare This branch is 6 commits ahead, 2 commits behind codrops:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
fonts
js
README.md
index.html
screenshot.jpg

README.md

Expanding Search Bar

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.

Screenshot

Home & Demo

Usage

  1. copy all of project's resource to your project.
/css
/fonts
/js
  1. 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" />
  1. 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>
  1. 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>

Original project documentation

A tutorial on how to create a mobile-friendly and responsive expanding search bar.

article on Codrops

demo

LICENSING & TERMS OF USE