Programar2020
Membro
Boa Tarde
Tenho um Menu que apresenta o cardápio ( Almoço & Jantar , Bebidas ). Cada menu contém seis ementas ou seis bebidas consoante aquilo que o utilizador escolher.
O código que tenho faz o que pretendo, no entanto gostaria de optimizá-lo e não depender de dois plugins ( flickity.pkgd.min.js, isotope.pkgd.min.js, https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js )
É POSSÍVEL ?
Aguardo a vossa ajuda!
JavaScript
Tenho um Menu que apresenta o cardápio ( Almoço & Jantar , Bebidas ). Cada menu contém seis ementas ou seis bebidas consoante aquilo que o utilizador escolher.
O código que tenho faz o que pretendo, no entanto gostaria de optimizá-lo e não depender de dois plugins ( flickity.pkgd.min.js, isotope.pkgd.min.js, https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js )
É POSSÍVEL ?
Aguardo a vossa ajuda!
HTML:
<section class="mt-5" id="menu">
<div class="container">
<div class="row">
<div class="col">
<h2 class="text-center">Menu</h2>
</div>
</div>
<div class="row">
<div class="col">
<nav class="section_menu__nav">
<ul>
<li class="active">
<a href="#menu_images" data-filter=".mains">Almoço & Jantar</a>
</li>
<li>
<a href="#menu_images" data-filter=".drinks">Bebidas</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="row section_menu__grid" id="menu_images">
<div class="col-md-6 section_menu__grid__item mains">
<div class="section_menu__item">
<div class="row">
<div class="col-3">
<div class="section_menu__item__img">
<img src="assets/img/5.jpg" alt="...">
</div>
</div>
<div class="col-7">
<h4>Picanha Grelhada</h4>
<p>Acompanhamento: Arroz, Batatas Fritas</p>
</div>
<div class="col-2">
<div class="section_menu__item__price text-center">15,00€</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 section_menu__grid__item drinks">
<div class="section_menu__item">
<div class="row">
<div class="col-3">
<div class="section_menu__item__img">
<img src="assets/img/11.jpg" alt="...">
</div>
</div>
<div class="col-7">
<h4>Vinho Verde Gazela</h4>
</div>
<div class="col-2">
<div class="section_menu__item__price text-center">5,00€</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 section_menu__grid__item drinks">
<div class="section_menu__item">
<div class="row">
<div class="col-3">
<div class="section_menu__item__img">
<img src="assets/img/12.jpg" alt="...">
</div>
</div>
<div class="col-7">
<h4>Vinho Tinto Qtª da Espiga</h4>
</div>
<div class="col-2">
<div class="section_menu__item__price text-center">95,00€</div>
</div>
</div>
</div>
</div>
</section>
JavaScript
Código:
var Menu = function() {
var o = $(".section_menu__grid")
, s = $(".section_menu__nav");
o.length && o.each(function() {
var e = $(this)
, t = e.attr("id")
, n = s.find('li.active > a[href="#' + t + '"]').data("filter")
, o = e.isotope({
itemSelector: ".section_menu__grid__item",
filter: n
});
o.imagesLoaded().progress(function() {
o.isotope("layout")
})
}),
s.on("click", "li > a", function(e) {
e.preventDefault();
var t = $(this);
!function(e) {
var t = o.filter(e.attr("href"))
, n = e.data("filter");
t.isotope({
filter: n
})
}(t),
function(e) {
e.parent("li").siblings("li").removeClass("active"),
e.parent("li").addClass("active")
}(t)
})
}();