Mobile-friendly Dropdown Navigation Plugin - linksToSelect
File Size: | 5.16 KB |
---|---|
Views Total: | 1729 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.