SEO-friendly Dropdown List With jQuery - Custom DropDown

This is a jQuery plugin which generates a semantic, SEO-friendly, highly-customizable dropdown select menu from a regular HTML unordered list.

How to use it:

1. Insert the stylesheet custom-dropdown.css and JavaScript custom-dropdown.js into the document.

<link rel="stylesheet" type="text/css" href="css/custom-dropdown.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/custom-dropdown.js"></script>

2. Insert an HTML list into the dropdown container.

<div id="example" class="wrapper-dropdown" tabindex="1">
  <span>jQueryScript</span>
  <ul class="dropdown">
      <li><a href="#">Profile</a></li>
      <li><a href="#">Settings</a></li>
      <li><a href="#">Log out</a></li>
  </ul>
</div>

3. Initialize the plugin and customize the dropdown with the following parameters:

• el: container element
• position: CSS position
• width: the width of the dropdown
• headerBgColor: the background color of the header
• headerTextColor: the tex color of the header
• headerActiveBgColor: the background color of the header when active
• headerActiveTextColor: the text color of the header when active
• optionsBg: the background color of the dropdown list
• optionsTextColor: the text color of the dropdown list

// DropDown(el,position, width, headerBgColor, headerTextColor, headerActiveBgColor, headerActiveTextColor, optionsBg, optionsTextColor)
var myDropdown = new DropDown( 
    $('#example'), 
    'absolute',
    '220px', 
    '#d7dadd',
    ‘#000000',
    '#3e3e3e',
    '#ffffff', 
    '#a4a4a5',
    '#ffffff
);

---

This awesome jQuery plugin is developed by Gkrutika. For more Advanced Usages, please check the demo page or visit the official website.