├── README.md
├── index.html
└── style.css


/README.md:
--------------------------------------------------------------------------------
1 | # CSS-Navigation-Bar
2 | 
3 | 
4 | 
5 | 
6 | https://user-images.githubusercontent.com/42389395/169996614-553da355-6e6f-44e1-a238-3fea37d9fb97.mov
7 | 
8 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <div class="nav">
 2 |   <input type="checkbox">
 3 |     <span></span>
 4 |     <span></span>
 5 |     <div class="menu">
 6 |       <li><a href="#">home</a></li>
 7 |       <li><a href="#">about</a></li>
 8 |       <li><a href="#">cursos</a></li>
 9 |       <li><a href="#">blog</a></li>
10 |       <li><a href="#">contactos</a></li>
11 |     </div>
12 | </div>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     min-height: 100vh;
 5 |     background-color: #dcdc39;
 6 |     font-family: 'Open Sans', Verdana, Geneva, Tahoma, sans-serif;
 7 | }
 8 | 
 9 | body, .nav, .menu {
10 |     display: flex;
11 |     justify-content: center;
12 |     align-items: center;
13 | }
14 | 
15 | .nav {
16 |     position: relative;
17 |     background-color: #fff;
18 |     padding: 20px;
19 |     transition: 0.5s;
20 |     border-radius: 50px;
21 |     overflow: hidden;
22 |     box-shadow: 0 8px 15px rgba(0,0,0,.2);
23 | }
24 | 
25 | .menu {
26 |     margin: 0;
27 |     padding: 0;
28 |     width: 0;
29 |     overflow: hidden;
30 |     transition: 0.5s;
31 | }
32 | 
33 | .nav input:checked ~ .menu {
34 |     width: 450px;
35 | }
36 | 
37 | .menu li {
38 |     list-style: none;
39 |     margin: 0 10px;
40 | }
41 | 
42 | .menu li a {
43 |     text-decoration: none;
44 |     color: #666;
45 |     text-transform: uppercase;
46 |     font-weight: 600;
47 |     transition: 0.5s;
48 | }
49 | 
50 | .menu li a:hover {
51 |     color: #161919;
52 | }
53 | 
54 | .nav input {
55 |     width: 40px;
56 |     height: 40px;
57 |     cursor: pointer;
58 |     opacity: 0;
59 | }
60 | 
61 | .nav span {
62 |     position: absolute;
63 |     left: 30px;
64 |     width: 30px;
65 |     height: 4px;
66 |     border-radius: 50px;
67 |     background-color: #666;
68 |     pointer-events: none;
69 |     transition: 0.5s;
70 | }
71 | 
72 | .nav input:checked ~ span {
73 |     background-color: #f974a1;
74 | }
75 | 
76 | .nav span:nth-child(2) {
77 |     transform: translateY(-8px);
78 | }
79 | 
80 | .nav input:checked ~ span:nth-child(2) {
81 |     transform: translateY(0) rotate(-45deg);
82 | }
83 | .nav span:nth-child(3) {
84 |     transform: translateY(8px);
85 | }
86 | 
87 | .nav input:checked ~ span:nth-child(3) {
88 |     transform: translateY(0) rotate(45deg);
89 | }


--------------------------------------------------------------------------------