├── css └── estilos.css ├── index.html └── js └── script.js /css/estilos.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | text-decoration: none; 8 | font-family: 'Open Sans', sans-serif; 9 | } 10 | 11 | body{ 12 | margin-left: 80px; 13 | margin-top: 80px; 14 | transition: margin-left 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86); 15 | } 16 | 17 | main{ 18 | padding: 20px; 19 | } 20 | 21 | header{ 22 | width: 100%; 23 | height: 80px; 24 | background: #f5f5f5; 25 | display: flex; 26 | align-items: center; 27 | position: fixed; 28 | top: 0; 29 | z-index: 200; 30 | } 31 | 32 | .icon__menu{ 33 | width: 50px; 34 | height: 100%; 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | transform: translateX(10px); 39 | } 40 | 41 | .icon__menu i{ 42 | font-size: 20px; 43 | cursor: pointer; 44 | position: absolute; 45 | } 46 | 47 | .menu__side{ 48 | width: 80px; 49 | height: 100%; 50 | background: #1783db; 51 | position: fixed; 52 | top: 0; 53 | left: 0; 54 | color: white; 55 | font-size: 18px; 56 | z-index: 300; 57 | overflow: hidden; 58 | overflow-y: scroll; 59 | border-right: 20px solid #1783db; 60 | transition: all 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86); 61 | } 62 | 63 | /*Ocultar scroll para chrome, safari y opera*/ 64 | .menu__side::-webkit-scrollbar{ 65 | display: none; 66 | } 67 | 68 | /*Ocultar scroll para IE, Edge y Firefox*/ 69 | .menu__side{ 70 | -ms-overflow-style: none; 71 | scrollbar-width: none; 72 | } 73 | 74 | 75 | .name__page{ 76 | padding: 20px 30px; 77 | display: flex; 78 | align-items: center; 79 | margin-top: 10px; 80 | } 81 | 82 | .name__page i{ 83 | width: 20px; 84 | margin-right: 20px; 85 | } 86 | 87 | .options__menu{ 88 | padding: 20px 30px; 89 | position: absolute; 90 | top: 80px; 91 | } 92 | 93 | .options__menu a{ 94 | color: #ffffffb2; 95 | cursor: default; 96 | display: block; 97 | position: relative; 98 | transition: color 300ms; 99 | } 100 | 101 | .options__menu a:hover{ 102 | color: white; 103 | } 104 | 105 | .options__menu .option{ 106 | padding: 20px 0px; 107 | display: flex; 108 | align-items: center; 109 | position: relative; 110 | } 111 | 112 | .options__menu .option i{ 113 | width: 20px; 114 | margin-right: 20px; 115 | cursor: pointer; 116 | } 117 | 118 | .options__menu .option h4{ 119 | font-weight: 300; 120 | cursor: pointer; 121 | } 122 | 123 | a.selected{ 124 | color: #fff; 125 | } 126 | 127 | .selected:before{ 128 | content: ''; 129 | width: 3px; 130 | height: 80%; 131 | background: white; 132 | position: absolute; 133 | top: 10%; 134 | left: -30px; 135 | } 136 | 137 | /*Clases para usar en JavaScript*/ 138 | 139 | .body_move{ 140 | margin-left: 250px; 141 | } 142 | 143 | .menu__side_move{ 144 | width: 250px; 145 | } 146 | 147 | 148 | @media screen and (max-width: 760px){ 149 | .body_move{ 150 | margin-left: 0px; 151 | } 152 | 153 | .menu__side_move{ 154 | width: 80px; 155 | left: -80px; 156 | } 157 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menú lateral responsive - MagtimusPro 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 | 23 |
24 | 25 |

MagtimusPro

26 |
27 | 28 |
29 | 30 | 31 |
32 | 33 |

Inicio

34 |
35 | 36 | 37 | 38 |
39 | 40 |

Portafolio

41 |
42 | 43 | 44 | 45 |
46 | 47 |

Cursos

48 |
49 | 50 | 51 | 52 |
53 | 54 |

Blog

55 |
56 | 57 | 58 | 59 |
60 | 61 |

Contacto

62 |
63 | 64 | 65 | 66 |
67 | 68 |

Nosotros

69 |
70 | 71 | 72 |
73 | 74 |
75 | 76 |
77 |

Title Exemple


78 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam sapiente cumque dicta animi explicabo sequi. Ex amet et, dolor eligendi commodi consectetur quo voluptatibus, cum nemo porro veniam at blanditiis?


79 | 80 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident adipisci beatae impedit quia, deleniti quasi sequi iusto exercitationem nihil nulla, laboriosam dolore corrupti fuga officiis? Odit a mollitia id magnam amet delectus quia blanditiis reprehenderit explicabo eveniet! Rem voluptatum explicabo ipsum quae, dolorum, laudantium doloribus a, illum saepe sapiente accusantium dicta reiciendis? Amet iure porro voluptatum error fugit odit voluptas?

81 |
82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | //Ejecutar función en el evento click 2 | document.getElementById("btn_open").addEventListener("click", open_close_menu); 3 | 4 | //Declaramos variables 5 | var side_menu = document.getElementById("menu_side"); 6 | var btn_open = document.getElementById("btn_open"); 7 | var body = document.getElementById("body"); 8 | 9 | //Evento para mostrar y ocultar menú 10 | function open_close_menu(){ 11 | body.classList.toggle("body_move"); 12 | side_menu.classList.toggle("menu__side_move"); 13 | } 14 | 15 | //Si el ancho de la página es menor a 760px, ocultará el menú al recargar la página 16 | 17 | if (window.innerWidth < 760){ 18 | 19 | body.classList.add("body_move"); 20 | side_menu.classList.add("menu__side_move"); 21 | } 22 | 23 | //Haciendo el menú responsive(adaptable) 24 | 25 | window.addEventListener("resize", function(){ 26 | 27 | if (window.innerWidth > 760){ 28 | 29 | body.classList.remove("body_move"); 30 | side_menu.classList.remove("menu__side_move"); 31 | } 32 | 33 | if (window.innerWidth < 760){ 34 | 35 | body.classList.add("body_move"); 36 | side_menu.classList.add("menu__side_move"); 37 | } 38 | 39 | }); --------------------------------------------------------------------------------