LC20-mega-menu/index.html at master · wpcodevo/LC20-mega-menu · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Boxicons -->
    <link
      href="https://unpkg.com/boxicons@2.0.8/css/boxicons.min.css"
      rel="stylesheet"
    />
  <!-- Custom StyleSheet -->
  <link rel="stylesheet" href="./styles.css">
  <title>Coding Mega</title>
</head>
<body>
  <!-- Navigation -->
  <nav class="nav">
      <div class="wrapper container">
        <div class="logo">
          <a href="/">
            Coding Mega
          </a>
        </div>

        <ul class="nav-list">
          <div class="top">
            <label for="" class="btn close-btn"
              ><i class='bx bx-x' ></i></label>
          </div>

          <li><a href="index.html">Home</a></li>
          <li><a href="products.html">Products</a></li>
          <li>
            <a href="" class="desktop-item"
              >Shop <span><i class='bx bx-chevron-down'></i></span
            ></a>
            <input type="checkbox" id="showMega" />
            <label for="showMega" class="mobile-item">Shop <span><i class='bx bx-chevron-down'></i></label>
            <div class="mega-box">
              <div class="content">
                <div class="row">
                  <img src="./images/pic.jpg" alt="">
                </div>
                <div class="row">
                  <header>Shop Layout</header>
                  <ul class="mega-links">
                    <li><a href="">Shop with Background</a></li>
                    <li><a href="">Shop with Background</a></li>
                    <li><a href="">Shop with Background</a></li>
                    <li><a href="">Shop with Background</a></li>
                  </ul>
                </div>
                <div class="row">
                  <header>Product Layout</header>
                  <ul class="mega-links">
                    <li><a href="">Shop with Background</a></li>
                    <li><a href="">Shop with Background</a></li>
                    <li><a href="">Shop with Background</a></li>
                    <li><a href="">Shop with Background</a></li>
                  </ul>
                </div>
                <div class="row">
                  <header>Filter Layout</header>
                  <ul class="mega-links">
                    <li><a href="">Shop with Background</a></li>
                    <li><a href="">Shop with Background</a></li>
                    <li><a href="">Shop with Background</a></li>
                    <li><a href="">Shop with Background</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li><a href="">Blog</a></li>
          <li>
            <a href="" class="desktop-item">Vendors <span><i class='bx bx-chevron-down'></i> </a>
              <input type="checkbox"  id="showdrop1">
              <label for="showdrop1" class="mobile-item">Vendors <span><i class='bx bx-chevron-down'></i></label>
                <ul class="drop-menu1">
                  <li><a href="">Vendor store listings</a></li>
                  <li><a href="">store details</a></li>
                </ul>
            </li>
          <li>
            <a href="" class="desktop-item">Page <span><i class='bx bx-chevron-down'></i> </a>
              <input type="checkbox"  id="showdrop2">
              <label for="showdrop2" class="mobile-item">Page <span><i class='bx bx-chevron-down'></i></label>
                <ul class="drop-menu2">
                  <li><a href="">About</a></li>
                  <li><a href="">Contact</a></li>
                  <li><a href="">Faq</a></li>
                  <li><a href="">Page 404</a></li>
                </ul>
            </li>
          <li class="icons">
            <a href="cart.html">
            <span>
              <i class='bx bx-cart'></i>
              <small class="count d-flex">0</small>
            </span>
          </a>
        <span>
          <i class='bx bx-search' ></i>
        </span>
        </li>
        </ul>
        <label for="" class="btn open-btn"><i class='bx bx-menu' ></i></label>
      </div>
    </nav>

    <!-- Hero -->
    <div class="hero">
      <h1>Responsive Mega Menu</h1>
      <h2>Using HTML and CSS</h2>
    </div>

    <!-- Custom Js -->
    <script src="index.js"></script>
</body>
</html>