Pessoal, estou começando com HTML, CSS e JavaScript, como eu crio um menu que fica responsivo ?
Menu responsivo em HTML
4 Respostas
1 like
utilize framework Bootstrap
1 like
Acessa Tbm Este Link do W3schools, Vai te ajudar:
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
1 like
ou se vc achar bootstrap muito complicado vc pode definir as medidas em porcentagem. Exemplo
em vez de:
width: 450px;
}```
usar:
``` .classeQualquer {
width: 18%;
}```
Cara, fiz esse em um arquivo style.css e com bootstrap também. OBS-1: esses que têm " .logo " , " .btn" são classes no html.
OBS-2: “min-width: 480px” , " min-width: 480px" e assim por diante são as dimensões que o aparelho vai ter. Vai do desktop ao celular.
OBS-3: Existem vídeo-aulas. Dá uma procurada.
/====== MOBILE FIRST======/
/* SMALL DEVICES - SMATPHONE*/
@media screen and (min-width: 480px) {
.logo {
width: 200px;
background: url(…/img/logo.png) center center/200px no-repeat;
}
.btn {
font-size: 2em;
}
}
/* SMALL DEVICES - TABLETS*/
@media screen and (min-width: 768px) {
.servico {
width: 49%;
float: left;
margin-right: 2%;
}
.servico:nth-child(2) {
margin-right: 0;
}
.newsletter h2 {
font-size: 2em;
}
.newsletter h3 {
font-size: 1.5em;
}
.newsletter input {
width: 70%;
padding: 2%;
float: left;
margin-right: 1%;
}
.newsletter button {
width: 29%;
padding: 2%;
float: right;
margin-top: 0;
}
}
/* MEDIUM DEVICES - TABLETS & DESKTOPS */
@media screen and (min-width: 960px) {
.title {
width: 70%;
float: left;
text-align: left;
}
.title h2 {
font-size: 3em;
}
.title h3 {
font-size: 2em;
}
.buttons {
width: 30%;
float: right;
margin-top: 0;
}
.servico {
width: 32%;
}
.servico:nth-child(2) {
margin-right: 2%;
}
.servico:nth-child(3) {
margin-right: 0;
}
.newsletter input {
width: 60%;
float: none;
}
.newsletter button {
width: 30%;
float: none;
}
}
/* LARGE DEVICES - WIDE SCREENS */
@media screen and (min-width: 1280px) {
.btn-menu {
display: none;
}
.btn-close {
display: none;
}
.menu {
width: auto;
height: 56px;
line-height: 56px;
float: right;
background-color: #f5f5f5;
display: block !important;
position: static;
}
.menu li {
padding: 0;
float: left;
}
.menu li a {
color: #130400;
font-size: 1em;
padding: 15px;
}
.menu li a:hover {
border: none;
color: #da6709;
}
}
Criado 1 de novembro de 2017
Ultima resposta 19 de dez. de 2017
Respostas 4
Participantes 5
Alura O que é Front-end, Back-end e Full Stack? Aprenda as diferenças entre essas áreas Front-end, Back-end e Full Stack: conheça as características e as linguagens das principais áreas de programação
Casa do Codigo Seguranca em front-end: Estrategias para mitigar ataques... Por Antonio Luis Rossi — Casa do Codigo