Ecommerce

1class Category(models.Model):
2    parent = models.ForeignKey('self', related_name='children', on_delete=models.CASCADE, blank=True, null=True)
3    title = models.CharField(max_length=255)
4    slug = models.SlugField(max_length=255)
5    image = models.ImageField(null=True, blank=True, verbose_name="Изображение")
6    ordering = models.IntegerField(default=0)
7    is_featured = models.BooleanField(default=False)
8
9    class Meta:
10        verbose_name_plural = 'Categories'
11        ordering = ('ordering',)
12
13    def __str__(self):
14        if self.parent is not None:
15            return f"{self.parent}/{self.title}"
16        return self.title
17    
18    @property
19    def imageURL(self):
20        try:
21            url = self.image.url
22        except:
23            url = ''
24        return url
25
26    def get_absolute_url(self):
27        return '/%s/' % (self.slug)
28
29
30class Product(models.Model):
31    category = models.ForeignKey(Category, related_name='products', on_delete=models.CASCADE)
32    parent = models.ForeignKey('self', related_name='variants', on_delete=models.CASCADE, blank=True, null=True)
33    name = models.CharField(max_length=200, verbose_name="Название продукта")
34    price = models.IntegerField(verbose_name="Цена")
35    slug = models.SlugField(max_length=255)
36    description = models.CharField(max_length=5000,blank=True, verbose_name="Описание:")
37    image = models.ImageField(null=True, blank=True, verbose_name="Изображение")
38    novinki = models.BooleanField(default=False, verbose_name="Новинки")
39    popularnye = models.BooleanField(default=False, verbose_name="Популарные")
40    def __str__(self):
41        return self.name
42
43    class Meta:
44        verbose_name = 'Продукты'
45        verbose_name_plural = "Продукты"
46        
47
48    @property
49    def imageURL(self):
50        try:
51            url = self.image.url
52        except:
53            url = ''
54        return url
55def category_detail(request, slug):
56    data = cartData(request)
57
58    cartItems = data['cartItems']
59    order = data['order']
60    items = data['items']
61    categories_for_menu = Category.objects.filter(parent=None)[:3]
62    categories = Category.objects.filter(parent=None)
63    category = get_object_or_404(Category, slug=slug)
64    **products_all = Product.objects.filter(category.parent==category)**
65    
66    print(products_all)
67
68    products = category.products.all()
69    context = {'items' : items, 'order' : order, 'cartItems' : cartItems, 'products':products, 'category':category, 'categories':categories,'categories_for_menu':categories_for_menu,'products_all':products_all}
70    
71    return render(request, "store/categories.html", context)
72from django.db.models import Q
73
74category = get_object_or_404(Category, slug=slug)
75products = Product.objects.filter(Q(category = category)|Q(category__parent = category))
76

1import Hero from './Hero';
2import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
3import FullCard from "./FullCard";
4function App() {
5
6  const data = [
7    {
8      burh: "1fdsd",
9      id: 1,
10      img: "https://d3o2e4jr3mxnm3.cloudfront.net/Mens-Jake-Guitar-Vintage-Crusher-Tee_68382_1_lg.png",
11    },
12    {
13      burh: "1fdsd",
14      id: 2,
15      img: "https://cdn.shopify.com/s/files/1/0101/4832/products/Angela_Natural_Tee.png?v=1606780388",
16    },
17    {
18      burh: "1fdsd",
19      id: 3,
20      img: "https://www.prada.com/content/dam/pradanux_products/U/UCS/UCS319/1YOTF010O/UCS319_1YOT_F010O_S_182_SLF.png",
21    },
22    {
23      burh: "1fdsd",
24      id: 4,
25      img: "https://www.burdastyle.com/pub/media/catalog/product/cache/7bd3727382ce0a860b68816435d76e26/107/BUS-PAT-BURTE-1320516/1170x1470_BS_2016_05_132_front.png",
26    },
27  ];
28
29
30
31
32  return (
33    <Router>
34      <Routes>
35        <Route path="/" element={<Hero data={data}/>} />
36        <Route path="/products/:id" element={ <FullCard data={data} />} />
37      </Routes>
38    </Router>
39  );
40}
41
42export default App;
43// import { popularProducts } from "./data";
44import { Link } from "react-router-dom";
45import "./Card.css";
46
47const Card = ({ data }) => {
48  return (
49    <div className="Maincontainer">
50      <div className="CardContainer">
51        {data.map((items, index) => {
52          return (
53            <div className="cards" key={index}>
54              <img src={items.img} alt="/" />
55
56              <Link to={`/products/${items.id}`}>CheckItem</Link>
57            </div>
58          );
59        })}
60      </div>
61    </div>
62  );
63};
64
65export default Card;
66import { useParams  } from 'react-router-dom'
67
68const FullCard = ({data}) => {
69
70    const {id} = useParams();
71
72
73  return (
74    <div className='container'>
75        {data.filter(  (items )=> items.id === id ).map((items,index) =>{
76            return (
77                <div key={items} className="container2">
78                    <h1>{items.burh}</h1>
79                    {/* <img src={items.image} alt="/" /> */}
80                </div>
81            );
82        })}
83    </div>
84  )
85}
86{data
87  .filter((items) => items.id === id) // <-- type mismatch comparision
88  .map((items, index) => {
89    return (
90      <div key={items.id} className="container2">
91        <h1>{items.burh}</h1>
92        {/* <img src={items.image} alt="/" /> */}
93      </div>
94    );
95  })}
96

1import Hero from './Hero';
2import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
3import FullCard from "./FullCard";
4function App() {
5
6  const data = [
7    {
8      burh: "1fdsd",
9      id: 1,
10      img: "https://d3o2e4jr3mxnm3.cloudfront.net/Mens-Jake-Guitar-Vintage-Crusher-Tee_68382_1_lg.png",
11    },
12    {
13      burh: "1fdsd",
14      id: 2,
15      img: "https://cdn.shopify.com/s/files/1/0101/4832/products/Angela_Natural_Tee.png?v=1606780388",
16    },
17    {
18      burh: "1fdsd",
19      id: 3,
20      img: "https://www.prada.com/content/dam/pradanux_products/U/UCS/UCS319/1YOTF010O/UCS319_1YOT_F010O_S_182_SLF.png",
21    },
22    {
23      burh: "1fdsd",
24      id: 4,
25      img: "https://www.burdastyle.com/pub/media/catalog/product/cache/7bd3727382ce0a860b68816435d76e26/107/BUS-PAT-BURTE-1320516/1170x1470_BS_2016_05_132_front.png",
26    },
27  ];
28
29
30
31
32  return (
33    <Router>
34      <Routes>
35        <Route path="/" element={<Hero data={data}/>} />
36        <Route path="/products/:id" element={ <FullCard data={data} />} />
37      </Routes>
38    </Router>
39  );
40}
41
42export default App;
43// import { popularProducts } from "./data";
44import { Link } from "react-router-dom";
45import "./Card.css";
46
47const Card = ({ data }) => {
48  return (
49    <div className="Maincontainer">
50      <div className="CardContainer">
51        {data.map((items, index) => {
52          return (
53            <div className="cards" key={index}>
54              <img src={items.img} alt="/" />
55
56              <Link to={`/products/${items.id}`}>CheckItem</Link>
57            </div>
58          );
59        })}
60      </div>
61    </div>
62  );
63};
64
65export default Card;
66import { useParams  } from 'react-router-dom'
67
68const FullCard = ({data}) => {
69
70    const {id} = useParams();
71
72
73  return (
74    <div className='container'>
75        {data.filter(  (items )=> items.id === id ).map((items,index) =>{
76            return (
77                <div key={items} className="container2">
78                    <h1>{items.burh}</h1>
79                    {/* <img src={items.image} alt="/" /> */}
80                </div>
81            );
82        })}
83    </div>
84  )
85}
86{data
87  .filter((items) => items.id === id) // <-- type mismatch comparision
88  .map((items, index) => {
89    return (
90      <div key={items.id} className="container2">
91        <h1>{items.burh}</h1>
92        {/* <img src={items.image} alt="/" /> */}
93      </div>
94    );
95  })}
96.filter((items) => items.id == id)
97

1import Hero from './Hero';
2import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
3import FullCard from "./FullCard";
4function App() {
5
6  const data = [
7    {
8      burh: "1fdsd",
9      id: 1,
10      img: "https://d3o2e4jr3mxnm3.cloudfront.net/Mens-Jake-Guitar-Vintage-Crusher-Tee_68382_1_lg.png",
11    },
12    {
13      burh: "1fdsd",
14      id: 2,
15      img: "https://cdn.shopify.com/s/files/1/0101/4832/products/Angela_Natural_Tee.png?v=1606780388",
16    },
17    {
18      burh: "1fdsd",
19      id: 3,
20      img: "https://www.prada.com/content/dam/pradanux_products/U/UCS/UCS319/1YOTF010O/UCS319_1YOT_F010O_S_182_SLF.png",
21    },
22    {
23      burh: "1fdsd",
24      id: 4,
25      img: "https://www.burdastyle.com/pub/media/catalog/product/cache/7bd3727382ce0a860b68816435d76e26/107/BUS-PAT-BURTE-1320516/1170x1470_BS_2016_05_132_front.png",
26    },
27  ];
28
29
30
31
32  return (
33    <Router>
34      <Routes>
35        <Route path="/" element={<Hero data={data}/>} />
36        <Route path="/products/:id" element={ <FullCard data={data} />} />
37      </Routes>
38    </Router>
39  );
40}
41
42export default App;
43// import { popularProducts } from "./data";
44import { Link } from "react-router-dom";
45import "./Card.css";
46
47const Card = ({ data }) => {
48  return (
49    <div className="Maincontainer">
50      <div className="CardContainer">
51        {data.map((items, index) => {
52          return (
53            <div className="cards" key={index}>
54              <img src={items.img} alt="/" />
55
56              <Link to={`/products/${items.id}`}>CheckItem</Link>
57            </div>
58          );
59        })}
60      </div>
61    </div>
62  );
63};
64
65export default Card;
66import { useParams  } from 'react-router-dom'
67
68const FullCard = ({data}) => {
69
70    const {id} = useParams();
71
72
73  return (
74    <div className='container'>
75        {data.filter(  (items )=> items.id === id ).map((items,index) =>{
76            return (
77                <div key={items} className="container2">
78                    <h1>{items.burh}</h1>
79                    {/* <img src={items.image} alt="/" /> */}
80                </div>
81            );
82        })}
83    </div>
84  )
85}
86{data
87  .filter((items) => items.id === id) // <-- type mismatch comparision
88  .map((items, index) => {
89    return (
90      <div key={items.id} className="container2">
91        <h1>{items.burh}</h1>
92        {/* <img src={items.image} alt="/" /> */}
93      </div>
94    );
95  })}
96.filter((items) => items.id == id)
97.filter((items) => String(items.id) === id)
98

