└── menu responsivo
├── assets
├── img
│ ├── menu_white_36dp.svg
│ └── close_white_36dp.svg
├── js
│ └── script.js
└── css
│ └── style.css
└── index.html
/menu responsivo/assets/img/menu_white_36dp.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/menu responsivo/assets/img/close_white_36dp.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/menu responsivo/assets/js/script.js:
--------------------------------------------------------------------------------
1 | function menuShow() {
2 | let menuMobile = document.querySelector('.mobile-menu');
3 | if (menuMobile.classList.contains('open')) {
4 | menuMobile.classList.remove('open');
5 | document.querySelector('.icon').src = "assets/img/menu_white_36dp.svg";
6 | } else {
7 | menuMobile.classList.add('open');
8 | document.querySelector('.icon').src = "assets/img/close_white_36dp.svg";
9 | }
10 | }
--------------------------------------------------------------------------------
/menu responsivo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Menu Responsivo
10 |
11 |
12 |
13 |
14 |
33 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/menu responsivo/assets/css/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');
2 | * {
3 | padding: 0;
4 | margin: 0;
5 | font-family: 'Inter', sans-serif;
6 | }
7 |
8 | header {
9 | background-color: #24252a;
10 | box-shadow: 0px 3px 10px #464646;
11 | }
12 |
13 | .nav-bar {
14 | display: flex;
15 | justify-content: space-between;
16 | padding: 1.5rem 6rem;
17 | }
18 |
19 | .logo {
20 | display: flex;
21 | align-items: center;
22 | }
23 |
24 | .logo h1 {
25 | color: #fff;
26 | }
27 |
28 | .nav-list {
29 | display: flex;
30 | align-items: center;
31 | }
32 |
33 | .nav-list ul {
34 | display: flex;
35 | justify-content: center;
36 | list-style: none;
37 | }
38 |
39 | .nav-item {
40 | margin: 0 15px;
41 | }
42 |
43 | .nav-link {
44 | text-decoration: none;
45 | font-size: 1.15rem;
46 | color: #fff;
47 | font-weight: 400;
48 | }
49 |
50 | .login-button button {
51 | border: none;
52 | padding: 10px 15px;
53 | border-radius: 5px;
54 | background-color: #0187a7;
55 | }
56 |
57 | .login-button button a {
58 | text-decoration: none;
59 | color: #fff;
60 | font-weight: 500;
61 | font-size: 1.1rem;
62 | }
63 |
64 | .mobile-menu-icon {
65 | display: none;
66 | }
67 |
68 | .mobile-menu {
69 | display: none;
70 | }
71 |
72 | @media screen and (max-width: 730px) {
73 | .nav-bar {
74 | padding: 1.5rem 4rem;
75 | }
76 | .nav-item {
77 | display: none;
78 | }
79 | .login-button {
80 | display: none;
81 | }
82 | .mobile-menu-icon {
83 | display: block;
84 | }
85 | .mobile-menu-icon button {
86 | background-color: transparent;
87 | border: none;
88 | cursor: pointer;
89 | }
90 | .mobile-menu ul {
91 | display: flex;
92 | flex-direction: column;
93 | text-align: center;
94 | padding-bottom: 1rem;
95 | }
96 | .mobile-menu .nav-item {
97 | display: block;
98 | padding-top: 1.2rem;
99 | }
100 | .mobile-menu .login-button {
101 | display: block;
102 | padding: 1rem 2rem;
103 | }
104 | .mobile-menu .login-button button {
105 | width: 100%;
106 | }
107 | .open {
108 | display: block;
109 | }
110 | }
111 |
112 |
113 | /*** FEITO POR: LARISSA V. KICH ***/
--------------------------------------------------------------------------------