Skip to content

Commit 7c35f56

Browse files
Web-JoseWeb-Jose
committed
Add hamburger menu functionality
1 parent f37982e commit 7c35f56

File tree

8 files changed

+208
-5
lines changed

8 files changed

+208
-5
lines changed

‎404.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,29 @@
9191
>Resume</a
9292
>
9393
</nav>
94+
95+
<span class="MenuButton" onclick="openNav()"
96+
><i class="fa-solid fa-bars"></i
97+
></span>
9498
</header>
9599

96100
<!-- Body -->
97101
<body>
102+
<div id="hamburger-menu" class="hamburger-menu">
103+
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
104+
>&times;</a
105+
>
106+
<a class="Title" href="/">Code By Jose</a>
107+
<a href="https://codebyjose.com#Home">Home</a>
108+
<a href="https://codebyjose.com#aboutmeSec">About</a>
109+
<a href="https://codebyjose.com#projects">Projects</a>
110+
<a href="https://codebyjose.com#contact">Contact</a>
111+
<a
112+
href="https://codebyjose.com/JoseCortes-Resume.pdf"
113+
download="JoseCortes-Resume.pdf"
114+
>Resume</a
115+
>
116+
</div>
98117
<main>
99118
<section class="Error404">
100119
<span class="ErrorTitle">404</span>

‎NavIcon.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,11 @@ navLinks.forEach((navLink) => {
99
navLink.classList.remove("active");
1010
});
1111
});
12+
13+
function openNav() {
14+
document.getElementById("hamburger-menu").style.width = "100%";
15+
}
16+
17+
function closeNav() {
18+
document.getElementById("hamburger-menu").style.width = "0";
19+
}

‎index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,28 @@
9191
>Resume</a
9292
>
9393
</nav>
94+
<span class="MenuButton" onclick="openNav()"
95+
><i class="fa-solid fa-bars"></i
96+
></span>
9497
</header>
9598

9699
<!-- Body -->
97100
<body>
101+
<div id="hamburger-menu" class="hamburger-menu">
102+
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
103+
>&times;</a
104+
>
105+
<a class="Title" href="/">Code By Jose</a>
106+
<a href="https://codebyjose.com#Home">Home</a>
107+
<a href="https://codebyjose.com#aboutmeSec">About</a>
108+
<a href="https://codebyjose.com#projects">Projects</a>
109+
<a href="https://codebyjose.com#contact">Contact</a>
110+
<a
111+
href="https://codebyjose.com/JoseCortes-Resume.pdf"
112+
download="JoseCortes-Resume.pdf"
113+
>Resume</a
114+
>
115+
</div>
98116
<main>
99117
<!-- Home Section -->
100118
<section class="HomeSection" id="Home">

‎portfolio.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,68 @@ body {
8686
padding-top: 15em;
8787
margin: 0;
8888
}
89+
90+
/* The side navigation menu */
91+
.hamburger-menu {
92+
height: 100%;
93+
width: 0;
94+
position: fixed;
95+
z-index: 1;
96+
top: 0;
97+
left: 0;
98+
background-color: #080d0c;
99+
overflow-x: hidden;
100+
transition: 0.5s;
101+
padding-top: 60px;
102+
}
103+
104+
/* The menu content */
105+
.hamburger-menu a {
106+
padding: 0.5em;
107+
text-decoration: none;
108+
font: bold 1.5em "Lato";
109+
color: #d2d9d8;
110+
display: block;
111+
transition: 0.3s;
112+
}
113+
114+
.hamburger-menu a.Title {
115+
font: bold 2em "Lora";
116+
}
117+
118+
.hamburger-menu a:hover {
119+
color: #a5d0e1;
120+
}
121+
122+
/* The close button */
123+
.hamburger-menu .closebtn {
124+
position: absolute;
125+
top: 0;
126+
right: 25px;
127+
font-size: 36px;
128+
margin-left: 50px;
129+
}
130+
.hamburger-menu,
131+
.hamburger-menu-btn,
132+
.MenuButton {
133+
display: none;
134+
}
135+
136+
.MenuButton {
137+
font-size: 30px;
138+
cursor: pointer;
139+
color: #d2d9d8;
140+
margin-right: 0.5em;
141+
}
142+
143+
@media screen and (max-width: 425px) {
144+
.hamburger-menu,
145+
.hamburger-menu-btn,
146+
.MenuButton {
147+
display: block;
148+
}
149+
}
150+
89151
/* Home Section */
90152
#Home {
91153
padding-top: 15em;