1CREATE TABLE `category`(
2   `category_id` smallint(3) unsigned not null auto_increment primary key,   
3   `category_name` VARCHAR(40) NOT NULL,
4   `category_url` VARCHAR(40) NOT NULL,
5   `icon`varchar(150) default null,
6   `gender` enum('Men','Woman','Baby') default null,
7   `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9INSERT INTO `category` (`category_id`, `category_name`, `category_url`, `icon`, `gender`, `parent`) VALUES
10-- Mens section
11(1, 'Mens Fashion', 'mens-fashion', null, null, null), -- Mens fasion
12-- clothes mens
13(2, 'Clothing', 'clothing', 'clothing.svg', null, 1), -- (level 2)
14(3, 'Shoes', 'Shoes', 'shoes.svg', null, 1), -- (level 2)
15(4, 'Complements', 'complements', 'complements.svg', null, 1), -- (level 2)
16
17(5, 'Shirts', 'shirts', null, null, 2), -- (level 3)
18(6, 'Casual shirts', 'casaul-shirts', null, null, 5), -- (level 4)
19(7, 'Suit shirts ', 'suit-shirts', null, null, 5), --(level 4)
20
21(8, 'Jeans', 'jeans', null, null, 2), -- (level 3)
22(9, 'Jeans skinny', 'jeans-skinny', null, null, 8), -- (level 4)
23(10, 'Jeans slim fit', 'jeans-slim-fit', null, null, 8), -- (level 4)
24
25(11, 'Underwear', 'Underwear', null, null, 2), -- (level 3)
26(12, 'Socks', 'socks', null, null, 11), -- (level 4)
27
28-- Woman section
29(13, 'Woman Fashion', 'woman-fasion', null, null, null), -- (level 1)
30-- Clothes woman
31(14, 'Clothing', 'clothing', 'clothing.svg', null, 13), -- (level 2)
32(15, 'Shoes', 'Shoes', 'shoes.svg', null, 13), -- (level 2)
33(16, 'Complements', 'complements', 'complements.svg', null, 13), -- (level 2)
34
35(17, 'Shirts', 'shirts', null, null, 13), -- (level 3)
36(18, 'Casual shirts', 'casaul-shirts', null, null, 17), -- (level 4)
37(19, 'Suit shirts', 'suit-shirts', null, null, 17), -- (level 4)
38(20, 'Top shirt', 'top-shirt', null, null, 17), -- (level 4)
39
40(21, 'Jeans', 'jeans', null, null, 13), -- (level 3)
41(22, 'Jeans skinny', 'jeans-skinny', null, null, 21), -- (level 4)
42(23, 'Jeans slim fit', 'jeans-slim-fit', null, null, 21), -- (level 4)
43
44(24, 'Underwear', 'Underwear', null, null, 13), -- (level 3)
45(25, 'Socks', 'socks', null, null, 24), -- (level 4)
46
47-- Childeren section
48(13, 'Childerens Fasion', 'childeren-fashion', null, null, null), -- (level 1)
49-- Clothes childeren etc..
50$categories = $db->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
51$cat = $categories->fetchAll(PDO::FETCH_ASSOC);
52
53$arrayMenu = array();
54
55foreach($cat as $row){
56$arrayMenu[$row['category_id']] = array("parent" => $row['parent'], "category_name" => $row['category_name'], "category_url" => $row['category_url']);
57}
58
59function createTree($array, $curParent, $currLevel = 0, $prevLevel = -1) {
60
61    foreach ($array as $categoryId => $category) :
62
63        if ($curParent == $category['parent']) :
64
65            if($category['parent']==0) $class="dropdown"; else $class="sub_menu";
66            if ($currLevel > $prevLevel) echo " <ul class='$class'> ";
67
68
69            if ($currLevel == $prevLevel) echo " </li> ";
70
71            echo '<li id="'.$categoryId.'" ><a href="'.$category['category_url'].'">'.$category['category_name'].'</a>';
72
73            if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
74
75            $currLevel++;
76
77            createTree ($array, $categoryId, $currLevel, $prevLevel);
78
79            $currLevel--;
80        endif;
81    endforeach;
82
83    if ($currLevel == $prevLevel) echo " </li> </ul> ";
84}
85?>
86<div class="nav">
87<?php
88if ($cat != null) createTree($arrayMenu, 0);
89?>
90nav ul li { 
91    background:#f1f1f1; list-style: none;
92}
93ul.dropdown { 
94    position:relative; 
95    width:auto; 
96    font:12px Arial, Helvetica, sans-serif; 
97}
98ul.dropdown li { 
99    float:left; zoom:1; 
100    height:auto; 
101    min-height: 30px; 
102    padding:6px 2px 0 2px; 
103}
104
105ul.dropdown li li { 
106    border-right:1px solid #ccc; 
107    border-left:1px solid #ccc; 
108    margin-left:-30px;
109}
110ul.dropdown a:hover { 
111    color:#000; 
112} 
113ul.dropdown a:active { color:#ffa500; }
114
115ul.dropdown li a { 
116    display:block; 
117    padding:4px 8px; 
118    color:#000; 
119    text-decoration:none; 
120    font:bold 12px Arial, Helvetica, sans-serif; 
121}
122
123ul.dropdown li:last-child a { border-right:none;} /* Doesn't work in IE */
124ul.dropdown li:hover { 
125    color:#000; 
126    background:#e7e7e7; 
127    position:relative; }
128ul.dropdown li.hover a { color:#000; }
129ul.dropdown ul { 
130    text-align:left; 
131    visibility: hidden; 
132    position: absolute; 
133    left:-10px; 
134    top:36px; }
135ul.dropdown ul li { 
136    background:#f1f1f1; 
137    border-bottom:1px solid #ccc; 
138    float:none; width:120px; 
139    height:auto; 
140    min-height: 25px; 
141}
142ul.dropdown ul li a { 
143    border-right:none; 
144    width:100%; 
145    display:inline-block; color:#000; }
146ul.dropdown ul ul { 
147    left:100%; 
148    top:0; 
149}
150ul.dropdown li:hover > ul { visibility:visible; }
151// Tab header ///////
152function openPage(pageName, elmnt, color) {
153  // Hide all elements with class="tabcontent" by default */
154  var i, tabcontent, tablinks;
155  tabcontent = document.getElementsByClassName("tabcontent");
156  for (i = 0; i < tabcontent.length; i++) {
157    tabcontent[i].style.display = "none";
158  }
159
160  // Remove the background color of all tablinks/buttons
161  tablinks = document.getElementsByClassName("tablink");
162  for (i = 0; i < tablinks.length; i++) {
163    tablinks[i].style.background = "";
164  }
165
166  // Show the specific tab content
167  document.getElementById(pageName).style.display = "block";
168
169  // Add the specific color to the button used to open the tab content
170  elmnt.style.background = color;
171}
172
173// Get the element with id="defaultOpen" and click on it
174document.getElementById("defaultOpen").click();
175
176
177// Accordion ///////
178var acc = document.getElementsByClassName("accordion");
179var i;
180
181for (i = 0; i < acc.length; i++) {
182  acc[i].addEventListener("click", function() {
183    this.classList.toggle("active");
184    var panel = this.nextElementSibling;
185    if (panel.style.maxHeight) {
186      panel.style.maxHeight = null;
187    } else {
188      panel.style.maxHeight = panel.scrollHeight + "px";
189    }
190  });
191}/* TAB HEADER MENU */
192
193#wrapper-tablink {
194  display: flex;
195  flex-flow: row nowrap;
196  justify-content: center;
197  align-items: center;
198}
199
200
201/* Style tab links */
202
203.tablink {
204  background-color: #555;
205  color: white;
206  border: none;
207  outline: none;
208  cursor: pointer;
209  padding: 14px 16px;
210  font-size: 17px;
211  width: 25%;
212}
213
214.tablink:hover {
215  background-color: #777;
216}
217
218.tablink .active {
219  color: #000;
220}
221
222
223/* Style the tab content (and add height:100% for full page content) */
224
225.tabcontent {
226  color: white;
227  display: none;
228  padding: 100px 20px;
229  height: 100%;
230  overflow-y: auto;
231}
232
233
234/*
235#moda-mujer {background-color: var(--secundary-color);}
236#moda-hombre {background-color: #00cc99;}
237#electronica {background-color: #3399ff;}
238#cursos {background-color: #9933ff;}
239*/
240
241.wrapper-icons-bars {
242  display: flex;
243  flex-flow: row nowrap;
244  justify-content: center;
245  align-items: center;
246  margin: 10px 0 20px 0;
247}
248
249.wrapper-icons-bars a {
250  display: block;
251  position: relative;
252  background-color: #FFFFFF;
253  border-bottom: 3px solid var(--body-color);
254  border-right: 1px solid #F1F1F1;
255  padding: 20px;
256  transition: all 0.3s ease;
257}
258
259.wrapper-icons-bars a:hover {
260  display: block;
261  position: relative;
262  border-bottom: 3px solid var(--secundary-color);
263  padding: 25px;
264  transition: all 0.3s ease;
265}
266
267
268/* ACCORDIAN CONTENT */
269
270.wrapper-accordion {
271  display: flex;
272  justify-content: center;
273  width: 100%;
274  margin-bottom: 80px;
275}
276
277.accordion {
278  display: flex;
279  position: relative;
280  justify-content: center;
281  align-items: center;
282  background-color: #eee;
283  color: #444;
284  cursor: pointer;
285  padding: 18px;
286  width: 100%;
287  max-width: 500px;
288  min-width: 500px;
289  border: none;
290  text-align: left;
291  outline: none;
292  font-size: 15px;
293  transition: 0.4s;
294}
295
296.active,
297.accordion:hover {
298  background-color: #ccc;
299}
300
301.accordion:after {
302  content: '\002B';
303  color: #777;
304  font-weight: bold;
305  display: block;
306  position: absolute;
307  right: 25px;
308  margin-left: 5px;
309}
310
311.active:after {
312  content: "\2212";
313}
314
315.panel {
316  background-color: white;
317  color: var(--body-color);
318  max-height: 0;
319  width: 100%;
320  overflow: hidden;
321  transition: max-height 0.2s ease-out;
322}
323
324.inner-panel {
325  padding: 20px 20px;
326  width: 100%;
327  max-width: 500px;
328}
329
330.wrapper-accordion a {
331  color: var(--body-color);
332}<!-- Create Tab links header (Table: controllers) -->
333<div id="wrapper-tablink">
334  <button class="tablink" onclick="openPage('mens-fashion', this, 'blue')" id="defaultOpen">Mens Fashion</button>
335  <button class="tablink" onclick="openPage('womans-fashion', this, 'red')" id="defaultOpen">Womans Fashion</button>
336</div>
337
338<div id='mens-fashion' class='tabcontent' style='blue'>
339  <article class='wrapper-accordion'>
340    <div>
341      <h2><a href='mens-fashion/clothes'>Clothes</a></h2>
342      <div class='wrapper-icons-bars'>icons</div>
343      <button class='accordion active'>Clothes</button>
344      <div class='panel' style='max-height: 1000px;'>
345        <div class='inner-panel'>
346          <h5><a href='mens-fashion/clothes'>Clothes</a></h5>
347          <a>Tshirt </a>
348        </div>
349      </div>
350
351      <button class='accordion'>Shoes</button>
352      <div class='panel'>
353        <div class='inner-panel'>
354          <h5><a href='mens-fashion/shoes'>Shoes</a></h5>
355          <a>Deport shoes </a>
356        </div>
357      </div>
358
359      <button class='accordion'>Complements</button>
360      <div class='panel'>
361        <div class='inner-panel'>
362          <h5><a href='mens-fashion/complemnts'>Shoes</a></h5>
363          <a>Clock </a>
364        </div>
365      </div>
366    </div>
367  </article>
368
369</div>
370
371<div id='womans-fashion' class='tabcontent' style='red'>
372  <article class='wrapper-accordion'>
373    <div>
374      <h2><a href='womans-fashion/clothes'>Clothes</a></h2>
375      <div class='wrapper-icons-bars'>icons</div>
376      <button class='accordion active'>Clothes</button>
377      <div class='panel' style='max-height: 1000px;'>
378        <div class='inner-panel'>
379          <h5><a href='womans-fashion/clothes'>Clothes</a></h5>
380          <a>Tshirt </a>
381        </div>
382      </div>
383
384      <button class='accordion'>Shoes</button>
385      <div class='panel'>
386        <div class='inner-panel'>
387          <h5><a href='womans-fashion/shoes'>Shoes</a></h5>
388          <a>Deport shoes </a>
389        </div>
390      </div>
391
392      <button class='accordion'>Complements</button>
393      <div class='panel'>
394        <div class='inner-panel'>
395          <h5><a href='womans-fashion/complemnts'>Shoes</a></h5>
396          <a>Clock </a>
397        </div>
398      </div>
399    </div>
400  </article>
401
402</div>// convert the categories array to parents with nested children
403function convertToLevels ($array) {
404    // First, convert the array so that the keys match the ids
405    $reKeyed = array();
406    foreach ($array as $item) {
407        $reKeyed[$item['category_id']] = $item;
408    }
409    // Next, use references to associate children with parents
410    foreach ($reKeyed as $id => $item) {
411        if (isset($item['parent'], $reKeyed[$item['parent']])) {
412            $reKeyed[$item['parent']]['children'][] =& $reKeyed[$id];
413        }
414    }
415    // Finally, go through and remove children from the outer level
416    foreach ($reKeyed as $id => $item) {
417        if (isset($item['parent'])) {
418            unset($reKeyed[$id]);
419        }
420    }
421    return $reKeyed;
422}
423
424// create menu li
425function createMenuItem($item, $url){
426    $html  = '';
427    $html .= '<li class="menu-item '.(!empty($item['children']) ? 'has-child' : '').'">';
428    $html .=    '<a href="'.$url.'" class="menu-link">';
429                    if(!empty($item['icon'])):
430    $html .=            '<i class="'.$item['icon'].'"></i>';
431                    endif;
432    $html .=        $item['category_name'];
433    $html .=    '</a>';
434                if(!empty($item['children'])):
435    $html .=        createMenu($item['children'], $url);
436                endif;
437    $html .= '</li>';
438    
439    return $html;
440}
441
442// menu
443function createMenu($menu, $url_prefix=''){
444    $html  = '';
445    $html .= '<ul class="menu">';
446                foreach($menu as $item):
447    $html .=        createMenuItem($item, $url_prefix.'/'.$item['category_url']);
448                endforeach;
449    $html .= '</ul>';
450
451    return $html;
452}
453

1CREATE TABLE `category`(
2   `category_id` smallint(3) unsigned not null auto_increment primary key,   
3   `category_name` VARCHAR(40) NOT NULL,
4   `category_url` VARCHAR(40) NOT NULL,
5   `icon`varchar(150) default null,
6   `gender` enum('Men','Woman','Baby') default null,
7   `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9INSERT INTO `category` (`category_id`, `category_name`, `category_url`, `icon`, `gender`, `parent`) VALUES
10-- Mens section
11(1, 'Mens Fashion', 'mens-fashion', null, null, null), -- Mens fasion
12-- clothes mens
13(2, 'Clothing', 'clothing', 'clothing.svg', null, 1), -- (level 2)
14(3, 'Shoes', 'Shoes', 'shoes.svg', null, 1), -- (level 2)
15(4, 'Complements', 'complements', 'complements.svg', null, 1), -- (level 2)
16
17(5, 'Shirts', 'shirts', null, null, 2), -- (level 3)
18(6, 'Casual shirts', 'casaul-shirts', null, null, 5), -- (level 4)
19(7, 'Suit shirts ', 'suit-shirts', null, null, 5), --(level 4)
20
21(8, 'Jeans', 'jeans', null, null, 2), -- (level 3)
22(9, 'Jeans skinny', 'jeans-skinny', null, null, 8), -- (level 4)
23(10, 'Jeans slim fit', 'jeans-slim-fit', null, null, 8), -- (level 4)
24
25(11, 'Underwear', 'Underwear', null, null, 2), -- (level 3)
26(12, 'Socks', 'socks', null, null, 11), -- (level 4)
27
28-- Woman section
29(13, 'Woman Fashion', 'woman-fasion', null, null, null), -- (level 1)
30-- Clothes woman
31(14, 'Clothing', 'clothing', 'clothing.svg', null, 13), -- (level 2)
32(15, 'Shoes', 'Shoes', 'shoes.svg', null, 13), -- (level 2)
33(16, 'Complements', 'complements', 'complements.svg', null, 13), -- (level 2)
34
35(17, 'Shirts', 'shirts', null, null, 13), -- (level 3)
36(18, 'Casual shirts', 'casaul-shirts', null, null, 17), -- (level 4)
37(19, 'Suit shirts', 'suit-shirts', null, null, 17), -- (level 4)
38(20, 'Top shirt', 'top-shirt', null, null, 17), -- (level 4)
39
40(21, 'Jeans', 'jeans', null, null, 13), -- (level 3)
41(22, 'Jeans skinny', 'jeans-skinny', null, null, 21), -- (level 4)
42(23, 'Jeans slim fit', 'jeans-slim-fit', null, null, 21), -- (level 4)
43
44(24, 'Underwear', 'Underwear', null, null, 13), -- (level 3)
45(25, 'Socks', 'socks', null, null, 24), -- (level 4)
46
47-- Childeren section
48(13, 'Childerens Fasion', 'childeren-fashion', null, null, null), -- (level 1)
49-- Clothes childeren etc..
50$categories = $db->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
51$cat = $categories->fetchAll(PDO::FETCH_ASSOC);
52
53$arrayMenu = array();
54
55foreach($cat as $row){
56$arrayMenu[$row['category_id']] = array("parent" => $row['parent'], "category_name" => $row['category_name'], "category_url" => $row['category_url']);
57}
58
59function createTree($array, $curParent, $currLevel = 0, $prevLevel = -1) {
60
61    foreach ($array as $categoryId => $category) :
62
63        if ($curParent == $category['parent']) :
64
65            if($category['parent']==0) $class="dropdown"; else $class="sub_menu";
66            if ($currLevel > $prevLevel) echo " <ul class='$class'> ";
67
68
69            if ($currLevel == $prevLevel) echo " </li> ";
70
71            echo '<li id="'.$categoryId.'" ><a href="'.$category['category_url'].'">'.$category['category_name'].'</a>';
72
73            if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
74
75            $currLevel++;
76
77            createTree ($array, $categoryId, $currLevel, $prevLevel);
78
79            $currLevel--;
80        endif;
81    endforeach;
82
83    if ($currLevel == $prevLevel) echo " </li> </ul> ";
84}
85?>
86<div class="nav">
87<?php
88if ($cat != null) createTree($arrayMenu, 0);
89?>
90nav ul li { 
91    background:#f1f1f1; list-style: none;
92}
93ul.dropdown { 
94    position:relative; 
95    width:auto; 
96    font:12px Arial, Helvetica, sans-serif; 
97}
98ul.dropdown li { 
99    float:left; zoom:1; 
100    height:auto; 
101    min-height: 30px; 
102    padding:6px 2px 0 2px; 
103}
104
105ul.dropdown li li { 
106    border-right:1px solid #ccc; 
107    border-left:1px solid #ccc; 
108    margin-left:-30px;
109}
110ul.dropdown a:hover { 
111    color:#000; 
112} 
113ul.dropdown a:active { color:#ffa500; }
114
115ul.dropdown li a { 
116    display:block; 
117    padding:4px 8px; 
118    color:#000; 
119    text-decoration:none; 
120    font:bold 12px Arial, Helvetica, sans-serif; 
121}
122
123ul.dropdown li:last-child a { border-right:none;} /* Doesn't work in IE */
124ul.dropdown li:hover { 
125    color:#000; 
126    background:#e7e7e7; 
127    position:relative; }
128ul.dropdown li.hover a { color:#000; }
129ul.dropdown ul { 
130    text-align:left; 
131    visibility: hidden; 
132    position: absolute; 
133    left:-10px; 
134    top:36px; }
135ul.dropdown ul li { 
136    background:#f1f1f1; 
137    border-bottom:1px solid #ccc; 
138    float:none; width:120px; 
139    height:auto; 
140    min-height: 25px; 
141}
142ul.dropdown ul li a { 
143    border-right:none; 
144    width:100%; 
145    display:inline-block; color:#000; }
146ul.dropdown ul ul { 
147    left:100%; 
148    top:0; 
149}
150ul.dropdown li:hover > ul { visibility:visible; }
151// Tab header ///////
152function openPage(pageName, elmnt, color) {
153  // Hide all elements with class="tabcontent" by default */
154  var i, tabcontent, tablinks;
155  tabcontent = document.getElementsByClassName("tabcontent");
156  for (i = 0; i < tabcontent.length; i++) {
157    tabcontent[i].style.display = "none";
158  }
159
160  // Remove the background color of all tablinks/buttons
161  tablinks = document.getElementsByClassName("tablink");
162  for (i = 0; i < tablinks.length; i++) {
163    tablinks[i].style.background = "";
164  }
165
166  // Show the specific tab content
167  document.getElementById(pageName).style.display = "block";
168
169  // Add the specific color to the button used to open the tab content
170  elmnt.style.background = color;
171}
172
173// Get the element with id="defaultOpen" and click on it
174document.getElementById("defaultOpen").click();
175
176
177// Accordion ///////
178var acc = document.getElementsByClassName("accordion");
179var i;
180
181for (i = 0; i < acc.length; i++) {
182  acc[i].addEventListener("click", function() {
183    this.classList.toggle("active");
184    var panel = this.nextElementSibling;
185    if (panel.style.maxHeight) {
186      panel.style.maxHeight = null;
187    } else {
188      panel.style.maxHeight = panel.scrollHeight + "px";
189    }
190  });
191}/* TAB HEADER MENU */
192
193#wrapper-tablink {
194  display: flex;
195  flex-flow: row nowrap;
196  justify-content: center;
197  align-items: center;
198}
199
200
201/* Style tab links */
202
203.tablink {
204  background-color: #555;
205  color: white;
206  border: none;
207  outline: none;
208  cursor: pointer;
209  padding: 14px 16px;
210  font-size: 17px;
211  width: 25%;
212}
213
214.tablink:hover {
215  background-color: #777;
216}
217
218.tablink .active {
219  color: #000;
220}
221
222
223/* Style the tab content (and add height:100% for full page content) */
224
225.tabcontent {
226  color: white;
227  display: none;
228  padding: 100px 20px;
229  height: 100%;
230  overflow-y: auto;
231}
232
233
234/*
235#moda-mujer {background-color: var(--secundary-color);}
236#moda-hombre {background-color: #00cc99;}
237#electronica {background-color: #3399ff;}
238#cursos {background-color: #9933ff;}
239*/
240
241.wrapper-icons-bars {
242  display: flex;
243  flex-flow: row nowrap;
244  justify-content: center;
245  align-items: center;
246  margin: 10px 0 20px 0;
247}
248
249.wrapper-icons-bars a {
250  display: block;
251  position: relative;
252  background-color: #FFFFFF;
253  border-bottom: 3px solid var(--body-color);
254  border-right: 1px solid #F1F1F1;
255  padding: 20px;
256  transition: all 0.3s ease;
257}
258
259.wrapper-icons-bars a:hover {
260  display: block;
261  position: relative;
262  border-bottom: 3px solid var(--secundary-color);
263  padding: 25px;
264  transition: all 0.3s ease;
265}
266
267
268/* ACCORDIAN CONTENT */
269
270.wrapper-accordion {
271  display: flex;
272  justify-content: center;
273  width: 100%;
274  margin-bottom: 80px;
275}
276
277.accordion {
278  display: flex;
279  position: relative;
280  justify-content: center;
281  align-items: center;
282  background-color: #eee;
283  color: #444;
284  cursor: pointer;
285  padding: 18px;
286  width: 100%;
287  max-width: 500px;
288  min-width: 500px;
289  border: none;
290  text-align: left;
291  outline: none;
292  font-size: 15px;
293  transition: 0.4s;
294}
295
296.active,
297.accordion:hover {
298  background-color: #ccc;
299}
300
301.accordion:after {
302  content: '\002B';
303  color: #777;
304  font-weight: bold;
305  display: block;
306  position: absolute;
307  right: 25px;
308  margin-left: 5px;
309}
310
311.active:after {
312  content: "\2212";
313}
314
315.panel {
316  background-color: white;
317  color: var(--body-color);
318  max-height: 0;
319  width: 100%;
320  overflow: hidden;
321  transition: max-height 0.2s ease-out;
322}
323
324.inner-panel {
325  padding: 20px 20px;
326  width: 100%;
327  max-width: 500px;
328}
329
330.wrapper-accordion a {
331  color: var(--body-color);
332}<!-- Create Tab links header (Table: controllers) -->
333<div id="wrapper-tablink">
334  <button class="tablink" onclick="openPage('mens-fashion', this, 'blue')" id="defaultOpen">Mens Fashion</button>
335  <button class="tablink" onclick="openPage('womans-fashion', this, 'red')" id="defaultOpen">Womans Fashion</button>
336</div>
337
338<div id='mens-fashion' class='tabcontent' style='blue'>
339  <article class='wrapper-accordion'>
340    <div>
341      <h2><a href='mens-fashion/clothes'>Clothes</a></h2>
342      <div class='wrapper-icons-bars'>icons</div>
343      <button class='accordion active'>Clothes</button>
344      <div class='panel' style='max-height: 1000px;'>
345        <div class='inner-panel'>
346          <h5><a href='mens-fashion/clothes'>Clothes</a></h5>
347          <a>Tshirt </a>
348        </div>
349      </div>
350
351      <button class='accordion'>Shoes</button>
352      <div class='panel'>
353        <div class='inner-panel'>
354          <h5><a href='mens-fashion/shoes'>Shoes</a></h5>
355          <a>Deport shoes </a>
356        </div>
357      </div>
358
359      <button class='accordion'>Complements</button>
360      <div class='panel'>
361        <div class='inner-panel'>
362          <h5><a href='mens-fashion/complemnts'>Shoes</a></h5>
363          <a>Clock </a>
364        </div>
365      </div>
366    </div>
367  </article>
368
369</div>
370
371<div id='womans-fashion' class='tabcontent' style='red'>
372  <article class='wrapper-accordion'>
373    <div>
374      <h2><a href='womans-fashion/clothes'>Clothes</a></h2>
375      <div class='wrapper-icons-bars'>icons</div>
376      <button class='accordion active'>Clothes</button>
377      <div class='panel' style='max-height: 1000px;'>
378        <div class='inner-panel'>
379          <h5><a href='womans-fashion/clothes'>Clothes</a></h5>
380          <a>Tshirt </a>
381        </div>
382      </div>
383
384      <button class='accordion'>Shoes</button>
385      <div class='panel'>
386        <div class='inner-panel'>
387          <h5><a href='womans-fashion/shoes'>Shoes</a></h5>
388          <a>Deport shoes </a>
389        </div>
390      </div>
391
392      <button class='accordion'>Complements</button>
393      <div class='panel'>
394        <div class='inner-panel'>
395          <h5><a href='womans-fashion/complemnts'>Shoes</a></h5>
396          <a>Clock </a>
397        </div>
398      </div>
399    </div>
400  </article>
401
402</div>// convert the categories array to parents with nested children
403function convertToLevels ($array) {
404    // First, convert the array so that the keys match the ids
405    $reKeyed = array();
406    foreach ($array as $item) {
407        $reKeyed[$item['category_id']] = $item;
408    }
409    // Next, use references to associate children with parents
410    foreach ($reKeyed as $id => $item) {
411        if (isset($item['parent'], $reKeyed[$item['parent']])) {
412            $reKeyed[$item['parent']]['children'][] =& $reKeyed[$id];
413        }
414    }
415    // Finally, go through and remove children from the outer level
416    foreach ($reKeyed as $id => $item) {
417        if (isset($item['parent'])) {
418            unset($reKeyed[$id]);
419        }
420    }
421    return $reKeyed;
422}
423
424// create menu li
425function createMenuItem($item, $url){
426    $html  = '';
427    $html .= '<li class="menu-item '.(!empty($item['children']) ? 'has-child' : '').'">';
428    $html .=    '<a href="'.$url.'" class="menu-link">';
429                    if(!empty($item['icon'])):
430    $html .=            '<i class="'.$item['icon'].'"></i>';
431                    endif;
432    $html .=        $item['category_name'];
433    $html .=    '</a>';
434                if(!empty($item['children'])):
435    $html .=        createMenu($item['children'], $url);
436                endif;
437    $html .= '</li>';
438    
439    return $html;
440}
441
442// menu
443function createMenu($menu, $url_prefix=''){
444    $html  = '';
445    $html .= '<ul class="menu">';
446                foreach($menu as $item):
447    $html .=        createMenuItem($item, $url_prefix.'/'.$item['category_url']);
448                endforeach;
449    $html .= '</ul>';
450
451    return $html;
452}
453$categories = $pdo->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
454$cat = convertToLevels($categories->fetchAll(PDO::FETCH_ASSOC));
455

1CREATE TABLE `category`(
2   `category_id` smallint(3) unsigned not null auto_increment primary key,   
3   `category_name` VARCHAR(40) NOT NULL,
4   `category_url` VARCHAR(40) NOT NULL,
5   `icon`varchar(150) default null,
6   `gender` enum('Men','Woman','Baby') default null,
7   `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9INSERT INTO `category` (`category_id`, `category_name`, `category_url`, `icon`, `gender`, `parent`) VALUES
10-- Mens section
11(1, 'Mens Fashion', 'mens-fashion', null, null, null), -- Mens fasion
12-- clothes mens
13(2, 'Clothing', 'clothing', 'clothing.svg', null, 1), -- (level 2)
14(3, 'Shoes', 'Shoes', 'shoes.svg', null, 1), -- (level 2)
15(4, 'Complements', 'complements', 'complements.svg', null, 1), -- (level 2)
16
17(5, 'Shirts', 'shirts', null, null, 2), -- (level 3)
18(6, 'Casual shirts', 'casaul-shirts', null, null, 5), -- (level 4)
19(7, 'Suit shirts ', 'suit-shirts', null, null, 5), --(level 4)
20
21(8, 'Jeans', 'jeans', null, null, 2), -- (level 3)
22(9, 'Jeans skinny', 'jeans-skinny', null, null, 8), -- (level 4)
23(10, 'Jeans slim fit', 'jeans-slim-fit', null, null, 8), -- (level 4)
24
25(11, 'Underwear', 'Underwear', null, null, 2), -- (level 3)
26(12, 'Socks', 'socks', null, null, 11), -- (level 4)
27
28-- Woman section
29(13, 'Woman Fashion', 'woman-fasion', null, null, null), -- (level 1)
30-- Clothes woman
31(14, 'Clothing', 'clothing', 'clothing.svg', null, 13), -- (level 2)
32(15, 'Shoes', 'Shoes', 'shoes.svg', null, 13), -- (level 2)
33(16, 'Complements', 'complements', 'complements.svg', null, 13), -- (level 2)
34
35(17, 'Shirts', 'shirts', null, null, 13), -- (level 3)
36(18, 'Casual shirts', 'casaul-shirts', null, null, 17), -- (level 4)
37(19, 'Suit shirts', 'suit-shirts', null, null, 17), -- (level 4)
38(20, 'Top shirt', 'top-shirt', null, null, 17), -- (level 4)
39
40(21, 'Jeans', 'jeans', null, null, 13), -- (level 3)
41(22, 'Jeans skinny', 'jeans-skinny', null, null, 21), -- (level 4)
42(23, 'Jeans slim fit', 'jeans-slim-fit', null, null, 21), -- (level 4)
43
44(24, 'Underwear', 'Underwear', null, null, 13), -- (level 3)
45(25, 'Socks', 'socks', null, null, 24), -- (level 4)
46
47-- Childeren section
48(13, 'Childerens Fasion', 'childeren-fashion', null, null, null), -- (level 1)
49-- Clothes childeren etc..
50$categories = $db->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
51$cat = $categories->fetchAll(PDO::FETCH_ASSOC);
52
53$arrayMenu = array();
54
55foreach($cat as $row){
56$arrayMenu[$row['category_id']] = array("parent" => $row['parent'], "category_name" => $row['category_name'], "category_url" => $row['category_url']);
57}
58
59function createTree($array, $curParent, $currLevel = 0, $prevLevel = -1) {
60
61    foreach ($array as $categoryId => $category) :
62
63        if ($curParent == $category['parent']) :
64
65            if($category['parent']==0) $class="dropdown"; else $class="sub_menu";
66            if ($currLevel > $prevLevel) echo " <ul class='$class'> ";
67
68
69            if ($currLevel == $prevLevel) echo " </li> ";
70
71            echo '<li id="'.$categoryId.'" ><a href="'.$category['category_url'].'">'.$category['category_name'].'</a>';
72
73            if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
74
75            $currLevel++;
76
77            createTree ($array, $categoryId, $currLevel, $prevLevel);
78
79            $currLevel--;
80        endif;
81    endforeach;
82
83    if ($currLevel == $prevLevel) echo " </li> </ul> ";
84}
85?>
86<div class="nav">
87<?php
88if ($cat != null) createTree($arrayMenu, 0);
89?>
90nav ul li { 
91    background:#f1f1f1; list-style: none;
92}
93ul.dropdown { 
94    position:relative; 
95    width:auto; 
96    font:12px Arial, Helvetica, sans-serif; 
97}
98ul.dropdown li { 
99    float:left; zoom:1; 
100    height:auto; 
101    min-height: 30px; 
102    padding:6px 2px 0 2px; 
103}
104
105ul.dropdown li li { 
106    border-right:1px solid #ccc; 
107    border-left:1px solid #ccc; 
108    margin-left:-30px;
109}
110ul.dropdown a:hover { 
111    color:#000; 
112} 
113ul.dropdown a:active { color:#ffa500; }
114
115ul.dropdown li a { 
116    display:block; 
117    padding:4px 8px; 
118    color:#000; 
119    text-decoration:none; 
120    font:bold 12px Arial, Helvetica, sans-serif; 
121}
122
123ul.dropdown li:last-child a { border-right:none;} /* Doesn't work in IE */
124ul.dropdown li:hover { 
125    color:#000; 
126    background:#e7e7e7; 
127    position:relative; }
128ul.dropdown li.hover a { color:#000; }
129ul.dropdown ul { 
130    text-align:left; 
131    visibility: hidden; 
132    position: absolute; 
133    left:-10px; 
134    top:36px; }
135ul.dropdown ul li { 
136    background:#f1f1f1; 
137    border-bottom:1px solid #ccc; 
138    float:none; width:120px; 
139    height:auto; 
140    min-height: 25px; 
141}
142ul.dropdown ul li a { 
143    border-right:none; 
144    width:100%; 
145    display:inline-block; color:#000; }
146ul.dropdown ul ul { 
147    left:100%; 
148    top:0; 
149}
150ul.dropdown li:hover > ul { visibility:visible; }
151// Tab header ///////
152function openPage(pageName, elmnt, color) {
153  // Hide all elements with class="tabcontent" by default */
154  var i, tabcontent, tablinks;
155  tabcontent = document.getElementsByClassName("tabcontent");
156  for (i = 0; i < tabcontent.length; i++) {
157    tabcontent[i].style.display = "none";
158  }
159
160  // Remove the background color of all tablinks/buttons
161  tablinks = document.getElementsByClassName("tablink");
162  for (i = 0; i < tablinks.length; i++) {
163    tablinks[i].style.background = "";
164  }
165
166  // Show the specific tab content
167  document.getElementById(pageName).style.display = "block";
168
169  // Add the specific color to the button used to open the tab content
170  elmnt.style.background = color;
171}
172
173// Get the element with id="defaultOpen" and click on it
174document.getElementById("defaultOpen").click();
175
176
177// Accordion ///////
178var acc = document.getElementsByClassName("accordion");
179var i;
180
181for (i = 0; i < acc.length; i++) {
182  acc[i].addEventListener("click", function() {
183    this.classList.toggle("active");
184    var panel = this.nextElementSibling;
185    if (panel.style.maxHeight) {
186      panel.style.maxHeight = null;
187    } else {
188      panel.style.maxHeight = panel.scrollHeight + "px";
189    }
190  });
191}/* TAB HEADER MENU */
192
193#wrapper-tablink {
194  display: flex;
195  flex-flow: row nowrap;
196  justify-content: center;
197  align-items: center;
198}
199
200
201/* Style tab links */
202
203.tablink {
204  background-color: #555;
205  color: white;
206  border: none;
207  outline: none;
208  cursor: pointer;
209  padding: 14px 16px;
210  font-size: 17px;
211  width: 25%;
212}
213
214.tablink:hover {
215  background-color: #777;
216}
217
218.tablink .active {
219  color: #000;
220}
221
222
223/* Style the tab content (and add height:100% for full page content) */
224
225.tabcontent {
226  color: white;
227  display: none;
228  padding: 100px 20px;
229  height: 100%;
230  overflow-y: auto;
231}
232
233
234/*
235#moda-mujer {background-color: var(--secundary-color);}
236#moda-hombre {background-color: #00cc99;}
237#electronica {background-color: #3399ff;}
238#cursos {background-color: #9933ff;}
239*/
240
241.wrapper-icons-bars {
242  display: flex;
243  flex-flow: row nowrap;
244  justify-content: center;
245  align-items: center;
246  margin: 10px 0 20px 0;
247}
248
249.wrapper-icons-bars a {
250  display: block;
251  position: relative;
252  background-color: #FFFFFF;
253  border-bottom: 3px solid var(--body-color);
254  border-right: 1px solid #F1F1F1;
255  padding: 20px;
256  transition: all 0.3s ease;
257}
258
259.wrapper-icons-bars a:hover {
260  display: block;
261  position: relative;
262  border-bottom: 3px solid var(--secundary-color);
263  padding: 25px;
264  transition: all 0.3s ease;
265}
266
267
268/* ACCORDIAN CONTENT */
269
270.wrapper-accordion {
271  display: flex;
272  justify-content: center;
273  width: 100%;
274  margin-bottom: 80px;
275}
276
277.accordion {
278  display: flex;
279  position: relative;
280  justify-content: center;
281  align-items: center;
282  background-color: #eee;
283  color: #444;
284  cursor: pointer;
285  padding: 18px;
286  width: 100%;
287  max-width: 500px;
288  min-width: 500px;
289  border: none;
290  text-align: left;
291  outline: none;
292  font-size: 15px;
293  transition: 0.4s;
294}
295
296.active,
297.accordion:hover {
298  background-color: #ccc;
299}
300
301.accordion:after {
302  content: '\002B';
303  color: #777;
304  font-weight: bold;
305  display: block;
306  position: absolute;
307  right: 25px;
308  margin-left: 5px;
309}
310
311.active:after {
312  content: "\2212";
313}
314
315.panel {
316  background-color: white;
317  color: var(--body-color);
318  max-height: 0;
319  width: 100%;
320  overflow: hidden;
321  transition: max-height 0.2s ease-out;
322}
323
324.inner-panel {
325  padding: 20px 20px;
326  width: 100%;
327  max-width: 500px;
328}
329
330.wrapper-accordion a {
331  color: var(--body-color);
332}<!-- Create Tab links header (Table: controllers) -->
333<div id="wrapper-tablink">
334  <button class="tablink" onclick="openPage('mens-fashion', this, 'blue')" id="defaultOpen">Mens Fashion</button>
335  <button class="tablink" onclick="openPage('womans-fashion', this, 'red')" id="defaultOpen">Womans Fashion</button>
336</div>
337
338<div id='mens-fashion' class='tabcontent' style='blue'>
339  <article class='wrapper-accordion'>
340    <div>
341      <h2><a href='mens-fashion/clothes'>Clothes</a></h2>
342      <div class='wrapper-icons-bars'>icons</div>
343      <button class='accordion active'>Clothes</button>
344      <div class='panel' style='max-height: 1000px;'>
345        <div class='inner-panel'>
346          <h5><a href='mens-fashion/clothes'>Clothes</a></h5>
347          <a>Tshirt </a>
348        </div>
349      </div>
350
351      <button class='accordion'>Shoes</button>
352      <div class='panel'>
353        <div class='inner-panel'>
354          <h5><a href='mens-fashion/shoes'>Shoes</a></h5>
355          <a>Deport shoes </a>
356        </div>
357      </div>
358
359      <button class='accordion'>Complements</button>
360      <div class='panel'>
361        <div class='inner-panel'>
362          <h5><a href='mens-fashion/complemnts'>Shoes</a></h5>
363          <a>Clock </a>
364        </div>
365      </div>
366    </div>
367  </article>
368
369</div>
370
371<div id='womans-fashion' class='tabcontent' style='red'>
372  <article class='wrapper-accordion'>
373    <div>
374      <h2><a href='womans-fashion/clothes'>Clothes</a></h2>
375      <div class='wrapper-icons-bars'>icons</div>
376      <button class='accordion active'>Clothes</button>
377      <div class='panel' style='max-height: 1000px;'>
378        <div class='inner-panel'>
379          <h5><a href='womans-fashion/clothes'>Clothes</a></h5>
380          <a>Tshirt </a>
381        </div>
382      </div>
383
384      <button class='accordion'>Shoes</button>
385      <div class='panel'>
386        <div class='inner-panel'>
387          <h5><a href='womans-fashion/shoes'>Shoes</a></h5>
388          <a>Deport shoes </a>
389        </div>
390      </div>
391
392      <button class='accordion'>Complements</button>
393      <div class='panel'>
394        <div class='inner-panel'>
395          <h5><a href='womans-fashion/complemnts'>Shoes</a></h5>
396          <a>Clock </a>
397        </div>
398      </div>
399    </div>
400  </article>
401
402</div>// convert the categories array to parents with nested children
403function convertToLevels ($array) {
404    // First, convert the array so that the keys match the ids
405    $reKeyed = array();
406    foreach ($array as $item) {
407        $reKeyed[$item['category_id']] = $item;
408    }
409    // Next, use references to associate children with parents
410    foreach ($reKeyed as $id => $item) {
411        if (isset($item['parent'], $reKeyed[$item['parent']])) {
412            $reKeyed[$item['parent']]['children'][] =& $reKeyed[$id];
413        }
414    }
415    // Finally, go through and remove children from the outer level
416    foreach ($reKeyed as $id => $item) {
417        if (isset($item['parent'])) {
418            unset($reKeyed[$id]);
419        }
420    }
421    return $reKeyed;
422}
423
424// create menu li
425function createMenuItem($item, $url){
426    $html  = '';
427    $html .= '<li class="menu-item '.(!empty($item['children']) ? 'has-child' : '').'">';
428    $html .=    '<a href="'.$url.'" class="menu-link">';
429                    if(!empty($item['icon'])):
430    $html .=            '<i class="'.$item['icon'].'"></i>';
431                    endif;
432    $html .=        $item['category_name'];
433    $html .=    '</a>';
434                if(!empty($item['children'])):
435    $html .=        createMenu($item['children'], $url);
436                endif;
437    $html .= '</li>';
438    
439    return $html;
440}
441
442// menu
443function createMenu($menu, $url_prefix=''){
444    $html  = '';
445    $html .= '<ul class="menu">';
446                foreach($menu as $item):
447    $html .=        createMenuItem($item, $url_prefix.'/'.$item['category_url']);
448                endforeach;
449    $html .= '</ul>';
450
451    return $html;
452}
453$categories = $pdo->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
454$cat = convertToLevels($categories->fetchAll(PDO::FETCH_ASSOC));
455<?= createMenu($cat); ?>
456

1CREATE TABLE `category`(
2   `category_id` smallint(3) unsigned not null auto_increment primary key,   
3   `category_name` VARCHAR(40) NOT NULL,
4   `category_url` VARCHAR(40) NOT NULL,
5   `icon`varchar(150) default null,
6   `gender` enum('Men','Woman','Baby') default null,
7   `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9INSERT INTO `category` (`category_id`, `category_name`, `category_url`, `icon`, `gender`, `parent`) VALUES
10-- Mens section
11(1, 'Mens Fashion', 'mens-fashion', null, null, null), -- Mens fasion
12-- clothes mens
13(2, 'Clothing', 'clothing', 'clothing.svg', null, 1), -- (level 2)
14(3, 'Shoes', 'Shoes', 'shoes.svg', null, 1), -- (level 2)
15(4, 'Complements', 'complements', 'complements.svg', null, 1), -- (level 2)
16
17(5, 'Shirts', 'shirts', null, null, 2), -- (level 3)
18(6, 'Casual shirts', 'casaul-shirts', null, null, 5), -- (level 4)
19(7, 'Suit shirts ', 'suit-shirts', null, null, 5), --(level 4)
20
21(8, 'Jeans', 'jeans', null, null, 2), -- (level 3)
22(9, 'Jeans skinny', 'jeans-skinny', null, null, 8), -- (level 4)
23(10, 'Jeans slim fit', 'jeans-slim-fit', null, null, 8), -- (level 4)
24
25(11, 'Underwear', 'Underwear', null, null, 2), -- (level 3)
26(12, 'Socks', 'socks', null, null, 11), -- (level 4)
27
28-- Woman section
29(13, 'Woman Fashion', 'woman-fasion', null, null, null), -- (level 1)
30-- Clothes woman
31(14, 'Clothing', 'clothing', 'clothing.svg', null, 13), -- (level 2)
32(15, 'Shoes', 'Shoes', 'shoes.svg', null, 13), -- (level 2)
33(16, 'Complements', 'complements', 'complements.svg', null, 13), -- (level 2)
34
35(17, 'Shirts', 'shirts', null, null, 13), -- (level 3)
36(18, 'Casual shirts', 'casaul-shirts', null, null, 17), -- (level 4)
37(19, 'Suit shirts', 'suit-shirts', null, null, 17), -- (level 4)
38(20, 'Top shirt', 'top-shirt', null, null, 17), -- (level 4)
39
40(21, 'Jeans', 'jeans', null, null, 13), -- (level 3)
41(22, 'Jeans skinny', 'jeans-skinny', null, null, 21), -- (level 4)
42(23, 'Jeans slim fit', 'jeans-slim-fit', null, null, 21), -- (level 4)
43
44(24, 'Underwear', 'Underwear', null, null, 13), -- (level 3)
45(25, 'Socks', 'socks', null, null, 24), -- (level 4)
46
47-- Childeren section
48(13, 'Childerens Fasion', 'childeren-fashion', null, null, null), -- (level 1)
49-- Clothes childeren etc..
50$categories = $db->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
51$cat = $categories->fetchAll(PDO::FETCH_ASSOC);
52
53$arrayMenu = array();
54
55foreach($cat as $row){
56$arrayMenu[$row['category_id']] = array("parent" => $row['parent'], "category_name" => $row['category_name'], "category_url" => $row['category_url']);
57}
58
59function createTree($array, $curParent, $currLevel = 0, $prevLevel = -1) {
60
61    foreach ($array as $categoryId => $category) :
62
63        if ($curParent == $category['parent']) :
64
65            if($category['parent']==0) $class="dropdown"; else $class="sub_menu";
66            if ($currLevel > $prevLevel) echo " <ul class='$class'> ";
67
68
69            if ($currLevel == $prevLevel) echo " </li> ";
70
71            echo '<li id="'.$categoryId.'" ><a href="'.$category['category_url'].'">'.$category['category_name'].'</a>';
72
73            if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
74
75            $currLevel++;
76
77            createTree ($array, $categoryId, $currLevel, $prevLevel);
78
79            $currLevel--;
80        endif;
81    endforeach;
82
83    if ($currLevel == $prevLevel) echo " </li> </ul> ";
84}
85?>
86<div class="nav">
87<?php
88if ($cat != null) createTree($arrayMenu, 0);
89?>
90nav ul li { 
91    background:#f1f1f1; list-style: none;
92}
93ul.dropdown { 
94    position:relative; 
95    width:auto; 
96    font:12px Arial, Helvetica, sans-serif; 
97}
98ul.dropdown li { 
99    float:left; zoom:1; 
100    height:auto; 
101    min-height: 30px; 
102    padding:6px 2px 0 2px; 
103}
104
105ul.dropdown li li { 
106    border-right:1px solid #ccc; 
107    border-left:1px solid #ccc; 
108    margin-left:-30px;
109}
110ul.dropdown a:hover { 
111    color:#000; 
112} 
113ul.dropdown a:active { color:#ffa500; }
114
115ul.dropdown li a { 
116    display:block; 
117    padding:4px 8px; 
118    color:#000; 
119    text-decoration:none; 
120    font:bold 12px Arial, Helvetica, sans-serif; 
121}
122
123ul.dropdown li:last-child a { border-right:none;} /* Doesn't work in IE */
124ul.dropdown li:hover { 
125    color:#000; 
126    background:#e7e7e7; 
127    position:relative; }
128ul.dropdown li.hover a { color:#000; }
129ul.dropdown ul { 
130    text-align:left; 
131    visibility: hidden; 
132    position: absolute; 
133    left:-10px; 
134    top:36px; }
135ul.dropdown ul li { 
136    background:#f1f1f1; 
137    border-bottom:1px solid #ccc; 
138    float:none; width:120px; 
139    height:auto; 
140    min-height: 25px; 
141}
142ul.dropdown ul li a { 
143    border-right:none; 
144    width:100%; 
145    display:inline-block; color:#000; }
146ul.dropdown ul ul { 
147    left:100%; 
148    top:0; 
149}
150ul.dropdown li:hover > ul { visibility:visible; }
151// Tab header ///////
152function openPage(pageName, elmnt, color) {
153  // Hide all elements with class="tabcontent" by default */
154  var i, tabcontent, tablinks;
155  tabcontent = document.getElementsByClassName("tabcontent");
156  for (i = 0; i < tabcontent.length; i++) {
157    tabcontent[i].style.display = "none";
158  }
159
160  // Remove the background color of all tablinks/buttons
161  tablinks = document.getElementsByClassName("tablink");
162  for (i = 0; i < tablinks.length; i++) {
163    tablinks[i].style.background = "";
164  }
165
166  // Show the specific tab content
167  document.getElementById(pageName).style.display = "block";
168
169  // Add the specific color to the button used to open the tab content
170  elmnt.style.background = color;
171}
172
173// Get the element with id="defaultOpen" and click on it
174document.getElementById("defaultOpen").click();
175
176
177// Accordion ///////
178var acc = document.getElementsByClassName("accordion");
179var i;
180
181for (i = 0; i < acc.length; i++) {
182  acc[i].addEventListener("click", function() {
183    this.classList.toggle("active");
184    var panel = this.nextElementSibling;
185    if (panel.style.maxHeight) {
186      panel.style.maxHeight = null;
187    } else {
188      panel.style.maxHeight = panel.scrollHeight + "px";
189    }
190  });
191}/* TAB HEADER MENU */
192
193#wrapper-tablink {
194  display: flex;
195  flex-flow: row nowrap;
196  justify-content: center;
197  align-items: center;
198}
199
200
201/* Style tab links */
202
203.tablink {
204  background-color: #555;
205  color: white;
206  border: none;
207  outline: none;
208  cursor: pointer;
209  padding: 14px 16px;
210  font-size: 17px;
211  width: 25%;
212}
213
214.tablink:hover {
215  background-color: #777;
216}
217
218.tablink .active {
219  color: #000;
220}
221
222
223/* Style the tab content (and add height:100% for full page content) */
224
225.tabcontent {
226  color: white;
227  display: none;
228  padding: 100px 20px;
229  height: 100%;
230  overflow-y: auto;
231}
232
233
234/*
235#moda-mujer {background-color: var(--secundary-color);}
236#moda-hombre {background-color: #00cc99;}
237#electronica {background-color: #3399ff;}
238#cursos {background-color: #9933ff;}
239*/
240
241.wrapper-icons-bars {
242  display: flex;
243  flex-flow: row nowrap;
244  justify-content: center;
245  align-items: center;
246  margin: 10px 0 20px 0;
247}
248
249.wrapper-icons-bars a {
250  display: block;
251  position: relative;
252  background-color: #FFFFFF;
253  border-bottom: 3px solid var(--body-color);
254  border-right: 1px solid #F1F1F1;
255  padding: 20px;
256  transition: all 0.3s ease;
257}
258
259.wrapper-icons-bars a:hover {
260  display: block;
261  position: relative;
262  border-bottom: 3px solid var(--secundary-color);
263  padding: 25px;
264  transition: all 0.3s ease;
265}
266
267
268/* ACCORDIAN CONTENT */
269
270.wrapper-accordion {
271  display: flex;
272  justify-content: center;
273  width: 100%;
274  margin-bottom: 80px;
275}
276
277.accordion {
278  display: flex;
279  position: relative;
280  justify-content: center;
281  align-items: center;
282  background-color: #eee;
283  color: #444;
284  cursor: pointer;
285  padding: 18px;
286  width: 100%;
287  max-width: 500px;
288  min-width: 500px;
289  border: none;
290  text-align: left;
291  outline: none;
292  font-size: 15px;
293  transition: 0.4s;
294}
295
296.active,
297.accordion:hover {
298  background-color: #ccc;
299}
300
301.accordion:after {
302  content: '\002B';
303  color: #777;
304  font-weight: bold;
305  display: block;
306  position: absolute;
307  right: 25px;
308  margin-left: 5px;
309}
310
311.active:after {
312  content: "\2212";
313}
314
315.panel {
316  background-color: white;
317  color: var(--body-color);
318  max-height: 0;
319  width: 100%;
320  overflow: hidden;
321  transition: max-height 0.2s ease-out;
322}
323
324.inner-panel {
325  padding: 20px 20px;
326  width: 100%;
327  max-width: 500px;
328}
329
330.wrapper-accordion a {
331  color: var(--body-color);
332}<!-- Create Tab links header (Table: controllers) -->
333<div id="wrapper-tablink">
334  <button class="tablink" onclick="openPage('mens-fashion', this, 'blue')" id="defaultOpen">Mens Fashion</button>
335  <button class="tablink" onclick="openPage('womans-fashion', this, 'red')" id="defaultOpen">Womans Fashion</button>
336</div>
337
338<div id='mens-fashion' class='tabcontent' style='blue'>
339  <article class='wrapper-accordion'>
340    <div>
341      <h2><a href='mens-fashion/clothes'>Clothes</a></h2>
342      <div class='wrapper-icons-bars'>icons</div>
343      <button class='accordion active'>Clothes</button>
344      <div class='panel' style='max-height: 1000px;'>
345        <div class='inner-panel'>
346          <h5><a href='mens-fashion/clothes'>Clothes</a></h5>
347          <a>Tshirt </a>
348        </div>
349      </div>
350
351      <button class='accordion'>Shoes</button>
352      <div class='panel'>
353        <div class='inner-panel'>
354          <h5><a href='mens-fashion/shoes'>Shoes</a></h5>
355          <a>Deport shoes </a>
356        </div>
357      </div>
358
359      <button class='accordion'>Complements</button>
360      <div class='panel'>
361        <div class='inner-panel'>
362          <h5><a href='mens-fashion/complemnts'>Shoes</a></h5>
363          <a>Clock </a>
364        </div>
365      </div>
366    </div>
367  </article>
368
369</div>
370
371<div id='womans-fashion' class='tabcontent' style='red'>
372  <article class='wrapper-accordion'>
373    <div>
374      <h2><a href='womans-fashion/clothes'>Clothes</a></h2>
375      <div class='wrapper-icons-bars'>icons</div>
376      <button class='accordion active'>Clothes</button>
377      <div class='panel' style='max-height: 1000px;'>
378        <div class='inner-panel'>
379          <h5><a href='womans-fashion/clothes'>Clothes</a></h5>
380          <a>Tshirt </a>
381        </div>
382      </div>
383
384      <button class='accordion'>Shoes</button>
385      <div class='panel'>
386        <div class='inner-panel'>
387          <h5><a href='womans-fashion/shoes'>Shoes</a></h5>
388          <a>Deport shoes </a>
389        </div>
390      </div>
391
392      <button class='accordion'>Complements</button>
393      <div class='panel'>
394        <div class='inner-panel'>
395          <h5><a href='womans-fashion/complemnts'>Shoes</a></h5>
396          <a>Clock </a>
397        </div>
398      </div>
399    </div>
400  </article>
401
402</div>// convert the categories array to parents with nested children
403function convertToLevels ($array) {
404    // First, convert the array so that the keys match the ids
405    $reKeyed = array();
406    foreach ($array as $item) {
407        $reKeyed[$item['category_id']] = $item;
408    }
409    // Next, use references to associate children with parents
410    foreach ($reKeyed as $id => $item) {
411        if (isset($item['parent'], $reKeyed[$item['parent']])) {
412            $reKeyed[$item['parent']]['children'][] =& $reKeyed[$id];
413        }
414    }
415    // Finally, go through and remove children from the outer level
416    foreach ($reKeyed as $id => $item) {
417        if (isset($item['parent'])) {
418            unset($reKeyed[$id]);
419        }
420    }
421    return $reKeyed;
422}
423
424// create menu li
425function createMenuItem($item, $url){
426    $html  = '';
427    $html .= '<li class="menu-item '.(!empty($item['children']) ? 'has-child' : '').'">';
428    $html .=    '<a href="'.$url.'" class="menu-link">';
429                    if(!empty($item['icon'])):
430    $html .=            '<i class="'.$item['icon'].'"></i>';
431                    endif;
432    $html .=        $item['category_name'];
433    $html .=    '</a>';
434                if(!empty($item['children'])):
435    $html .=        createMenu($item['children'], $url);
436                endif;
437    $html .= '</li>';
438    
439    return $html;
440}
441
442// menu
443function createMenu($menu, $url_prefix=''){
444    $html  = '';
445    $html .= '<ul class="menu">';
446                foreach($menu as $item):
447    $html .=        createMenuItem($item, $url_prefix.'/'.$item['category_url']);
448                endforeach;
449    $html .= '</ul>';
450
451    return $html;
452}
453$categories = $pdo->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
454$cat = convertToLevels($categories->fetchAll(PDO::FETCH_ASSOC));
455<?= createMenu($cat); ?>
456$men_cat = array_values(array_filter($cat, function($val){
457    return strtolower($val['category_name']) === 'mens fashion';
458}))[0]['children'] ?? [];
459

1CREATE TABLE `category`(
2   `category_id` smallint(3) unsigned not null auto_increment primary key,   
3   `category_name` VARCHAR(40) NOT NULL,
4   `category_url` VARCHAR(40) NOT NULL,
5   `icon`varchar(150) default null,
6   `gender` enum('Men','Woman','Baby') default null,
7   `parent` INT DEFAULT NULL
8)engine=InnoDB default charset=utf8mb4 collate=utf8mb4_spanish_ci;
9INSERT INTO `category` (`category_id`, `category_name`, `category_url`, `icon`, `gender`, `parent`) VALUES
10-- Mens section
11(1, 'Mens Fashion', 'mens-fashion', null, null, null), -- Mens fasion
12-- clothes mens
13(2, 'Clothing', 'clothing', 'clothing.svg', null, 1), -- (level 2)
14(3, 'Shoes', 'Shoes', 'shoes.svg', null, 1), -- (level 2)
15(4, 'Complements', 'complements', 'complements.svg', null, 1), -- (level 2)
16
17(5, 'Shirts', 'shirts', null, null, 2), -- (level 3)
18(6, 'Casual shirts', 'casaul-shirts', null, null, 5), -- (level 4)
19(7, 'Suit shirts ', 'suit-shirts', null, null, 5), --(level 4)
20
21(8, 'Jeans', 'jeans', null, null, 2), -- (level 3)
22(9, 'Jeans skinny', 'jeans-skinny', null, null, 8), -- (level 4)
23(10, 'Jeans slim fit', 'jeans-slim-fit', null, null, 8), -- (level 4)
24
25(11, 'Underwear', 'Underwear', null, null, 2), -- (level 3)
26(12, 'Socks', 'socks', null, null, 11), -- (level 4)
27
28-- Woman section
29(13, 'Woman Fashion', 'woman-fasion', null, null, null), -- (level 1)
30-- Clothes woman
31(14, 'Clothing', 'clothing', 'clothing.svg', null, 13), -- (level 2)
32(15, 'Shoes', 'Shoes', 'shoes.svg', null, 13), -- (level 2)
33(16, 'Complements', 'complements', 'complements.svg', null, 13), -- (level 2)
34
35(17, 'Shirts', 'shirts', null, null, 13), -- (level 3)
36(18, 'Casual shirts', 'casaul-shirts', null, null, 17), -- (level 4)
37(19, 'Suit shirts', 'suit-shirts', null, null, 17), -- (level 4)
38(20, 'Top shirt', 'top-shirt', null, null, 17), -- (level 4)
39
40(21, 'Jeans', 'jeans', null, null, 13), -- (level 3)
41(22, 'Jeans skinny', 'jeans-skinny', null, null, 21), -- (level 4)
42(23, 'Jeans slim fit', 'jeans-slim-fit', null, null, 21), -- (level 4)
43
44(24, 'Underwear', 'Underwear', null, null, 13), -- (level 3)
45(25, 'Socks', 'socks', null, null, 24), -- (level 4)
46
47-- Childeren section
48(13, 'Childerens Fasion', 'childeren-fashion', null, null, null), -- (level 1)
49-- Clothes childeren etc..
50$categories = $db->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
51$cat = $categories->fetchAll(PDO::FETCH_ASSOC);
52
53$arrayMenu = array();
54
55foreach($cat as $row){
56$arrayMenu[$row['category_id']] = array("parent" => $row['parent'], "category_name" => $row['category_name'], "category_url" => $row['category_url']);
57}
58
59function createTree($array, $curParent, $currLevel = 0, $prevLevel = -1) {
60
61    foreach ($array as $categoryId => $category) :
62
63        if ($curParent == $category['parent']) :
64
65            if($category['parent']==0) $class="dropdown"; else $class="sub_menu";
66            if ($currLevel > $prevLevel) echo " <ul class='$class'> ";
67
68
69            if ($currLevel == $prevLevel) echo " </li> ";
70
71            echo '<li id="'.$categoryId.'" ><a href="'.$category['category_url'].'">'.$category['category_name'].'</a>';
72
73            if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
74
75            $currLevel++;
76
77            createTree ($array, $categoryId, $currLevel, $prevLevel);
78
79            $currLevel--;
80        endif;
81    endforeach;
82
83    if ($currLevel == $prevLevel) echo " </li> </ul> ";
84}
85?>
86<div class="nav">
87<?php
88if ($cat != null) createTree($arrayMenu, 0);
89?>
90nav ul li { 
91    background:#f1f1f1; list-style: none;
92}
93ul.dropdown { 
94    position:relative; 
95    width:auto; 
96    font:12px Arial, Helvetica, sans-serif; 
97}
98ul.dropdown li { 
99    float:left; zoom:1; 
100    height:auto; 
101    min-height: 30px; 
102    padding:6px 2px 0 2px; 
103}
104
105ul.dropdown li li { 
106    border-right:1px solid #ccc; 
107    border-left:1px solid #ccc; 
108    margin-left:-30px;
109}
110ul.dropdown a:hover { 
111    color:#000; 
112} 
113ul.dropdown a:active { color:#ffa500; }
114
115ul.dropdown li a { 
116    display:block; 
117    padding:4px 8px; 
118    color:#000; 
119    text-decoration:none; 
120    font:bold 12px Arial, Helvetica, sans-serif; 
121}
122
123ul.dropdown li:last-child a { border-right:none;} /* Doesn't work in IE */
124ul.dropdown li:hover { 
125    color:#000; 
126    background:#e7e7e7; 
127    position:relative; }
128ul.dropdown li.hover a { color:#000; }
129ul.dropdown ul { 
130    text-align:left; 
131    visibility: hidden; 
132    position: absolute; 
133    left:-10px; 
134    top:36px; }
135ul.dropdown ul li { 
136    background:#f1f1f1; 
137    border-bottom:1px solid #ccc; 
138    float:none; width:120px; 
139    height:auto; 
140    min-height: 25px; 
141}
142ul.dropdown ul li a { 
143    border-right:none; 
144    width:100%; 
145    display:inline-block; color:#000; }
146ul.dropdown ul ul { 
147    left:100%; 
148    top:0; 
149}
150ul.dropdown li:hover > ul { visibility:visible; }
151// Tab header ///////
152function openPage(pageName, elmnt, color) {
153  // Hide all elements with class="tabcontent" by default */
154  var i, tabcontent, tablinks;
155  tabcontent = document.getElementsByClassName("tabcontent");
156  for (i = 0; i < tabcontent.length; i++) {
157    tabcontent[i].style.display = "none";
158  }
159
160  // Remove the background color of all tablinks/buttons
161  tablinks = document.getElementsByClassName("tablink");
162  for (i = 0; i < tablinks.length; i++) {
163    tablinks[i].style.background = "";
164  }
165
166  // Show the specific tab content
167  document.getElementById(pageName).style.display = "block";
168
169  // Add the specific color to the button used to open the tab content
170  elmnt.style.background = color;
171}
172
173// Get the element with id="defaultOpen" and click on it
174document.getElementById("defaultOpen").click();
175
176
177// Accordion ///////
178var acc = document.getElementsByClassName("accordion");
179var i;
180
181for (i = 0; i < acc.length; i++) {
182  acc[i].addEventListener("click", function() {
183    this.classList.toggle("active");
184    var panel = this.nextElementSibling;
185    if (panel.style.maxHeight) {
186      panel.style.maxHeight = null;
187    } else {
188      panel.style.maxHeight = panel.scrollHeight + "px";
189    }
190  });
191}/* TAB HEADER MENU */
192
193#wrapper-tablink {
194  display: flex;
195  flex-flow: row nowrap;
196  justify-content: center;
197  align-items: center;
198}
199
200
201/* Style tab links */
202
203.tablink {
204  background-color: #555;
205  color: white;
206  border: none;
207  outline: none;
208  cursor: pointer;
209  padding: 14px 16px;
210  font-size: 17px;
211  width: 25%;
212}
213
214.tablink:hover {
215  background-color: #777;
216}
217
218.tablink .active {
219  color: #000;
220}
221
222
223/* Style the tab content (and add height:100% for full page content) */
224
225.tabcontent {
226  color: white;
227  display: none;
228  padding: 100px 20px;
229  height: 100%;
230  overflow-y: auto;
231}
232
233
234/*
235#moda-mujer {background-color: var(--secundary-color);}
236#moda-hombre {background-color: #00cc99;}
237#electronica {background-color: #3399ff;}
238#cursos {background-color: #9933ff;}
239*/
240
241.wrapper-icons-bars {
242  display: flex;
243  flex-flow: row nowrap;
244  justify-content: center;
245  align-items: center;
246  margin: 10px 0 20px 0;
247}
248
249.wrapper-icons-bars a {
250  display: block;
251  position: relative;
252  background-color: #FFFFFF;
253  border-bottom: 3px solid var(--body-color);
254  border-right: 1px solid #F1F1F1;
255  padding: 20px;
256  transition: all 0.3s ease;
257}
258
259.wrapper-icons-bars a:hover {
260  display: block;
261  position: relative;
262  border-bottom: 3px solid var(--secundary-color);
263  padding: 25px;
264  transition: all 0.3s ease;
265}
266
267
268/* ACCORDIAN CONTENT */
269
270.wrapper-accordion {
271  display: flex;
272  justify-content: center;
273  width: 100%;
274  margin-bottom: 80px;
275}
276
277.accordion {
278  display: flex;
279  position: relative;
280  justify-content: center;
281  align-items: center;
282  background-color: #eee;
283  color: #444;
284  cursor: pointer;
285  padding: 18px;
286  width: 100%;
287  max-width: 500px;
288  min-width: 500px;
289  border: none;
290  text-align: left;
291  outline: none;
292  font-size: 15px;
293  transition: 0.4s;
294}
295
296.active,
297.accordion:hover {
298  background-color: #ccc;
299}
300
301.accordion:after {
302  content: '\002B';
303  color: #777;
304  font-weight: bold;
305  display: block;
306  position: absolute;
307  right: 25px;
308  margin-left: 5px;
309}
310
311.active:after {
312  content: "\2212";
313}
314
315.panel {
316  background-color: white;
317  color: var(--body-color);
318  max-height: 0;
319  width: 100%;
320  overflow: hidden;
321  transition: max-height 0.2s ease-out;
322}
323
324.inner-panel {
325  padding: 20px 20px;
326  width: 100%;
327  max-width: 500px;
328}
329
330.wrapper-accordion a {
331  color: var(--body-color);
332}<!-- Create Tab links header (Table: controllers) -->
333<div id="wrapper-tablink">
334  <button class="tablink" onclick="openPage('mens-fashion', this, 'blue')" id="defaultOpen">Mens Fashion</button>
335  <button class="tablink" onclick="openPage('womans-fashion', this, 'red')" id="defaultOpen">Womans Fashion</button>
336</div>
337
338<div id='mens-fashion' class='tabcontent' style='blue'>
339  <article class='wrapper-accordion'>
340    <div>
341      <h2><a href='mens-fashion/clothes'>Clothes</a></h2>
342      <div class='wrapper-icons-bars'>icons</div>
343      <button class='accordion active'>Clothes</button>
344      <div class='panel' style='max-height: 1000px;'>
345        <div class='inner-panel'>
346          <h5><a href='mens-fashion/clothes'>Clothes</a></h5>
347          <a>Tshirt </a>
348        </div>
349      </div>
350
351      <button class='accordion'>Shoes</button>
352      <div class='panel'>
353        <div class='inner-panel'>
354          <h5><a href='mens-fashion/shoes'>Shoes</a></h5>
355          <a>Deport shoes </a>
356        </div>
357      </div>
358
359      <button class='accordion'>Complements</button>
360      <div class='panel'>
361        <div class='inner-panel'>
362          <h5><a href='mens-fashion/complemnts'>Shoes</a></h5>
363          <a>Clock </a>
364        </div>
365      </div>
366    </div>
367  </article>
368
369</div>
370
371<div id='womans-fashion' class='tabcontent' style='red'>
372  <article class='wrapper-accordion'>
373    <div>
374      <h2><a href='womans-fashion/clothes'>Clothes</a></h2>
375      <div class='wrapper-icons-bars'>icons</div>
376      <button class='accordion active'>Clothes</button>
377      <div class='panel' style='max-height: 1000px;'>
378        <div class='inner-panel'>
379          <h5><a href='womans-fashion/clothes'>Clothes</a></h5>
380          <a>Tshirt </a>
381        </div>
382      </div>
383
384      <button class='accordion'>Shoes</button>
385      <div class='panel'>
386        <div class='inner-panel'>
387          <h5><a href='womans-fashion/shoes'>Shoes</a></h5>
388          <a>Deport shoes </a>
389        </div>
390      </div>
391
392      <button class='accordion'>Complements</button>
393      <div class='panel'>
394        <div class='inner-panel'>
395          <h5><a href='womans-fashion/complemnts'>Shoes</a></h5>
396          <a>Clock </a>
397        </div>
398      </div>
399    </div>
400  </article>
401
402</div>// convert the categories array to parents with nested children
403function convertToLevels ($array) {
404    // First, convert the array so that the keys match the ids
405    $reKeyed = array();
406    foreach ($array as $item) {
407        $reKeyed[$item['category_id']] = $item;
408    }
409    // Next, use references to associate children with parents
410    foreach ($reKeyed as $id => $item) {
411        if (isset($item['parent'], $reKeyed[$item['parent']])) {
412            $reKeyed[$item['parent']]['children'][] =& $reKeyed[$id];
413        }
414    }
415    // Finally, go through and remove children from the outer level
416    foreach ($reKeyed as $id => $item) {
417        if (isset($item['parent'])) {
418            unset($reKeyed[$id]);
419        }
420    }
421    return $reKeyed;
422}
423
424// create menu li
425function createMenuItem($item, $url){
426    $html  = '';
427    $html .= '<li class="menu-item '.(!empty($item['children']) ? 'has-child' : '').'">';
428    $html .=    '<a href="'.$url.'" class="menu-link">';
429                    if(!empty($item['icon'])):
430    $html .=            '<i class="'.$item['icon'].'"></i>';
431                    endif;
432    $html .=        $item['category_name'];
433    $html .=    '</a>';
434                if(!empty($item['children'])):
435    $html .=        createMenu($item['children'], $url);
436                endif;
437    $html .= '</li>';
438    
439    return $html;
440}
441
442// menu
443function createMenu($menu, $url_prefix=''){
444    $html  = '';
445    $html .= '<ul class="menu">';
446                foreach($menu as $item):
447    $html .=        createMenuItem($item, $url_prefix.'/'.$item['category_url']);
448                endforeach;
449    $html .= '</ul>';
450
451    return $html;
452}
453$categories = $pdo->query('SELECT category_id, category_url, parent, category_name FROM category ORDER BY category_id');
454$cat = convertToLevels($categories->fetchAll(PDO::FETCH_ASSOC));
455<?= createMenu($cat); ?>
456$men_cat = array_values(array_filter($cat, function($val){
457    return strtolower($val['category_name']) === 'mens fashion';
458}))[0]['children'] ?? [];
459<?= createMenu($men_cat, '/mens-fashion'); ?>
460