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
