Skip to content

Commit 25c1ce9

Browse files
abnerkaizerabnerkaizer
committed
hamburguer menu
1 parent 4a5bfb3 commit 25c1ce9

9 files changed

+155
-8
lines changed

‎contato.html

+14-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,20 @@
1414
<div id="title"><h1>
1515
Social Networks
1616
</h1></div>
17-
<ul>
17+
<div class="hamburger-menu">
18+
<input id="menu__toggle" type="checkbox" />
19+
<label class="menu__btn" for="menu__toggle">
20+
<span></span>
21+
</label>
22+
23+
<ul class="menu__box">
24+
<li><a class="menu__item" href="index.html"><li>Home</li>
25+
<li><a class="menu__item" href="sobre.html"><li>About</li></a>
26+
<li><a class="menu__item" href="projetos.html"><li>Projects</li></a>
27+
<li><a class="menu__item" href="contato.html"><li>Contact</li></a>
28+
</ul>
29+
</div>
30+
<ul class="list">
1831
<a href="index.html"><li>Home</li></a>
1932
<a href="sobre.html"><li>About</li></a>
2033
<a href="projetos.html"><li>Projects</li></a>

‎index.html

+15-2
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,24 @@
1313
<div id="title">
1414
<h1>Abner Kaizer</h1>
1515
</div>
16-
<ul>
16+
<div class="hamburger-menu">
17+
<input id="menu__toggle" type="checkbox" />
18+
<label class="menu__btn" for="menu__toggle">
19+
<span></span>
20+
</label>
21+
22+
<ul class="menu__box">
23+
<li><a class="menu__item" href="index.html"><li>Home</li>
24+
<li><a class="menu__item" href="sobre.html"><li>About</li></a>
25+
<li><a class="menu__item" href="projetos.html"><li>Projects</li></a>
26+
<li><a class="menu__item" href="contato.html"><li>Contact</li></a>
27+
</ul>
28+
</div>
29+
<ul class="list">
1730
<a href="index.html"><li>Home</li></a>
1831
<a href="sobre.html"><li>About</li></a>
1932
<a href="projetos.html"><li>Projects</li></a>
20-
<a href="contato.html"><li>Contacts</li></a>
33+
<a href="contato.html"><li>Contact</li></a>
2134
</ul>
2235
</header>
2336
<main>

‎projetos.html

+14-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,20 @@
1313
<div id="title">
1414
<h1>Projects</h1>
1515
</div>
16-
<ul>
16+
<div class="hamburger-menu">
17+
<input id="menu__toggle" type="checkbox" />
18+
<label class="menu__btn" for="menu__toggle">
19+
<span></span>
20+
</label>
21+
22+
<ul class="menu__box">
23+
<li><a class="menu__item" href="index.html"><li>Home</li>
24+
<li><a class="menu__item" href="sobre.html"><li>About</li></a>
25+
<li><a class="menu__item" href="projetos.html"><li>Projects</li></a>
26+
<li><a class="menu__item" href="contato.html"><li>Contact</li></a>
27+
</ul>
28+
</div>
29+
<ul class="list">
1730
<a href="index.html"><li>Home</li></a>
1831
<a href="sobre.html"><li>About</li></a>
1932
<a href="projetos.html"><li>Projects</li></a>

‎sobre.html

+15-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,20 @@
1111
<body>
1212
<header>
1313
<div id="title"><h1>About</h1></div>
14-
<ul>
14+
<div class="hamburger-menu">
15+
<input id="menu__toggle" type="checkbox" />
16+
<label class="menu__btn" for="menu__toggle">
17+
<span></span>
18+
</label>
19+
20+
<ul class="menu__box">
21+
<li><a class="menu__item" href="index.html"><li>Home</li>
22+
<li><a class="menu__item" href="sobre.html"><li>About</li></a>
23+
<li><a class="menu__item" href="projetos.html"><li>Projects</li></a>
24+
<li><a class="menu__item" href="contato.html"><li>Contact</li></a>
25+
</ul>
26+
</div>
27+
<ul class="list">
1528
<a href="index.html"><li>Home</li></a>
1629
<a href="sobre.html"><li>About</li></a>
1730
<a href="projetos.html"><li>Projects</li></a>
@@ -21,7 +34,7 @@
2134
<main>
2235

2336
<aside>
24-
<img src="components/images/1672836797104.jpg" alt="minha-foto">
37+
<img class="foto" src="components/images/1672836797104.jpg" alt="minha-foto">
2538
<p>
2639
My name is Abner Kaizer and I study computer engineering at <a href="https://www.cefetmg.br/">CEFET-MG</a> .
2740
And I am a member of <a href="https://commitjr.com">Commit Jr</a>.

‎styles/contato.css

+3
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ div{
3434
display: flex;
3535
flex-direction: row;
3636
}
37+
.hamburger-menu{
38+
display: none;
39+
}
3740
#icons{
3841
font-size: 36px;
3942
margin: 15px;

‎styles/media.css

+80-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@media screen and (max-width: 760px){
22
header{
3-
flex-direction: column;
3+
flex-direction: row;
44
}
55
main{
66
flex-direction: column;
@@ -14,7 +14,86 @@
1414
body{
1515
text-align: center;
1616
}
17+
.foto{
18+
display: flex;
19+
}
1720
img{
1821
display: none;
1922
}
23+
.list{
24+
display: none;
25+
}
26+
.hamburger-menu{
27+
display: flex;
28+
}
29+
#menu__toggle {
30+
opacity: 0;
31+
}
32+
#menu__toggle:checked + .menu__btn > span {
33+
transform: rotate(45deg);
34+
}
35+
#menu__toggle:checked + .menu__btn > span::before {
36+
top: 0;
37+
transform: rotate(0deg);
38+
}
39+
#menu__toggle:checked + .menu__btn > span::after {
40+
top: 0;
41+
transform: rotate(90deg);
42+
}
43+
#menu__toggle:checked ~ .menu__box {
44+
right: 0 !important;
45+
}
46+
.menu__btn {
47+
position: fixed;
48+
top: 20px;
49+
right: 20px;
50+
width: 26px;
51+
height: 26px;
52+
cursor: pointer;
53+
z-index: 1;
54+
}
55+
.menu__btn > span,
56+
.menu__btn > span::before,
57+
.menu__btn > span::after {
58+
display: block;
59+
border-radius: 30px;
60+
position: absolute;
61+
width: 100%;
62+
height: 4px;
63+
background-color: rgb(226, 217, 84);
64+
transition-duration: .25s;
65+
}
66+
.menu__btn > span::before {
67+
content: '';
68+
top: -8px;
69+
}
70+
.menu__btn > span::after {
71+
content: '';
72+
top: 8px;
73+
}
74+
.menu__box {
75+
display: flex;
76+
position: fixed;
77+
flex-direction: column;
78+
top: 0;
79+
right: -100%;
80+
width: 150px;
81+
height: 100%;
82+
margin: 0;
83+
padding: 5px;
84+
background-color: #0f0f0f;
85+
transition-duration: .25s;
86+
}
87+
.menu__item {
88+
display: block;
89+
color: white;
90+
font-family: Arial, Helvetica, sans-serif;
91+
font-size: 20px;
92+
font-weight: 600;
93+
text-decoration: none;
94+
transition-duration: .25s;
95+
}
96+
.menu__item:hover {
97+
color: rgb(226, 217, 84);
98+
}
2099
}

‎styles/projetos.css

+3
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ main{
2525
margin-top: 50px;
2626
justify-content: space-between;
2727
}
28+
.hamburger-menu{
29+
display: none;
30+
}
2831
a{
2932

3033
color: white;

‎styles/sobre.css

+3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ li{
1919
#title{
2020
color:rgb(226, 217, 84);
2121
}
22+
.hamburger-menu{
23+
display: none;
24+
}
2225
img{
2326
border: 1px solid #ddd;
2427
border-radius: 4px;

‎styles/style.css

+8-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ header{
1717
line-height: 10px;
1818

1919
}
20+
nav {
21+
display: none;
22+
}
2023
li{
2124
display: inline-block;
2225
margin: 20px;
@@ -29,6 +32,9 @@ h2{
2932
line-height: 40px;
3033
font-family: Arial, Helvetica, sans-serif;
3134
}
35+
.hamburger-menu{
36+
display: none;
37+
}
3238
main{
3339
display: flex;
3440
flex-direction: row;
@@ -46,6 +52,7 @@ img{
4652
height: 430px;
4753

4854
}
55+
4956
span{
5057
color:rgb(226, 217, 84);
5158
}
@@ -57,4 +64,4 @@ a{
5764
a:hover{
5865
color:rgb(226, 217, 84);
5966
transition: 0.3s all;
60-
}
67+
}

0 commit comments

Comments
 (0)