Skip to content

Commit 37e7544

Browse files
RakibRahmanRakibRahman
committed
Complex Nav Bar
1 parent a72320b commit 37e7544

File tree

2 files changed

+313
-0
lines changed

2 files changed

+313
-0
lines changed

‎CSS Flexbox/Projects/dropdown-and-mega-nav-bar/index.html

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
8+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
9+
crossorigin="anonymous" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com">
11+
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Navigation Menu</title>
14+
</head>
15+
16+
<body>
17+
<header class="header">
18+
<a href="#" class="logo">Brand</a>
19+
<nav>
20+
<ul class="menu-items">
21+
<li>
22+
<a href="" class="menu-item">Home</a>
23+
</li>
24+
<li class="dropdown">
25+
<a href="" class="menu-item">Dropdown Links</a>
26+
<ul class="dropdown-menu">
27+
<li>
28+
<a href="#" class="menu-item">Demo link</a>
29+
30+
</li>
31+
<li><a href="#" class="menu-item">Demo link 2</a></li>
32+
<li class="dropdown-right">
33+
<a href="#" class="menu-item">
34+
Demo link 3
35+
<i class="fas fa-angle-right"></i>
36+
</a>
37+
<ul class="menu-right">
38+
<li><a href="#" class="menu-item">Item 3.1</a></li>
39+
<li><a href="#" class="menu-item">Item 3.2</a></li>
40+
<li><a href="#" class="menu-item">Item 3.3</a></li>
41+
<li><a href="#" class="menu-item">Item 3.4</a></li>
42+
</ul>
43+
</li>
44+
<li><a href="#" class="menu-item">Demo link 4</a></li>
45+
</ul>
46+
</li>
47+
<li> <a href="" class="menu-item">Additional Links</a>
48+
<div class="mega-menu">
49+
<div class="content">
50+
<div class="col">
51+
<section>
52+
<h2>featured 1</h2>
53+
<a href="" class="img-wrapper"><span class="img"><img src="https://picsum.photos/400?random=1" alt="Random IMG"></span></a>
54+
<p>Lorem ipsum dolor sit amet consectetur.</p>
55+
</section>
56+
</div>
57+
<div class="col">
58+
<section>
59+
<h2>Featured 2</h2>
60+
<ul class="mega-links">
61+
<li><a href="#">Item 1</a></li>
62+
<li><a href="#">Item 2</a></li>
63+
<li><a href="#">Item 3</a></li>
64+
<li><a href="#">Item 4</a></li>
65+
<li><a href="#">Item 5</a></li>
66+
</ul>
67+
</section>
68+
</div>
69+
<div class="col">
70+
<section>
71+
<h2>Featured 3</h2>
72+
<ul class="mega-links">
73+
<li><a href="#">Item 1</a></li>
74+
<li><a href="#">Item 2</a></li>
75+
<li><a href="#">Item 3</a></li>
76+
<li><a href="#">Item 4</a></li>
77+
<li><a href="#">Item 5</a></li>
78+
</ul>
79+
</section>
80+
</div>
81+
<div class="col">
82+
<section>
83+
<h2>Featured 4</h2>
84+
<ul class="mega-links">
85+
<li><a href="#">Item 1</a></li>
86+
<li><a href="#">Item 2</a></li>
87+
<li><a href="#">Item 3</a></li>
88+
<li><a href="#">Item 4</a></li>
89+
<li><a href="#">Item 5</a></li>
90+
</ul>
91+
</section>
92+
</div>
93+
</div>
94+
</div>
95+
</li>
96+
<li><a href="" class="menu-item">Articles</a>
97+
<div class="mega-menu articles">
98+
<div class="content">
99+
<div class="col">
100+
<a href="" class="img-wrapper"><span class="img"><img src="https://picsum.photos/400?random=2" alt=""></span></a>
101+
<h2>Title</h2>
102+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem qui, recusandae harum tempora delectus consequuntur laboriosam reiciendis accusantium vero reprehenderit.</p>
103+
<a href="" class="learn-more">Learn More</a>
104+
105+
</div>
106+
<div class="col">
107+
<a href="" class="img-wrapper"><span class="img"><img src="https://picsum.photos/400?random=3" alt=""></span></a>
108+
<h2>Title</h2>
109+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem qui, recusandae harum tempora delectus consequuntur laboriosam reiciendis accusantium vero reprehenderit.</p>
110+
<a href="" class="learn-more">Learn More</a>
111+
112+
</div>
113+
<div class="col">
114+
<a href="" class="img-wrapper"><span class="img"><img src="https://picsum.photos/400?random=4" alt=""></span></a>
115+
<h2>Title</h2>
116+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem qui, recusandae harum tempora delectus consequuntur laboriosam reiciendis accusantium vero reprehenderit.</p>
117+
<a href="" class="learn-more">Learn More</a>
118+
</div>
119+
</div>
120+
</div>
121+
</li>
122+
<li><a href="" class="menu-item">F.A.Q</a></li>
123+
</ul>
124+
</header>
125+
<section class="section">
126+
<h1>Multi-Level Dropdown Menu</h1>
127+
</section>
128+
</body>
129+
130+
</html>

