Transform Nav List Into Select - jQuery Pseudo-select
File Size: | 7.14 KB |
---|---|
Views Total: | 567 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The Pseudo-select jQuery plugin transforms the normal HTML unordered list into a select based dropdown list with or without checkboxes.
Ideal for responsive and cross-platform webpage that transforms the nav list into a mobile-friendly dropdown menu on small screens.
How to use it:
1. Add the placeholder text to the HTML list using the data-btn-text
attribute:
<ul class="example" data-btn-text="Example Text"> <li><a href="">All</a></li> <li><a href="">jQuery</a></li> <li><a href="">Script</a></li> <li><a href="">Net</a></li> </ul>
2. Add jQuery library and the main JavaScript jquery.pseudo-select.js
to the webpage:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="js/pseudo-select/jquery.pseudo-select.js"></script>
3. Call the function to transform the HTML list into a dropdown list.
$('.example').pseudoSelect();
4. Transform the list items into checkboxes.
$('.example').pseudoSelect({ hasCheckbox: true });
5. Transform the checkboxes into a dropdown list when the viewport size reaches the breakpoint you specify.
$('.example').pseudoSelect({ breaking: 768, hasCheckbox: true });
6. Determine whether or not to close the dropdown list when a value has been selected.
$('.example').pseudoSelect({ closeOnValueSelected: true });
This awesome jQuery plugin is developed by ismanfromes. For more Advanced Usages, please check the demo page or visit the official website.