Skip to content

Commit 36d8859

Browse files
bedimcodebedimcode
authored
Add files via upload
1 parent 78689ca commit 36d8859

File tree

5 files changed

+248
-0
lines changed

5 files changed

+248
-0
lines changed

‎Text Responsive navigation bar.txt

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
========== HEADER & NAV ==========
2+
.nav__logo
3+
CodeBox
4+
5+
.nav__link
6+
Home
7+
8+
Discover
9+
10+
Resources
11+
12+
Pricing
13+
14+
Company
15+
16+
.dropdown__title - .dropdown__link
17+
/* DROPDOWN 1 */
18+
Most viewed courses
19+
20+
HTML for beginners
21+
Advanced CSS
22+
JavaScript OOP
23+
24+
25+
Popular courses
26+
27+
Development with Flutter
28+
Web development with React
29+
Backend development expert
30+
31+
32+
Careers
33+
34+
Web development
35+
Applications development
36+
UI/UX design
37+
Informatic security
38+
39+
40+
Certifications
41+
42+
Course certificates
43+
Free certifications
44+
45+
46+
/* DROPDOWN 2 */
47+
Web templates
48+
49+
Free templates
50+
Premium templates
51+
52+
53+
Designs
54+
55+
Web designs
56+
App designs
57+
Component design
58+
59+
60+
Others
61+
62+
Recent blogs
63+
Tutorial videos
64+
Webinar
65+
66+
67+
/* DROPDOWN 3 */
68+
About us
69+
70+
About us
71+
Support
72+
Contact us
73+
74+
75+
Safety and quality
76+
77+
Cookie settings
78+
Privacy Policy
79+
80+
81+
========== SHOW MENU ==========
82+
// Add show-menu class to nav menu
83+
84+
// Add show-icon to show and hide the menu icon
85+
86+
87+
========== SHOW DROPDOWN MENU ==========
88+
// 1. Select each dropdown item
89+
90+
// 2. Select each button click
91+
92+
// 3. Create a function to display the dropdown
93+
94+
// 3.1. Select each dropdown content
95+
96+
// 4. Add the maximum height to the dropdown content and add the show-dropdown class
97+
98+
// 5. Call the toggleItem function
99+
100+
// 6. If the same item contains the show-dropdown class, remove
101+
102+
// 7. Select the current show-dropdown class
103+
104+
// 8. Remove the show-dropdown class from other items
105+
106+
107+
========== DELETE DROPDOWN STYLES ==========
108+
// Function to remove dropdown styles in mobile mode when browser resizes
109+
110+
// Validate if the media query reaches 1118px
111+
112+
// Remove the dropdown container height style
113+
114+
// Remove the show-dropdown class from dropdown item

‎assets/css/styles.css

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/*=============== GOOGLE FONTS ===============*/
2+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
3+
4+
/*=============== VARIABLES CSS ===============*/
5+
:root {
6+
--header-height: 3.5rem;
7+
8+
/*========== Colors ==========*/
9+
/*Color mode HSL(hue, saturation, lightness)*/
10+
--first-color: hsl(220, 68%, 54%);
11+
--first-color-lighten: hsl(220, 68%, 97%);
12+
--title-color: hsl(220, 48%, 28%);
13+
--text-color: hsl(220, 12%, 45%);
14+
--body-color: hsl(220, 100%, 99%);
15+
16+
/*========== Font and typography ==========*/
17+
/*.5rem = 8px | 1rem = 16px ...*/
18+
--body-font: "Poppins", sans-serif;
19+
--normal-font-size: .938rem;
20+
--small-font-size: .813rem;
21+
--smaller-font-size: .75rem;
22+
23+
/*========== Font weight ==========*/
24+
--font-medium: 500;
25+
--font-semi-bold: 600;
26+
27+
/*========== z index ==========*/
28+
--z-tooltip: 10;
29+
--z-fixed: 100;
30+
}
31+
32+
/*========== Responsive typography==========*/
33+
@media screen and (min-width: 1024px) {
34+
:root {
35+
--normal-font-size: 1rem;
36+
--small-font-size: .875rem;
37+
--smaller-font-size: .813rem;
38+
}
39+
}
40+
41+
/*=============== BASE ===============*/
42+
* {
43+
box-sizing: border-box;
44+
padding: 0;
45+
margin: 0;
46+
}
47+
48+
body {
49+
font-family: var(--body-font);
50+
font-size: var(--normal-font-size);
51+
background-color: var(--body-color);
52+
color: var(--text-color);
53+
}
54+
55+
ul {
56+
list-style: none;
57+
}
58+
59+
a {
60+
text-decoration: none;
61+
}
62+
63+
/*=============== REUSABLE CSS CLASSES ===============*/
64+
.container {
65+
max-width: 1120px;
66+
margin-inline: 1.5rem;
67+
}
68+
69+
/*=============== HEADER ===============*/
70+
71+
72+
/*=============== NAV ===============*/
73+
74+
75+
/* Navigation for mobile devices */
76+
77+
78+
/* Show menu */
79+
80+
81+
/* Show icon */
82+
83+
84+
/*=============== DROPDOWN ===============*/
85+
86+
87+
/* Rotate dropdown icon */
88+
89+
90+
/*=============== BREAKPOINTS ===============*/
91+
/* For small devices */
92+
93+
94+
/* For large devices */

‎assets/js/main.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/*=============== SHOW MENU ===============*/
2+
3+
4+
/*=============== SHOW DROPDOWN MENU ===============*/
5+
6+
7+
/*=============== DELETE DROPDOWN STYLES ===============*/

‎index.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<!--=============== REMIXICONS ===============-->
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
9+
10+
<!--=============== CSS ===============-->
11+
<link rel="stylesheet" href="assets/css/styles.css">
12+
13+
<title>Responsive navigation bar - Bedimcode</title>
14+
</head>
15+
<body>
16+
<!--=============== HEADER ===============-->
17+
<header class="header">
18+
<nav class="nav container">
19+
<div class="nav__data">
20+
21+
</div>
22+
23+
<!--=============== NAV MENU ===============-->
24+
<div class="nav__menu" id="nav-menu">
25+
26+
</div>
27+
</nav>
28+
</header>
29+
30+
<!--=============== MAIN JS ===============-->
31+
<script src="assets/js/main.js"></script>
32+
</body>
33+
</html>

‎preview.png

169 KB
Loading

0 commit comments

Comments
 (0)