0

Então eu tenho um pagina e queria fazer um daqueles menus tops que quando clico ele faz aparecer o menu mas não sei como fazer com que a minha div all que inclui quase tudo do html desapareça!

Meu código:

body{
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #252C35;
  color: white;
}

#UpperBar{
  height: 45px;
}

.MASlime{
  position: absolute;
  font-size: 30px;
  top: 1px;
  left: 40px;
}

#Totals{
  position: absolute;
  font-size: 30px;
}

.Total{
  position: absolute;
  top: 80px;
  left: 140px;
}

.TotalEarnings{
  position: absolute;
  top: 80px;
  left: 200px;
}

.TotalO{
  position: absolute;
  top: 150px;
  left: 140px;
}

.TotalOrders{
  position: absolute;
  top: 150px;
  left: 200px;
}

#Earnings{
  position: absolute;
  top: 80px;
  left: 350px;
}

#Orders{
  position: absolute;
  top: 150px;
  left: 350px;
}

.NewOrder{
  position: absolute;
  top: 250px;
  left: 200px;
  font-size: 30px;
}

.OrderName{
  position: absolute;
  top: 350px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.OrderDate{
  position: absolute;
  top: 400px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SKU{
  position: absolute;
  top: 450px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SUBMIT{
  position: absolute;
  top: 500px;
  left: 220px;
  width: 100px;
  height: 40px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.Menu{
  position: absolute;
  top: 25px;
  left: 480px;
  font-size: 30px;
  cursor: pointer;
}

.menu{
  text-align: center;
  width: 100%;
  display: none;
}

.menu a{
  display: block;
  border-bottom: 1px solid #EAEAED;
  text-decoration: none;
  color: white;
  margin-top: 70px;
  padding-bottom: 10px;
  font-size: 30px;
  background: #252C35;
}

.All{
  display: block;
}

#toggle{
  display: none;
}

#toggle:checked + .menu{
  display: block;
}

#toggle:checked ~ .All{
  display: none;
}
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>EComerce App Slime</title>
        <link rel="stylesheet" href="css/index.css">
      </head>
      <body>
        <div id="menu">
          <label for="toggle" class="Menu">&#9776;</label>
          <input type="checkbox" id="toggle"/>
          <div class="menu">
              <a href="#">Slime Recipe</a>
          </div>
        </div>
        <div id="UpperBar">
          <p class="MASlime">MASlime</p>
        </div>
        <div class="All">
          <div id="HomePage">
            <div id="Totals">
              <p class="Total">Total</p>
              <p class="TotalEarnings">Earnings</p>
              <p class="TotalO">Total</p>
              <p class="TotalOrders">Orders</p>
              <p id="Earnings">100€</p>
              <p id="Orders">1</p>
            </div>
            <div id="NewOrder">
              <p class="NewOrder">New Order</p>
              <form id="OrderForm">
                <input class="OrderName" type="text" name="OrderName" placeholder="Buyer Name" required>
                <input class="OrderDate" type="text" name="OrderDate" placeholder="Date of Order" required>
                <input class="SKU" type="text" name="ProductSKU" placeholder="Product SKU" required>
                <input class="SUBMIT" type="button" name="Submit" value="SUBMIT">
              </form>
            </div>
        </div>
        <script src="js/index.js"></script>
      </body>
    </html>

Print do problema:

inserir a descrição da imagem aqui

4
  • 1
    Mas não seria estranho este comportamento, o conteúdo do site desaparecer ao se clicar no menu?
    – LeAndrade
    Commented 16/02/2019 às 21:38
  • @LeAndrade Meu objetivo e que o website desapareça de forma a so ficar o menu a vista !
    – user132381
    Commented 16/02/2019 às 21:55
  • O que normalmente se faz nesses menus eh um backdrop, ou seja, quando o menu abre por trás dele vc da display block em uma div que vai encobrir tudo que estiver por tras, não necessariamente vc precisa "apagar" a pagina, apenas colocar algo por cima dela resolve
    – hugocsl
    Commented 16/02/2019 às 22:05
  • @hugocsl Poderia demonstrar como eu poderia fazer isso no meu html?
    – user132381
    Commented 16/02/2019 às 22:17

3 Respostas 3

1

No seu HTML:

<input type="checkbox" id="toggle"/>

Altera para:

<input type="checkbox" id="toggle" onclick="meuMenuToggle()"/>

E no HTML

<div class="All">

Altera para:

<div class="All" id="divAll">

E insere o código do javascript abaixo do seu conteúdo HTML antes de < /body >

<script>
function meuMenuToggle() {
  var x = document.getElementById("divAll");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

Assim quando você clicar no menu, o conteúdo será oculto, e ao clicar no menu para fechar, o conteúdo será descoberto.

Entendendo: a função javascript meuMenuToggle(); verifica se não existe e é verdadeiro o estilo display='none'; se é TRUE, a função insere o estilo na DIV que foi identificada na variável 'x' através do ID do elemento pego ("divAll"), na alteração sugerida acima (< div class='All' id='divAll' >).

O evento de abrir o mouse alterna a DIV para display none, e alterna para display block quando clica novamente no menu.

4
  • @DeadSec obrigado!
    – ElvisP
    Commented 16/02/2019 às 22:21
  • Poderia dar +1 na publicação ! Pelos vistos fui ban do stack até cnseguir melhor pontoação nas publicações!
    – user132381
    Commented 17/02/2019 às 10:08
  • @DeadSec não posso votar na minha resposta, lamento!
    – ElvisP
    Commented 17/02/2019 às 10:23
  • Estou dizendo na minha publicação! Mas no caso de não conseguir obrigado na mesma pela ajuda!
    – user132381
    Commented 17/02/2019 às 10:25
0

Segue a opção apenas como CSS como vc queria.

inserir a descrição da imagem aqui

Eu fiz como comentei, coloquei uma div a mais que fica oculta, chamei ela de .backdrop, assim quando a label ativa o checkbox eu mostro essa div e ela encobre todo o conteúdo que vem abaixo, dando a impressão que ele sumiu.

    body {
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
      background: #252C35;
      color: white;
    }

    #UpperBar {
      height: 45px;
      top: 1px;
      left: 40px;
      position: absolute;
      z-index: 2;
    }

    .MASlime {
      position: absolute;
      font-size: 30px;
    }

    #Totals {
      position: absolute;
      font-size: 30px;
    }

    .Total {
      position: absolute;
      top: 80px;
      left: 140px;
    }

    .TotalEarnings {
      position: absolute;
      top: 80px;
      left: 200px;
    }

    .TotalO {
      position: absolute;
      top: 150px;
      left: 140px;
    }

    .TotalOrders {
      position: absolute;
      top: 150px;
      left: 200px;
    }

    #Earnings {
      position: absolute;
      top: 80px;
      left: 350px;
    }

    #Orders {
      position: absolute;
      top: 150px;
      left: 350px;
    }

    .NewOrder {
      position: absolute;
      top: 250px;
      left: 200px;
      font-size: 30px;
    }

    .OrderName {
      position: absolute;
      top: 350px;
      left: 140px;
      width: 250px;
      height: 25px;
      background-color: #252C35;
      color: white;
      border: 1px;
      border-style: solid;
      border-radius: 5px;
      border-color: white;
      padding: 5px;
    }

    .OrderDate {
      position: absolute;
      top: 400px;
      left: 140px;
      width: 250px;
      height: 25px;
      background-color: #252C35;
      color: white;
      border: 1px;
      border-style: solid;
      border-radius: 5px;
      border-color: white;
      padding: 5px;
    }

    .SKU {
      position: absolute;
      top: 450px;
      left: 140px;
      width: 250px;
      height: 25px;
      background-color: #252C35;
      color: white;
      border: 1px;
      border-style: solid;
      border-radius: 5px;
      border-color: white;
      padding: 5px;
    }

    .SUBMIT {
      position: absolute;
      top: 500px;
      left: 220px;
      width: 100px;
      height: 40px;
      background-color: #252C35;
      color: white;
      border: 1px;
      border-style: solid;
      border-radius: 5px;
      border-color: white;
      padding: 5px;
    }

    .Menu {
      position: absolute;
      top: 25px;
      left: 480px;
      font-size: 30px;
      cursor: pointer;
      z-index: 3;
    }

    .menu {
      text-align: center;
      width: 100%;
      display: none;
    }

    .menu a {
      display: block;
      border-bottom: 1px solid #EAEAED;
      text-decoration: none;
      color: white;
      margin-top: 70px;
      padding-bottom: 10px;
      font-size: 30px;
      background: #252C35;

      z-index: 3;
      position: relative;
    }

    .All {
      display: block;
    }

    #toggle {
      display: none;
    }

    #toggle:checked+.menu,
    #toggle:checked~.backdrop {
      display: block;
    }

    #toggle:checked~.All {
      /* display: none; */
    }

    .backdrop {
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: #252C35;
      top: 0;
      left: 0;
      z-index: 1;
      display: none;
    }

    #menu {
      /* position: relative; */
      z-index: 2
    }
