Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

How to convert ul/li (unordered list) into Dropdown using jquery

If you want to convert your ul/li into dropdown list, you can do it easily using jquery. If you have responsive web page and you want to convert your menu which is in ul/li structure and want to change in dropdown for small screen or mobile screen than use following jquery solution.

Suppose you have menu structure as:

<div class="menu">
<ul class="myclass">
        <li><a href="one.php">one</a></li> 
        <li><a href="two.php">two</a></li> 
        <li><a href="three.php">three</a></li> 
        <li><a href="four.php">four</a></li> 
        <li><a href="five.php">five</a></li> 
        <li><a href="six.php">six</a></li>
</ul>
</div>

and want to convert into dropdown as:

<select>
       <option value="one.php">one</option> 
       <option value="two.php">two</option> 
       <option value="three.php">three</option> 
       <option value="four.php">four</option> 
       <option value="five.php">five</option> 
       <option value="six.php">six</option> 
</select>

<script>
jQuery(document).ready(function()
{
    jQuery(function()
   {
        jQuery('ul.myclass').each(function()
       {
            var $select = jQuery('<select />');
            jQuery(this).find('a').each(function()
           {
               var $option = jQuery('<option />');
               $option.attr('value', jQuery(this).attr('href')).html(jQuery(this).html());
               $select.append($option);
$select.click(function()
              {
                if(jQuery(this).val() != "#")
               {
window.location.href = jQuery(this).val();
               }
            });
        });
jQuery(".menu").append($select);
    });
jQuery("ul.myclass").hide());
  });
});
</script>

Please support us, Like us on Facebook.

0 comments:

Post a Comment

 

Copyright @ 2017 HKBlog.