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
   
Transform Nav List Into Select - jQuery Pseudo-select

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.