Menu responsivo em HTML

Front-end HTML
#1

Pessoal, estou começando com HTML, CSS e JavaScript, como eu crio um menu que fica responsivo ?

1 curtida
#2

utilize framework Bootstrap

1 curtida
#3

Acessa Tbm Este Link do W3schools, Vai te ajudar:
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

1 curtida
#4

ou se vc achar bootstrap muito complicado vc pode definir as medidas em porcentagem. Exemplo

em vez de:

      width: 450px;
}```

usar:
``` .classeQualquer {
      width: 18%;
}```
1 curtida
#5

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;
}
}