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>

2. Add jQuery library and the main JavaScript jquery.pseudo-select.js to the webpage:

<script src="" 
<script src="js/pseudo-select/jquery.pseudo-select.js"></script>

3. Call the function to transform the HTML list into a dropdown list.


4. Transform the list items into checkboxes.

  hasCheckbox: true

5. Transform the checkboxes into a dropdown list when the viewport size reaches the breakpoint you specify.

  breaking: 768,
  hasCheckbox: true

6. Determine whether or not to close the dropdown list when a value has been selected.

  closeOnValueSelected: true

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