Bir diziden Hamburger menüsü

Question

Bir hamburger menüsü için kodumda yardıma ihtiyacım var.

İşte

var menu = [{ 
    'title': 'Save', 
    'onclick': function() { 
    alert('Open clicked'); 
    } 
}, { 
    'title': 'Load', 
    'onclick': function() { 
    alert('Close clicked'); 
    } 
}, { 
    'title': 'Hide menu', 
    'onclick': function() { 
    //put a code to close menu 
    } 
}]; 

şimdiye kadar var ve dizide çalışmak için güncellemek için yukarıdaki diziyi kullanmak gerekenler: jquery menü öğelerini oluşturmak için bu diziyi kullanmak gerekir.

jQuery

$(document).ready(function() { 

$('#menulink').click(function(event) { 
    event.preventDefault(); 
    if($('.navigation-wrapper').hasClass('show-menu')) { 
     $('.navigation-wrapper').removeClass('show-menu'); 
     $('.navigation').hide(); 
     $('.navigation li').removeClass('small-padding'); 
    } else { 
     $('.navigation-wrapper').addClass('show-menu'); 
     $('.navigation').fadeIn(); 
     $('.navigation li').addClass('small-padding'); 
    } 
}); 

    }); 

HTML

<a id="menulink" href="#"> 
    <div class="hamburger-wrapper"> 
    <div class="inner-hamburger-wrapper"> 
      <div class="hamburger"></div> 
     <div class="hamburger"></div> 
     <div class="hamburger"></div> 
    </div> 
    <div class="menu-title"><p>Menu</p></div> 
</div> 
</a> 

<ul class="navigation"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Menu Item 2</a></li> 
    <li><a href="#">Menu Item 3</a></li> 
    <li><a href="#">Menu Item 4</a></li> 
    <li><a href="#">Menu Item 5</a></li> 
    <li><a href="#">Menu Item 6</a></li> 
    </ul> 

Ben gelen yardımı güzel olurdu.

Answer 1

jQuery .append()'u kullanarak, dizi öğelerini oluşturma için bir listeye ekleyebilirsiniz.

İşlevleri ayrı ayrı hedeflemeliyiz, ancak menu[i] öğelerini dizelere dönüştürdüyseniz bunları satır içi ekleyebileceğiniz bir çözüm var.

// Generate an element, append index to referencing the executing function 
    $.each(menu, function(index, element) { 
    $('ul.navigation').append('<li data-index="'+index+'"><a href="#">'+element.title+'</a></li>'); 
    }); 

    // Run the executing function associated with item 
    $('ul.navigation > li').click(function() { 
    var item = $(this).attr('data-index'); 
    menu[item].onclick(); 
    }); 

    // This could be done easier like so: 
    // $.each(menu, function(index, element) { 
    // $('ul.navigation').append('<li data-index="'+index+'"><a href="#" onclick="'+element.onclick+'">'+element.title+'</a></li>'); 
    // }); 
    // but would require modifying the menu[i] items' functions to just be strings 

Here's an updated Fiddle.