jQuery Plugin To Convert Html Lists Into A Dropdown List NavToSelect - Download jQuery Plugin To Convert Html Lists Into A Dropdown List - NavToSelect

Download jQuery Plugin To Convert Html Lists Into A Dropdown List – NavToSelect

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin To Convert Html Lists Into A Dropdown List – NavToSelect, hope it will help you in programming stack.

jQuery Plugin To Convert Html Lists Into A Dropdown List NavToSelect - Download jQuery Plugin To Convert Html Lists Into A Dropdown List - NavToSelect
File Size: 135 KB
Views Total: 6155
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

NavToSelect is a jQuery plugin designed for responsive navigation that automatically converts a ul li based navigation into a dropdown select menu for better experience on mobile devices. 

How to use it:

1. Include the latest jQuery library together with JQuery navtoselect plugin in your web page.

view source
1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2 <script src="src/jquery-navtoselect.js"></script>

2. Create a multi-level navigation with nested Html lists.

view source
01 <nav id="example">
02 <ul>
03 <li><a href="#">Home</a></li>
04 <li><a href="#">Categories</a>
05 <ul>
06 <li><a href="#">Category 1</a></li>
07 <li><a href="#">Category 2</a></li>
08 </ul>
09 </li>
10 <li> <a href="#">Page</a>
11 <ul>
12 <li><a href="#">Page 1</a></li>
13 <li><a href="#">Page 2</a></li>
14 </ul>
15 </li>
16 <li><a href="#">External</a></li>
17 <li><a href="#top">Go to top</a></li>
18 </ul>
19 </nav>

3. Call the plugin on the navigation.

view source
1 <script type="text/javascript">
2 jQuery(document).ready(function(){
3 $('#example').navToSelect();
4 });
5 </script>

4. Available options and defaults.

view source
01 maxLevel: 4,
02 prependTo: null,
03 activeClass: 'active',
04 linkSelector: 'a:first',
05 indentString: '&ndash;',
06 indentSpace: true,
07 placeholder: 'Navigate to...',
08 useOptgroup: false,
09 namespace: 'navToSelect',
10 itemFilter: function itemFilter($li) {
11   return true;
12 },
13 getItemLabel: function getItemLabel($li) {
14   return $li.find(this.options.linkSelector).text();
15 },
16 getItemsFromList: function getItemsFromList($list, level) {
17   var that = this;
18   var _items = [];
19  
20   $list.children('li').each(
21  
22     function() {
23       var $li = $(this);
24  
25       if (!that.options.itemFilter($li)) {
26  
27         return;
28       }
29       var item = {
30         value: that.getItemValue($li),
31         label: that.options.getItemLabel.call(that, $li),
32         linkable: that.isLinkable($li),
33         actived: that.isActived($li)
34       };
35  
36       if ($li.children('ul, ol').length) {
37         item.items = [];
38         $li.children('ul, ol').each(
39  
40           function() {
41             item.items = item.items.concat(that.options.getItemsFromList.call(that, $(this), level + 1));
42           }
43         );
44       }
45  
46       _items.push(item);
47     }
48   );
49  
50   return _items;
51 },
52 onChange: function onChange() {
53   if ($(this).data('linkable') !== false) {
54     document.location.href = this.value;
55   }
56 }

5. The required CSS to set the breakpoint via media queries.

view source
01 nav ul, nav li {
02 margin-top: 0;
03 margin-bottom: 0;
04 }
05 .navToSelect {
06 display: none;
07 }
08  
09 /* Mobile device */
10 @media only screen and (max-width: 767px) {
11 nav ul {
12 display: none;
13 }
14 .navToSelect {
15 display: block;
16 }
17 }

Change log:

v0.5.1 (2016-10-17)

This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the de

source : jqueryscript.net

Related posts: