├── .vscode
└── settings.json
├── assets
├── close.svg
├── down.svg
├── email.svg
├── help.svg
├── house.svg
├── menu.svg
└── projects.svg
├── estilos.css
└── index.html
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5501
3 | }
--------------------------------------------------------------------------------
/assets/close.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/down.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/email.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/help.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/house.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/menu.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/assets/projects.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/estilos.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | box-sizing: border-box;
4 | padding: 0;
5 | }
6 |
7 | body{
8 | font-family: Arial;
9 | }
10 |
11 |
12 | .nav{
13 | background-color: #830248;
14 |
15 | --img1: scale(1);
16 | --img2: scale(0);
17 | }
18 |
19 | .nav:has( .dropdown:target ){
20 | --img1: scale(0);
21 | --img2: scale(1);
22 |
23 | --clip:inset(0 0 0 0);
24 |
25 | }
26 |
27 | .nav__container{
28 | width: 90%;
29 | margin: 0 auto;
30 | height: 70px;
31 |
32 | display: grid;
33 | grid-template-columns: max-content max-content;
34 | grid-template-areas: "title img";
35 | justify-content: space-between;
36 | align-items: center;
37 |
38 | overflow: hidden;
39 | }
40 |
41 | .nav__title{
42 | color: #fff;
43 | grid-area: title;
44 | }
45 |
46 |
47 | .nav__menu{
48 | grid-area: img;
49 | position: relative;
50 | z-index: 10;
51 |
52 | transform: var(--img1);
53 | }
54 |
55 | .nav__menu--second{
56 | transform: var(--img2);
57 | }
58 |
59 | .nav__icon{
60 | width: 30px;
61 | display: block;
62 | }
63 |
64 | .dropdown{
65 | position: absolute;
66 | background-color: #000;
67 | width: 75%;
68 | max-width: 300px;
69 | right: 0;
70 | top: 0;
71 | bottom: 0;
72 | padding: 1em;
73 |
74 | display: grid;
75 | align-content:center ;
76 | gap: 1rem;
77 |
78 | overflow-y: auto;
79 |
80 |
81 | clip-path: var(--clip, inset(0 0 100% 100%));
82 | transition: clip-path .5s;
83 | }
84 |
85 | .dropdown__list{
86 | list-style: none;
87 | }
88 |
89 | .dropdown__link{
90 | color: rgb(184, 187, 191);
91 | padding: 1em .7em;
92 | text-decoration: none;
93 |
94 | display: flex;
95 | align-items: center;
96 | gap: .6rem;
97 |
98 | position: relative;
99 | background-color: var(--bg, transparent);
100 | border-radius: 6px;
101 | }
102 |
103 | .dropdown__list:has( :checked ){
104 | --rows: 1fr;
105 | --rotate: rotate(180deg);
106 | --bg: #28303B;
107 | }
108 |
109 | .dropdown__check{
110 | position: absolute;
111 | width: 100%;
112 | height: 100%;
113 | opacity: 0;
114 | cursor: pointer;
115 | }
116 |
117 | .dropdown__arrow{
118 | margin-left: auto;
119 | transform: var(--rotate, 0);
120 | transition: .2s transform;
121 | }
122 |
123 | .dropdown__content{
124 | display: grid;
125 | grid-template-rows: var(--rows, 0fr);
126 | transition: .3s grid-template-rows;
127 | }
128 |
129 | .dropdown__sub{
130 | overflow: hidden;
131 |
132 | }
133 |
134 | .dropdown__li{
135 | width: 85%;
136 | list-style: none;
137 | margin-left: auto;
138 | }
139 |
140 | .dropdown__anchor{
141 | padding: 1em 0;
142 | display: block;
143 | color: #B6BABE;
144 | text-decoration: none;
145 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Menú Dropdown
8 |
9 |
10 |
11 |
12 |
101 |
102 |
103 |
104 |
--------------------------------------------------------------------------------