CSS + jQuery animated filter selector, inspired by the website Nest.com where you can find something pretty similar.
For instance: this code uses the "display: inline-flex" property to align horizontally the
A Pen by Luca Brajato on CodePen.
Created
June 30, 2015 07:26
-
-
Save patilswapnilv/552bb5e9322c1ca42a8a to your computer and use it in GitHub Desktop.
Animated filter selector
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <h2>Animated filter selector</h2> | |
| <div id="wrapper-filter"> | |
| <ul id="filter-bar"> | |
| <span class="pill"></span> | |
| <li class="filter-option option-1 active" data-target="option-1">Books</li> | |
| <li class="filter-option option-2" data-target="option-2">Shoes</li> | |
| <li class="filter-option option-3" data-target="option-3">Toys</li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready( function() { | |
| $("#filter-bar li").click(function(){ | |
| $("#filter-bar li").removeClass("active"); | |
| $(this).addClass("active"); | |
| $("#filter-bar").removeClass().addClass($(this).attr("data-target")); | |
| }); | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body {background-color:#eee; margin: 0; padding:0; font-family: Tahoma;} | |
| h2 {text-align:center;} | |
| #filter-bar {width: 100%; margin:0; padding:0; height:36px; display:inline-flex;} | |
| #wrapper-filter {background-color:#fff; width: 570px; height:auto; margin:30px auto; border-radius: 30px; box-sizing: border-box;} | |
| #filter-bar li {width: 190px;background-color: transparent; text-align: center; list-style-type: none;z-index:10; cursor: pointer; font-family: Open Sans, sans-serif; font-weight: 100; font-size: 15px;line-height:36px;} | |
| .pill {position: absolute; width:190px; height: 38px; background-color: #39c; border-radius: 30px; color: #444; z-index:10; border: 5px solid #eee; box-sizing: border-box; } | |
| .filter-option {transition: color 500ms;} | |
| #filter-bar.option-1 .pill {margin-left: 0px; transition: margin-left 200ms ease;} | |
| #filter-bar.option-2 .pill {margin-left: 187px; transition: margin-left 200ms ease;} | |
| #filter-bar.option-3 .pill {margin-left: 380px; transition: margin-left 200ms ease;} | |
| .option-1.active, .option-2.active, .option-3.active {color:#fff; transition: color 200ms; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment