Skip to content

Commit

Permalink
menu hamburger das paginas
Browse files Browse the repository at this point in the history
  • Loading branch information
@Franppires
Franppires committed Mar 23, 2023
1 parent e73097c commit e5b979b
Show file tree
Hide file tree
Showing 8 changed files with 209 additions and 70 deletions.
22 changes: 15 additions & 7 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,22 @@
</head>
<body>
<header>
<nav>
<ul class="header">
<li><a href="index.html">Página Inicial</a></li>
<li><a href="projects.html">Projetos</a></li>
<li><a href="#about">Sobre Mim</a></li>
<li><a href="contact.html">Contato</a></li>
<nav class="navBar">
<ul class="navMenu">
<li class="navItem"><a class="navLink" href="index.html">Página Inicial</a></li>
<li class="navItem"><a class="navLink" href="projects.html">Projetos</a></li>
<li class="navItem hide"><a class="navLink hide" href="cordepapel.html">Cor de Papel</a></li>
<li class="navItem hide"><a class="navLink hide" href="cartafy.html">Cartafy</a></li>
<li class="navItem"><a class="navLink" href="about.html">Sobre Mim</a></li>
<li class="navItem"><a class="navLink" href="contact.html">Contato</a></li>
</ul>
</nav>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>

</header>

<main>
Expand Down
126 changes: 104 additions & 22 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,31 +49,70 @@ li, p {
font-family: 'Merriweather', serif;
}


.header {
width: 100%;
height: 60px;
header {
background-color: var(--dark-blue);
padding-bottom: 5px var(--red);
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
gap: 40px;
list-style: none;
position: fixed;
top: 0;
width: 100%;
}

nav ul li a {
li {
list-style: none;
}

a {
text-decoration: none;
color: var(--ice);
}

ul {
.navBar {
min-height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}

.navMenu {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
width: 100%;
}

.navLink {
transition: 0.7s ease;
}

.navLink:hover {
color: var(--medium-blue)
}

.hamburger {
display: none;
cursor: pointer;
}


.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: var(--ice)
}

.navBar {
border-bottom: var(--red) 5px solid;
}
/*
position: fixed;
top: 0;
*/

main {
background-color: var(--ligth-blue);
Expand Down Expand Up @@ -124,6 +163,10 @@ main {
height: 486px;
}

.hide {
display: none;
}

.content {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -434,7 +477,7 @@ iframe {
border: 1px solid rgba(0, 0, 0, 0.1);
width: 800px;
height: 450px;
margin: 120px 274px 0;
margin: 120px 250px;
}

.colorsComponent {
Expand Down Expand Up @@ -542,18 +585,53 @@ iframe {
font-family: 'Merriweather', serif;
}

li {
display: none;
.hamburger {
display: block;
position:fixed;
right: 20px
}

.hamburger.active {
color: var(--grey-blue);
}

.hamburger.active .bar:nth-child(2) {
opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
color: var(--grey-blue);
}

.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
color: var(--grey-blue);
}



.navMenu {
position: fixed;
left: -100%;
top: 60px;
gap: 0;
flex-direction: column;
background-color: var(--ligth-blue);
width: 100%;
height: 100%;
text-align: center;
transition:0.3s;
}
.navItem {
margin: 16px 0;
}

.navMenu.active {
left: 0;
}

.navLink {
color: var(--dark-blue);
}

.cover {
width: 95%;
Expand All @@ -562,7 +640,6 @@ iframe {
margin: 104px 10px 0;
}


.project {
flex-direction: column;
margin: 0;
Expand All @@ -575,6 +652,11 @@ iframe {
background-color: var(--ice);
}

.hide {
display: block;
color: var(--medium-blue);
}

.titleMobile {
display: block;
padding: 16px;
Expand Down Expand Up @@ -628,7 +710,7 @@ iframe {
.logo {
gap: 48px;
margin-top: 40px;
padding-bottom: 30%;
padding-bottom: 70%;
}

.logo img {
Expand Down Expand Up @@ -779,7 +861,7 @@ iframe {
border: 1px solid rgba(0, 0, 0, 0.1);
width: 328px;
height: 297px;
margin: 40px 0 ;
margin: 40px 0;
}

.colorsComponent {
Expand Down
14 changes: 14 additions & 0 deletions assets/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.navMenu');

hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
})

document.querySelectorAll('.navLink').forEach(
n => n.addEventListener('click', () => {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
})
)


function showModal() {
Expand Down
26 changes: 17 additions & 9 deletions cartafy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,22 @@
</head>
<body>
<header>
<nav>
<ul class="header">
<li><a href="index.html">Página Inicial</a></li>
<li><a href="projects.html">Projetos</a></li>
<li><a href="about.html">Sobre Mim</a></li>
<li><a href="contact.html">Contato</a></li>
<nav class="navBar">
<ul class="navMenu">
<li class="navItem"><a class="navLink" href="index.html">Página Inicial</a></li>
<li class="navItem"><a class="navLink" href="projects.html">Projetos</a></li>
<li class="navItem hide"><a class="navLink hide" href="cordepapel.html">Cor de Papel</a></li>
<li class="navItem hide"><a class="navLink hide" href="cartafy.html">Cartafy</a></li>
<li class="navItem"><a class="navLink" href="about.html">Sobre Mim</a></li>
<li class="navItem"><a class="navLink" href="contact.html">Contato</a></li>
</ul>
</nav>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>

</header>

<main>
Expand Down Expand Up @@ -74,9 +82,9 @@ <h3>Telas</h3>
<div class="titleCartafy">
<h3>Protótipos</h3>
<h4>Mobile</h4>
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FRxJ9cQ4GJ11ULjPEUsCc93%2FCartafy%3Fnode-id%3D401%253A7570%26scaling%3Dscale-down%26page-id%3D401%253A7525%26starting-point-node-id%3D401%253A7570" allowfullscreen></iframe>
<iframe src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FRxJ9cQ4GJ11ULjPEUsCc93%2FCartafy%3Fnode-id%3D401%253A7570%26scaling%3Dscale-down%26page-id%3D401%253A7525%26starting-point-node-id%3D401%253A7570" allowfullscreen></iframe>
<h4>Desktop</h4>
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FRxJ9cQ4GJ11ULjPEUsCc93%2FCartafy%3Fnode-id%3D43%253A2055%26scaling%3Dscale-down%26page-id%3D1%253A6%26starting-point-node-id%3D43%253A2055" allowfullscreen></iframe>
<iframe src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FRxJ9cQ4GJ11ULjPEUsCc93%2FCartafy%3Fnode-id%3D43%253A2055%26scaling%3Dscale-down%26page-id%3D1%253A6%26starting-point-node-id%3D43%253A2055" allowfullscreen></iframe>
</div>

<div class="titleCartafy">
Expand Down
22 changes: 15 additions & 7 deletions contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,22 @@
</head>
<body>
<header>
<nav>
<ul class="header">
<li><a href="index.html">Página Inicial</a></li>
<li><a href="projects.html">Projetos</a></li>
<li><a href="about.html">Sobre Mim</a></li>
<li><a href="#contact">Contato</a></li>
<nav class="navBar">
<ul class="navMenu">
<li class="navItem"><a class="navLink" href="index.html">Página Inicial</a></li>
<li class="navItem"><a class="navLink" href="projects.html">Projetos</a></li>
<li class="navItem hide"><a class="navLink hide" href="cordepapel.html">Cor de Papel</a></li>
<li class="navItem hide"><a class="navLink hide" href="cartafy.html">Cartafy</a></li>
<li class="navItem"><a class="navLink" href="about.html">Sobre Mim</a></li>
<li class="navItem"><a class="navLink" href="contact.html">Contato</a></li>
</ul>
</nav>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>

</header>

<main>
Expand Down
22 changes: 15 additions & 7 deletions cordepapel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,22 @@
</head>
<body>
<header>
<nav>
<ul class="header">
<li><a href="index.html">Página Inicial</a></li>
<li><a href="projects.html">Projetos</a></li>
<li><a href="about.html">Sobre Mim</a></li>
<li><a href="contact.html">Contato</a></li>
<nav class="navBar">
<ul class="navMenu">
<li class="navItem"><a class="navLink" href="index.html">Página Inicial</a></li>
<li class="navItem"><a class="navLink" href="projects.html">Projetos</a></li>
<li class="navItem hide"><a class="navLink hide" href="cordepapel.html">Cor de Papel</a></li>
<li class="navItem hide"><a class="navLink hide" href="cartafy.html">Cartafy</a></li>
<li class="navItem"><a class="navLink" href="about.html">Sobre Mim</a></li>
<li class="navItem"><a class="navLink" href="contact.html">Contato</a></li>
</ul>
</nav>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>

</header>

<main>
Expand Down
25 changes: 14 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,22 @@
</head>
<body>
<header>
<nav>
<ul class="header">
<li><a href="index.html">Página Inicial</a></li>
<li><a href="#projects">Projetos</a></li>
<li><a href="#about">Sobre Mim</a></li>
<li><a href="#contact">Contato</a></li>
<nav class="navBar">
<ul class="navMenu">
<li class="navItem"><a class="navLink" href="index.html">Página Inicial</a></li>
<li class="navItem"><a class="navLink" href="#projects">Projetos</a></li>
<li class="navItem hide"><a class="navLink hide" href="cordepapel.html">Cor de Papel</a></li>
<li class="navItem hide"><a class="navLink hide" href="cartafy.html">Cartafy</a></li>
<li class="navItem"><a class="navLink" href="#about">Sobre Mim</a></li>
<li class="navItem"><a class="navLink" href="#contact">Contato</a></li>
</ul>
</nav>



<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>

<hr class="border" />
</header>

<main>
Expand Down
Loading

0 comments on commit e5b979b

Please sign in to comment.