Estou usando um arquivo index.html
que em uma tela larga aparece todos os itens do menu, mas ao ser redimensionado pra uma tela menor (max-width: 640px)
, a barra de menu vira um ícone onde ao ser clicado aparece os itens do menu na tela menor.
Minha dúvida é: depois de clicar em um item gostaria que o menu da tela menor fechasse e ao mesmo tempo carregar um arquivo html dentro do iframe.
Obs.: Esse arquivo html que será carregado dentro do iframe é correspondente ao item do menu clicado.
Abaixo vai o código como exemplo:
body {
margin: 0;
padding: 0;
}
.menu {
width: 100%;
height: 50px;
background-color: #bbb;
font-family: 'Arial';
}
.menu ul {
list-style: none;
position: relative;
}
.menu ul li {
width: 150px;
float: left;
}
.menu a {
padding: 15px;
display: block;
text-decoration: none;
text-align: center;
background-color: #c9c9c9;
color: #fff;
}
.menu a:hover {
background: #f4f4f4;
color: #555;
}
label[for="bt_menu"] {
padding: 5px;
background-color: #a3a3a3;
color: #fff;
font-family: 'Arial';
text-align: center;
font-size: 30px;
cursor: pointer;
width: 50px;
height: 50px;
}
label[for="bt_menu"] {
display: none;
}
@media(max-width: 640px) {
label[for="bt_menu"] {
display: block;
}
#bt_menu:checked~.menu {
margin-left: 0;
position: absolute;
visibility: visible;
display: block;
}
.menu ul {
margin: 0px;
padding: 0px;
width: 100%;
position: absolute;
visibility: visible;
}
.menu {
margin-top: 5px;
margin-left: -100%;
transition: all .2s;
}
.menu ul li {
width: 100%;
float: none;
}
.icon {
text-align: center;
background-color: #e0e0e0;
width: 100px;
cursor: pointer;
padding: 7px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
}
}
<input type="checkbox" id="bt_menu">
<label for="bt_menu" class="icon">Menu</label>
<nav class="menu">
<ul>
<li><a href="#" target="frame">Um</a></li>
<li><a href="#" target="frame">Dois</a>
<li><a href="#" target="frame">Tres</a></li>
<li><a href="#" target="frame">Quatro</a></li>
</ul>
</nav>
<iframe src="#" name="frame" frameborder="no" scrolling="no"></iframe>