Mobile-friendly Dropdown Navigation Plugin - linksToSelect

linksToSelect is an easy-to-use jQuery plugin that converts the regular navigation links into a dropdown select list for your responsive website on mobile devices.

See also:

• Minimalist jQuery Responsive Dropdown Menu Plugin - Input Menu
• Responsive Select Based Mobile Menu with jQuery and CSS3
• Lightweight jQuery Responsive Dropdown Menu Plugin - ReSmenu

How to use it:

1. Include the jQuery library and the jQuery linksToSelect plugin on your responsive website.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/jquery.linksToSelect.js"></script>

2. Create links for your navigation menu. Add the class 'links-to-select-ignore' to links you want to ignore.

<div class="sample-menu" 
     data-select-default="--- Choose a link ---"
  >
  <a href="http://www.google.com/">Google</a>
  <a href="http://www.bing.com/">Bing</a>
  <a href="#" class="links-to-select-ignore">Ignore me</a>
  <a href="#" class="links-to-select-disable">Disabled</a>
</div>

3. Initialize the plugin.

$('.sample-menu').linksToSelect();

4. Hide the dropdown select on desktop.

.links-to-select { display: none; }

4. Show the dropdown select and hide the regular navigation links on small devices based on CSS3 media queries.

@media only screen and (max-width: 950px) {

  div.sample-menu { display: none; }  
  
  div.links-to-select { display: block; }

}

5. Available options to customize the dropdown navigation.

// Acts as a default empty option  
// E.g. -- Please choose --
dataSelectDefault:    'select-default', 

// If this class is present the option is disabled      
disabledClass:      'links-to-select-disable',    

// If this class is present the option is ignored
ignoredClass:       'links-to-select-ignore',   

// If this class is present the option is set as selected
selectedClass:      'links-to-select-selected',  

// Each select has this plus the selector number  
// E.g. links-to-select-3
idPrefix:         'links-to-select-',      

// Each select is wrapped in a div  
// E.g. <div class="links-to-select"><select.../select></div> 
selectClass:      'links-to-select',    

// Callback functions    
onInit:         function() {},
onDestroyed:      function() {}

---

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