Skip to content

Commit 1052fcd

Browse files
juandcjuandc
committed
fusion menu desktop
1 parent 5ca774e commit 1052fcd

File tree

3 files changed

+220
-0
lines changed

3 files changed

+220
-0
lines changed

‎index.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
11+
12+
<link rel="stylesheet" href="./styles.css">
13+
14+
<title>YardSale: tienda online de cositas chidas</title>
15+
</head>
16+
<body>
17+
<nav>
18+
<img src="./icons/icon_menu.svg" alt="menu" class="menu">
19+
20+
<div class="navbar-left">
21+
<img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">
22+
23+
<ul>
24+
<li>
25+
<a href="/">All</a>
26+
</li>
27+
<li>
28+
<a href="/">Clothes</a>
29+
</li>
30+
<li>
31+
<a href="/">Electronics</a>
32+
</li>
33+
<li>
34+
<a href="/">Furnitures</a>
35+
</li>
36+
<li>
37+
<a href="/">Toys</a>
38+
</li>
39+
<li>
40+
<a href="/">Others</a>
41+
</li>
42+
</ul>
43+
</div>
44+
45+
<div class="navbar-right">
46+
<ul>
47+
<li class="navbar-email">[email protected]</li>
48+
<li class="navbar-shopping-cart">
49+
<img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
50+
<div>2</div>
51+
</li>
52+
</ul>
53+
</div>
54+
55+
<div class="desktop-menu inactive">
56+
<ul>
57+
<li>
58+
<a href="/" class="title">My orders</a>
59+
</li>
60+
61+
<li>
62+
<a href="/">My account</a>
63+
</li>
64+
65+
<li>
66+
<a href="/">Sign out</a>
67+
</li>
68+
</ul>
69+
</div>
70+
</nav>
71+
72+
<script src="./main.js"></script>
73+
</body>
74+
</html>

‎main.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const menuEmail = document.querySelector('.navbar-email');
2+
const desktopMenu = document.querySelector('.desktop-menu');
3+
4+
menuEmail.addEventListener('click', toggleDesktopMenu);
5+
6+
function toggleDesktopMenu() {
7+
console.log('Click');
8+
desktopMenu.classList.toggle('inactive');
9+
}
10+
11+
console.log('JS funcionando');

‎styles.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
:root {
2+
--white: #FFFFFF;
3+
--black: #000000;
4+
--very-light-pink: #C7C7C7;
5+
--text-input-field: #F7F7F7;
6+
--hospital-green: #ACD9B2;
7+
--sm: 14px;
8+
--md: 16px;
9+
--lg: 18px;
10+
}
11+
body {
12+
margin: 0;
13+
font-family: 'Quicksand', sans-serif;
14+
}
15+
16+
.inactive {
17+
display: none;
18+
}
19+
20+
21+
nav {
22+
display: flex;
23+
justify-content: space-between;
24+
padding: 0 24px;
25+
border-bottom: 1px solid var(--very-light-pink);
26+
}
27+
.menu {
28+
display: none;
29+
}
30+
.logo {
31+
width: 100px;
32+
}
33+
.navbar-left ul,
34+
.navbar-right ul {
35+
list-style: none;
36+
padding: 0;
37+
margin: 0;
38+
display: flex;
39+
align-items: center;
40+
height: 60px;
41+
}
42+
.navbar-left {
43+
display: flex;
44+
}
45+
.navbar-left ul {
46+
margin-left: 12px;
47+
}
48+
.navbar-left ul li a,
49+
.navbar-right ul li a {
50+
text-decoration: none;
51+
color: var(--very-light-pink);
52+
border: 1px solid var(--white);
53+
padding: 8px;
54+
border-radius: 8px;
55+
}
56+
.navbar-left ul li a:hover,
57+
.navbar-right ul li a:hover {
58+
border: 1px solid var(--hospital-green);
59+
color: var(--hospital-green);
60+
}
61+
.navbar-email {
62+
color: var(--very-light-pink);
63+
cursor: pointer;
64+
font-size: var(--sm);
65+
margin-right: 12px;
66+
}
67+
.navbar-shopping-cart {
68+
position: relative;
69+
}
70+
.navbar-shopping-cart div {
71+
width: 16px;
72+
height: 16px;
73+
background-color: var(--hospital-green);
74+
border-radius: 50%;
75+
font-size: var(--sm);
76+
font-weight: bold;
77+
position: absolute;
78+
top: -6px;
79+
right: -3px;
80+
display: flex;
81+
justify-content: center;
82+
align-items: center;
83+
}
84+
85+
86+
.desktop-menu {
87+
position: absolute;
88+
top: 60px;
89+
right: 60px;
90+
background: var(--white);
91+
width: 100px;
92+
height: auto;
93+
border: 1px solid var(--very-light-pink);
94+
border-radius: 6px;
95+
padding: 20px 20px 0 20px;
96+
}
97+
.desktop-menu ul {
98+
list-style: none;
99+
padding: 0;
100+
margin: 0;
101+
}
102+
.desktop-menu ul li {
103+
text-align: end;
104+
}
105+
.desktop-menu ul li:nth-child(1),
106+
.desktop-menu ul li:nth-child(2) {
107+
font-weight: bold;
108+
}
109+
.desktop-menu ul li:last-child {
110+
padding-top: 20px;
111+
border-top: 1px solid var(--very-light-pink);
112+
}
113+
.desktop-menu ul li:last-child a {
114+
color: var(--hospital-green);
115+
font-size: var(--sm);
116+
}
117+
.desktop-menu ul li a {
118+
color: var(--back);
119+
text-decoration: none;
120+
margin-bottom: 20px;
121+
display: inline-block;
122+
}
123+
124+
125+
@media (max-width: 640px) {
126+
.menu {
127+
display: block;
128+
}
129+
.navbar-left ul {
130+
display: none;
131+
}
132+
.navbar-email {
133+
display: none;
134+
}
135+
}

0 commit comments

Comments
 (0)