Skip to content

Commit 8197217

Browse files
ShoroukAzizShoroukAziz
authored
Create nav.html
1 parent 385ff8f commit 8197217

File tree

1 file changed

+128
-0
lines changed

1 file changed

+128
-0
lines changed

‎nav.html

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
6+
<!-- Font Awesome -->
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
8+
9+
<!-- Google Font -->
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">
13+
<!-------->
14+
15+
<style>
16+
* {
17+
margin: 0;
18+
padding: 0;
19+
-webkit-box-sizing: border-box;
20+
box-sizing: border-box;
21+
}
22+
23+
24+
.navMenu {
25+
/* Change font family here */
26+
font-family: 'Advent Pro', sans-serif;
27+
padding: 8px;
28+
text-align: center;
29+
margin: 7px auto;
30+
width: fit-content;
31+
}
32+
33+
.navMenu a {
34+
/* Change font color here */
35+
color: #272727;
36+
text-decoration: none;
37+
text-transform: uppercase;
38+
display: inline-block;
39+
padding: 6px;
40+
}
41+
42+
.background {
43+
/* Change background color here */
44+
background-color: #ece5f0;
45+
}
46+
47+
.border {
48+
/* Change border color & thickness here */
49+
border: 1px solid #cccccc;
50+
51+
}
52+
53+
.navMenu a:hover {
54+
/* Change on hover font color here */
55+
color: #d09c0b;
56+
}
57+
</style>
58+
</head>
59+
60+
<body>
61+
62+
<nav class="navMenu border">
63+
<a id="home" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-house"></i> Home</a>
64+
<a id="inbox" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-inbox"></i> Inbox</a>
65+
<a id="week" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-calendar-week"></i> Planner</a>
66+
<a id="projects" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-briefcase"></i> Projects</a>
67+
<a id="tasks" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-list-check"></i> Tasks</a>
68+
<a id="business" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-money-bill-wave"></i> Business</a>
69+
<a id="knowledge" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-lightbulb"></i> Knowledge</a>
70+
<a id="topics" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-layer-group"></i> Topics</a>
71+
<a id="notes" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-book"></i> Notes</a>
72+
<a id="media" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-bookmark"></i> Media</a>
73+
<a id="resourses" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-wrench"></i> Resourses</a>
74+
<a id="recipies" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-bowl-rice"></i> Recipes</a>
75+
<a id="lifewiki" onclick="navigate(this.id)" href="#"> <i class="fa-solid fa-heart"></i> Lifewiki</a>
76+
77+
78+
79+
</nav>
80+
81+
82+
<script>
83+
84+
let direction = "horizontal"; //Change nav bar direction here
85+
86+
if (direction === "vertical") {
87+
document.head.insertAdjacentHTML("beforeend", `<style>.navMenu a {display: block; text-align:left; margin:7px} i{width:15px; margin-right:5px}</style>`)
88+
}
89+
90+
91+
function navigate(id) {
92+
93+
if (id == 'home')
94+
window.open("https://example.com", '_blank').focus();
95+
else if (id == "inbox")
96+
window.open("https://example.com", '_blank').focus();
97+
else if (id == "week")
98+
window.open("https://example.com", '_blank').focus();
99+
else if (id == "month")
100+
window.open("https://example.com", '_blank').focus();
101+
else if (id == "projects")
102+
window.open("https://example.com", '_blank').focus();
103+
else if (id == "business")
104+
window.open("https://example.com", '_blank').focus();
105+
else if (id == "tasks")
106+
window.open("https://example.com", '_blank').focus();
107+
else if (id == "recipes")
108+
window.open("https://example.com", '_blank').focus();
109+
else if (id == "knowledge")
110+
window.open("https://example.com", '_blank').focus();
111+
else if (id == "topics")
112+
window.open("https://example.com", '_blank').focus();
113+
else if (id == "notes")
114+
window.open("https://example.com", '_blank').focus();
115+
else if (id == "media")
116+
window.open("https://example.com", '_blank').focus();
117+
else if (id == "resourses")
118+
window.open("https://example.com", '_blank').focus();
119+
else if (id == "lifewiki")
120+
window.open("https://example.com", '_blank').focus();
121+
122+
}
123+
</script>
124+
125+
126+
</body>
127+
128+
</html>

0 commit comments

Comments
 (0)