‎portfolio.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,3 +234,11 @@ $(document).ready(function () {
234234
});
235235
});
236236
});
237+
238+
function openNav() {
239+
document.getElementById("hamburger-menu").style.width = "100%";
240+
}
241+
242+
function closeNav() {
243+
document.getElementById("hamburger-menu").style.width = "0";
244+
}

‎projects/index.html

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,27 +73,46 @@
7373
<a href="/" class="Title">Code By Jose</a>
7474
<!-- Navigation Bar -->
7575
<nav>
76-
<a href="index.html#Home"
76+
<a href="https://codebyjose.com#Home"
7777
><i class="fa-solid fa-house" style="color: #d2d9d8"></i>Home</a
7878
>
79-
<a href="index.html#aboutmeSec"
79+
<a href="https://codebyjose.com#aboutmeSec"
8080
><i class="fa-solid fa-user" style="color: #d2d9d8"></i>About</a
8181
>
82-
<a href="index.html#projects"
82+
<a href="https://codebyjose.com#projects"
8383
><i class="fa-solid fa-folder" style="color: #d2d9d8"></i>Projects</a
8484
>
8585
<!--<a href="#experiences">Experiences</a>--->
86-
<a href="index.html#contact"
86+
<a href="https://codebyjose.com#contact"
8787
><i class="fa-solid fa-message" style="color: #d2d9d8"></i>Contact</a
8888
>
89-
<a href="JoseC-CV.pdf" download="JoseC-CV.pdf"
89+
<a href="JoseCortes-Resume.pdf" download="JoseCortes-Resume.pdf"
9090
><i class="fa-solid fa-cloud-arrow-down" style="color: #d2d9d8"></i
9191
>Resume</a
9292
>
9393
</nav>
94+
<span class="MenuButton" onclick="openNav()"
95+
><i class="fa-solid fa-bars"></i
96+
></span>
9497
</header>
9598

9699
<body>
100+
<div id="hamburger-menu" class="hamburger-menu">
101+
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
102+
>&times;</a
103+
>
104+
<a class="Title" href="/">Code By Jose</a>
105+
<a href="https://codebyjose.com#Home">Home</a>
106+
<a href="https://codebyjose.com#aboutmeSec">About</a>
107+
<a href="https://codebyjose.com#projects">Projects</a>
108+
<a href="https://codebyjose.com#contact">Contact</a>
109+
<a
110+
href="https://codebyjose.com/JoseCortes-Resume.pdf"
111+
download="JoseCortes-Resume.pdf"
112+
>Resume</a
113+
>
114+
</div>
115+
97116
<section class="project-hero"></section>
98117

99118
<section class="project-section">

‎projects/projects.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,67 @@ body {
8686
width: 100%;
8787
}
8888

89+
/* The side navigation menu */
90+
.hamburger-menu {
91+
height: 100%;
92+
width: 0;
93+
position: fixed;
94+
z-index: 1;
95+
top: 0;
96+
left: 0;
97+
background-color: #080d0c;
98+
overflow-x: hidden;
99+
transition: 0.5s;
100+
padding-top: 60px;
101+
}
102+
103+
/* The menu content */
104+
.hamburger-menu a {
105+
padding: 0.5em;
106+
text-decoration: none;
107+
font: bold 1.5em "Lato";
108+
color: #d2d9d8;
109+
display: block;
110+
transition: 0.3s;
111+
}
112+
113+
.hamburger-menu a.Title {
114+
font: bold 2em "Lora";
115+
}
116+
117+
.hamburger-menu a:hover {
118+
color: #a5d0e1;
119+
}
120+
121+
/* The close button */
122+
.hamburger-menu .closebtn {
123+
position: absolute;
124+
top: 0;
125+
right: 25px;
126+
font-size: 36px;
127+
margin-left: 50px;
128+
}
129+
.hamburger-menu,
130+
.hamburger-menu-btn,
131+
.MenuButton {
132+
display: none;
133+
}
134+
135+
.MenuButton {
136+
font-size: 30px;
137+
cursor: pointer;
138+
color: #d2d9d8;
139+
margin-right: 0.5em;
140+
}
141+
142+
@media screen and (max-width: 425px) {
143+
.hamburger-menu,
144+
.hamburger-menu-btn,
145+
.MenuButton {
146+
display: block;
147+
}
148+
}
149+
89150
/* Projects */
90151

91152
.project-section {

‎projects/projects.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,11 @@ function displayProjects(data) {
6363
});
6464
}
6565
}
66+
67+
function openNav() {
68+
document.getElementById("hamburger-menu").style.width = "100%";
69+
}
70+
71+
function closeNav() {
72+
document.getElementById("hamburger-menu").style.width = "0";
73+
}

0 commit comments

Comments
 (0)