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">
<select>
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:
<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.
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment