This time I will share jQuery Plugin and tutorial about SEO-friendly Custom Select Box In jQuery, hope it will help you in programming stack.
A custom select box jQuery plugin that converts a regular <select> element into a semantic, SEO-friendly dropdown list.
You can apply custom CSS styles to the custom select box as easy as styling an HTML unordered list.
How to use it:
1. Load the style.css
for the basic styling of the custom select box.
1 |
< link rel = "stylesheet" href = "css/style.css" /> |
2. Add the CSS class ‘rev-select-box’ to your select box.
01 |
< select class = "rev-select-box" > |
02 |
< option value = "hide" >-- Year --</ option > |
03 |
< option value = "2010" >2010</ option > |
04 |
< option value = "2011" >2011</ option > |
05 |
< option value = "2012" >2012</ option > |
06 |
< option value = "2013" >2013</ option > |
07 |
< option value = "2014" selected>2014</ option > |
08 |
< option value = "2015" >2015</ option > |
3. Load the main JavaScript custom-selectbox.js
after jQuery library.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< script src = "/path/to/js/custom-selectbox.js" ></ script > |
4. That’s it. The HTML markup of the generated dropdown list looks as follows:
01 |
< div class = "rev-select" > |
02 |
< select class = "rev-select-box select-hidden" > |
03 |
< option value = "hide" >-- Year --</ option > |
04 |
< option value = "2010" >2010</ option > |
05 |
< option value = "2011" >2011</ option > |
06 |
< option value = "2012" >2012</ option > |
07 |
< option value = "2013" >2013</ option > |
08 |
< option value = "2014" selected = "" >2014</ option > |
09 |
< option value = "2015" >2015</ option > |
11 |
< div class = "select-styled" >2014</ div > |
12 |
< ul class = "select-options" style = "display: none;" > |
13 |
< li rel = "hide" >-- Year --</ li > |
14 |
< li rel = "2010" >2010</ li > |
15 |
< li rel = "2011" >2011</ li > |
16 |
< li rel = "2012" >2012</ li > |
17 |
< li rel = "2013" >2013</ li > |
18 |
< li rel = "2014" >2014</ li > |
19 |
< li rel = "2015" >2015</ li > |
5. Override the default styles of the custom select box.
05 |
border-top : 1px solid #ff185d ; |
08 |
.select-options li:hover { |
13 |
.select-options li[rel= "hide" ] { |
Changelog:
2021-03-06