forked from c4coderandcreator/Flavour-Fusion
-
Notifications
You must be signed in to change notification settings - Fork 0
/
menu.js
123 lines (104 loc) · 3.85 KB
/
menu.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/* ------------ MenuPage By Naima -------------*/
// Page hide and show
const homeBtn = document.querySelector("#home-btn"),
menuBtn = document.querySelector("#menu-btn"),
menuFbtn = document.querySelector("#menu-footer-btn"),
main = document.querySelector(".l-main"),
menuNaima = document.querySelector(".menu-naima");
menuBtn.addEventListener("click", function(){
main.style.display="none";
menuNaima.style.display="block";
homeBtn.classList.remove("active-link");
menuBtn.classList.add("active-link");
})
homeBtn.addEventListener("click", function(){
menuNaima.style.display="none";
main.style.display="block";
menuBtn.classList.remove("active-link");
homeBtn.classList.add("active-link");
})
// Summer Sale
var swiper = new Swiper(".mySwiper", {
spaceBetween: 0,
centeredSlides: true,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
// Menu Buttons
const menuButtons = document.querySelectorAll(".menu-btn");
const menuSlides = document.querySelectorAll(".m-items-slide");
menuButtons.forEach(button => {
button.addEventListener("click", function() {
menuButtons.forEach(btn => btn.classList.remove('menu-clicked-btn'));
button.classList.add('menu-clicked-btn');
const targetSlideId = button.getAttribute("data-target");
menuSlides.forEach(slide => slide.style.display = "none");
const targetSlide = document.querySelector(`.${targetSlideId}`);
if (targetSlide) {
targetSlide.style.display = "block";
}
});
});
// Dropdown Menu
const dropdown = document.querySelector('.dropdown'),
select = dropdown.querySelector('.select'),
caret = dropdown.querySelector('.caret'),
menu_dd = dropdown.querySelector('.menu-dd'),
options = dropdown.querySelectorAll('.menu-dd li'),
selected = dropdown.querySelector('.selected');
select.addEventListener('click', () => {
select.classList.toggle('select-clicked');
caret.classList.toggle('caret-rotate');
menu_dd.classList.toggle('menu-open');
});
options.forEach(option => {
option.addEventListener('click', () => {
selected.innerText = option.innerText;
select.classList.remove('select-clicked');
caret.classList.remove('caret-rotate');
menu_dd.classList.remove('menu-open');
options.forEach(option => {
option.classList.remove('active-menu');
});
option.classList.add('active-menu');
const slideId = option.getAttribute('data-target');
const slides = document.querySelectorAll('.m-items-slide');
slides.forEach(slide => {
slide.style.display = 'none';
});
const selectedSlide = document.querySelector(`.${slideId}`);
if (selectedSlide) {
selectedSlide.style.display = 'block';
}
});
});
// Footer Linking by Navuuu
menuFbtn.addEventListener("click", function(){
main.style.display="none";
menuNaima.style.display="block";
homeBtn.classList.remove("active-link");
menuFbtn.classList.add("active-link");
})
homeBtn.addEventListener("click", function(){
menuNaima.style.display="none";
main.style.display="block";
menuFbtn.classList.remove("active-link");
homeBtn.classList.add("active-link");
})
const orderFbtn = document.querySelector("#order-footer-btn")
orderFbtn.addEventListener("click", function(){
menuNaima.style.display="none";
main.style.display="block";
menuFbtn.classList.remove("active-link");
homeBtn.classList.add("active-link");
})