How to close responsive menu when clicking on an item and changing the iframe in an html file?

Question

How to close responsive menu when clicking on an item and changing the iframe in an html file?

Navigation

#1 by (1 votes)

0

I'm using a index.html file that on a wide screen all the menu items appear, but when being resized to a smaller (max-width: 640px) screen, the menu bar becomes an icon where clicking the menu items on the smaller screen.

My question is: after clicking on an item I would like the smaller screen menu to close and at the same time load an html file into the iframe.

Note: This html file that will be loaded inside the iframe corresponds to the clicked menu item.

Below is the code as an example:

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>

html5 css css3 css-hover

asked by anonymous 19.05.2017 / 16:43

1 answer

What is the "function" in Oracle equivalent to a set generator? Load Json Search in JSP

score 1 · Answer 1

I solved this javascript

function fechar() {

    var inputCheckbox = document.getElementById('bt_menu');

    if (inputCheckbox.checked === true) {
        inputCheckbox.checked = false;
    }

}

Within the <a></a> tags, I inserted the onclick="fechar()" event to call the function.

It worked!