<div id="menu">
    <label for="toggle" class="Menu">&#9776;</label>
    <input type="checkbox" id="toggle" />
    <div class="menu">
        <a href="#">Slime Recipe</a>
    </div>
    <div class="backdrop"></div>
</div>
<div id="UpperBar">
    <p class="MASlime">MASlime</p>
</div>
<div class="All">
    <div id="HomePage">
        <div id="Totals">
            <p class="Total">Total</p>
            <p class="TotalEarnings">Earnings</p>
            <p class="TotalO">Total</p>
            <p class="TotalOrders">Orders</p>
            <p id="Earnings">100€</p>
            <p id="Orders">1</p>
        </div>
        <div id="NewOrder">
            <p class="NewOrder">New Order</p>
            <form id="OrderForm">
                <input class="OrderName" type="text" name="OrderName" placeholder="Buyer Name" required>
                <input class="OrderDate" type="text" name="OrderDate" placeholder="Date of Order" required>
                <input class="SKU" type="text" name="ProductSKU" placeholder="Product SKU" required>
                <input class="SUBMIT" type="button" name="Submit" value="SUBMIT">
            </form>
        </div>
    </div>
</div>

3
  • Acabei por resolver com js mas obrigado na mesma!
    – user132381
    Commented 16/02/2019 às 23:18
  • @DeadSec sem problemas, aproveite para estudar o código depois para endenter o que foi feito, vai te ajudar em outras ocasiões e sem precisar de JS, to vendo uma resposta aqui pra sua outra pergunta ;)
    – hugocsl
    Commented 16/02/2019 às 23:20
  • Poderia dar +1 na publicação ! Pelos vistos fui ban do stack até cnseguir melhor pontoação nas publicações!
    – user132381
    Commented 17/02/2019 às 10:09
-1

 var display = document.getElementById("aqui vai o id da div").style.display;
        if(display == "none")
            document.getElementById("aqui vai o id da div").style.display = 'block';
        else
            document.getElementById("aqui vai o id da div").style.display = 'none';

6
  • O que isso faz? Como aplicar no código do colega? Só um Ctrl+V aqui não vai solucionar o problema do colega...
    – LipESprY
    Commented 16/02/2019 às 21:34
  • Poderia explicar como eu posso aplicar esse codigo no meu para resolver o meu problema?
    – user132381
    Commented 16/02/2019 às 21:35
  • observa esse codigo ai que vc consegue arrumar no seu codigo, vc consegue Commented 16/02/2019 às 21:39
  • Creio não precisar o uso de Javascript para isto, tanto é que na pergunta não tem a tag Javascript, apenas Html e Css!!
    – LeAndrade
    Commented 16/02/2019 às 21:41
  • se é só html e css a resposta está nesse link: stackoverflow.com/questions/6019845/… Commented 16/02/2019 às 21:47

Você deve fazer log-in para responder a esta pergunta.