‎CSS Flexbox/Projects/dropdown-and-mega-nav-bar/style.css

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
font-family: "Montserrat", sans-serif;
8+
background: #00050a;
9+
color: #f5f5f5;
10+
min-height: 100vh;
11+
}
12+
.header {
13+
position: relative;
14+
background: #5220f2;
15+
max-width: 80vw;
16+
margin: auto;
17+
padding: 1rem 2rem;
18+
display: flex;
19+
align-items: center;
20+
justify-content: space-between;
21+
z-index: 1;
22+
}
23+
.header a {
24+
text-decoration: none;
25+
color: #f5f5f5;
26+
}
27+
.logo {
28+
font-size: 2rem;
29+
}
30+
31+
.header .menu-items {
32+
list-style: none;
33+
display: flex;
34+
align-items: center;
35+
}
36+
.menu-items li {
37+
padding: 0.5rem 1rem;
38+
transition: background 0.3s ease-in-out;
39+
}
40+
.menu-items li:hover {
41+
background: orangered;
42+
}
43+
44+
/* Dropdown Menu */
45+
.dropdown {
46+
position: relative;
47+
transition: all 0.3s ease;
48+
}
49+
.dropdown-menu,
50+
.menu-right {
51+
list-style: none;
52+
position: absolute;
53+
top: 50px;
54+
left: 0;
55+
background: #122331;
56+
width: 100%;
57+
opacity: 0;
58+
visibility: hidden;
59+
}
60+
.menu-right {
61+
top: 0;
62+
left: 110%;
63+
}
64+
.menu-item {
65+
display: flex;
66+
justify-content: space-between;
67+
width: 100%;
68+
}
69+
.dropdown:hover .dropdown-menu {
70+
top: 34px;
71+
opacity: 1;
72+
visibility: visible;
73+
}
74+
.dropdown-right {
75+
position: relative;
76+
}
77+
.dropdown-right:hover .menu-right {
78+
left: 100%;
79+
opacity: 1;
80+
visibility: visible;
81+
}
82+
83+
/* end of dropdown menu */
84+
85+
/* Mega Menu */
86+
87+
.mega-menu {
88+
position: absolute;
89+
left: 0;
90+
top: 80px;
91+
width: 80vw;
92+
opacity: 0;
93+
visibility: hidden;
94+
transition: all 0.3s ease;
95+
}
96+
97+
.mega-menu .content {
98+
background: darkblue;
99+
padding: 1rem;
100+
display: grid;
101+
grid-template-columns: repeat(4, 1fr);
102+
justify-content: space-between;
103+
width: 100%;
104+
gap: 1rem;
105+
}
106+
.articles .content {
107+
grid-template-columns: repeat(3, 1fr);
108+
}
109+
.content .col section {
110+
display: flex;
111+
flex-direction: column;
112+
justify-content: space-between;
113+
line-height: 3rem;
114+
}
115+
.content .col .img-wrapper {
116+
display: block;
117+
position: relative;
118+
width: 100%;
119+
height: 30vh;
120+
overflow: hidden;
121+
}
122+
123+
.content .col .img {
124+
position: absolute;
125+
top: 0;
126+
right: 0;
127+
bottom: 0;
128+
left: 0;
129+
}
130+
.content .col img {
131+
width: 100%;
132+
transition: transform 0.3s ease-in-out;
133+
}
134+
.content .col .img-wrapper:hover img {
135+
transform: scale(1.1);
136+
}
137+
.content .col h2 {
138+
color: deeppink;
139+
font-size: 1.2rem;
140+
font-weight: bold;
141+
line-height: 3rem;
142+
cursor: pointer;
143+
}
144+
.content .col p {
145+
margin-top: 2px;
146+
line-height: 1.2rem;
147+
}
148+
.content .col .mega-links {
149+
list-style: none;
150+
border-left: 1px solid lightcyan;
151+
}
152+
.col .mega-links li,
153+
.col .mega-links a {
154+
padding: 0 1rem;
155+
}
156+
157+
.menu-items li:hover .mega-menu {
158+
top: 60px;
159+
visibility: visible;
160+
opacity: 1;
161+
}
162+
.learn-more {
163+
display: inline-block;
164+
padding: 1rem 0;
165+
color: #5220f2;
166+
}
167+
.section {
168+
position: absolute;
169+
top: 0;
170+
left: 0;
171+
width: 100%;
172+
height: 100%;
173+
display: flex;
174+
align-items: center;
175+
justify-content: center;
176+
text-align: center;
177+
}
178+
.section h1 {
179+
font-size: 3rem;
180+
font-weight: 700;
181+
line-height: 6vw;
182+
text-transform: capitalize;
183+
}

0 commit comments

Comments
 (0)