Qualche dubbio su CSS-GRID

**Frenzarectah** · 07-09-2020, 11:22

Ciao a tutti,
anzitutto mi presento, sono un abituale visitatore di html.it ma nuovo qui sul forum,
sono francesco ho 32 anni e sono un perito informatico col pallino dell web developing.
Avendo iniziato ben piu di 10 anni fa, mi ci sono rituffato solo nell'ultimo periodo e ovviamente quasi tutto quello che conoscevo è diventato quasi obsoleto

.
Uno fra tutti il layouting di un sito internet, all'epoca ero un utilizzatore delle tabelle, adesso ho scoperto un mondo chiamato css-grid.
Un pò piu facile da rendere responsive e con tante feature interessanti.
Arrivo al punto, ho provato a creare un layout semplice, cerco di "disegnarvelo":

|header | header |
| main | main |
|footer |footer |

una volta impostato, ho provato a sostituire uno degli |header| con un |menu| tramite un toggleClass (associato ad un evento onclick) che imposta la classe col layout che cambia solo la prima riga in questo modo:
| header | menu |

Il tutto sembra funzionare, senonchè quando switcho da un layout all'altro l'area menu mi compare alla fine della pagina...
Qualcuno sarebbe in grado di spiegarmi per bene come ragiona questa tecnologia in questi casi?
Mi aspetterei che se un area particolare non è presente nel grid-template non dovrebbe essere proprio visualizzata o sbaglio?
Spero di essere stato chiaro e vi ringrazio se vorrete darmi qualche risposta.
Ciao!

**ninja72** · 07-09-2020, 12:09

Ciao, forse dipende dal fatto che menu non sia in postition:absolute, è possibile vedere il codice in questione ?

**Frenzarectah** · 07-09-2020, 12:31

Originariamente inviata da ninja72

Ciao, forse dipende dal fatto che menu non sia in postition:absolute, è possibile vedere il codice in questione ?

ciao!
la classe menu ho già provato a settarla in absolute ma così facendo appare a prescindere dal click :\
ti passo il codice dell'intera pagina

[*URL]https://pastebin.pl/view/9bdb9711[/URL]

mentre la pagina in sè: https://stdiofrenz.altervista.org/grid_prova.html

grazie mille!

**Vincent.Zeno** · 07-09-2020, 12:37

Originariamente inviata da Frenzarectah

[*URL]https://pastebin.pl/view/9bdb9711[/URL]

ciao,

il mio malwarebyte si irrita tentando di accedere a quell'indirizzo.
posta il codice su forum o scegli un altro repositorio

**Frenzarectah** · 07-09-2020, 14:00

Originariamente inviata da Vincent.Zeno

ciao,

il mio malwarebyte si irrita tentando di accedere a quell'indirizzo.
posta il codice su forum o scegli un altro repositorio

Ciao, ti posto l'intero codice della pagina.

codice:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>stdiofrenz - il web a portata di mano</title>
<meta name="description" content="">
<meta name="author" content="Frenz">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300italic,300,100italic,100,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="//im.altervista.org/site_index/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
.box-container{
    border:1px black solid;
    display: grid;
    grid-template-areas: "header ."
                         "main main"
                        "footer footer";
    grid-template-rows:300px 500px 90px;
    grid-template-columns: 100%;
    grid-gap:5px;
}
.box-container1{
    border:1px blue solid;
    display: grid;
    grid-template-areas:"header menuzzo"
                        "main main"
                        "footer footer";
    grid-template-rows:300px 500px 90px;
    grid-template-columns: 92% 8%;
    grid-gap:5px;
}
.head{
grid-area: header;
border:1px yellow solid;
margin: 2px;
background-image:url("/image/head.jpeg");
background-size: cover;
color: white; 
}
.menu{
grid-area: menuzzo;
opacity:1;
z-index: 100;
border:1px blue solid;
background-color: blue;
}
.corpo{
grid-area: main;
border:1px red solid; 
}
.foot{
grid-area: footer;
border:1px green solid;
}
#button-menu{
position:relative;
top:-80px;
width:20px;
height:20px;
float:right;
}
#logo{
margin: auto;
width:30%;
position: relative;
top:20%;
right:33%;
left:33%;
}

#logs{
 margin:auto;
 position: relative;
 top: 30%;
}
@media only screen and (max-width:870px){
img#logo{
position: relative;
left:35%;
right:35%;
}
.box-container{
grid-template-rows:100px;
grid-gap:2px;
}
#button-menu{
position:relative;
top:-30px;
width:20px;
height:20px;
float:right;
}
/*div#menu-mobile{
float:right;
width:20px;
height:20px;
display:block;
}*/
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function(){
$("#logo").hide();
$("#logo").fadeIn(2000); //logo che appare
$("#button-menu").click(function(){
$(".menu").css("display","none");
$("body").toggleClass("box-container1");
$(".menu").toggle("slow");
//$(".menu").animate({opacity: "1"},"slow");
});
});
</script>
</head>
<body class="box-container">
   <div class="head">header
      <div id="logs">
         <img id="logo" src="/image/log.png">
         <img id="button-menu" src="http://stdiofrenz.altervista.org/image/menu.png">
      </div>
   </div>
   <div class="menu">menuz</div>
   <div class="corpo">body</div>
   <div class="foot">futer</div>
</body>
</html>

grazie!

**ninja72** · 07-09-2020, 14:30

Fondamentalmente non sono molto convinto sul fatto di gestire il layout con una griglia css preferisco ancora gestire le varie parti con i contenitori div, ti riporto un'idea molto spartana su come potresti gestire il menu anche se non sono molto convinto del modo operandi.

codice:

<!DOCTYPE html>
<html lang="it">

<head>
   <meta charset="utf-8">
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
   <title>stdiofrenz - il web a portata di mano</title>
   <meta name="description" content="">
   <meta name="author" content="Frenz">
   <link
      href='https://fonts.googleapis.com/css?family=Lato:400,300italic,300,100italic,100,400italic,700,700italic,900,900italic'
      rel='stylesheet' type='text/css'>
   <!--[if lt IE 9]>
<script src="//im.altervista.org/site_index/html5shiv.js"></script>
<![endif]-->
   <style type="text/css">
      html, body {
         margin: 0;
         padding: 0;
      }

      .box-container {
         width: 100%;
         height: 100vh;
         display: grid;
         grid-template-areas: "header menu"
            "main menu"
            "footer menu";
         grid-template-rows: 300px auto 90px;
         grid-template-columns: 100%;
         grid-gap: 0;
         column-gap: 0;
      }

      .head {
         border-bottom: 1px solid black;
         grid-area: header;
         background-image: url("http://stdiofrenz.altervista.org/image/head.jpeg");
         background-size: cover;
         color: white;
      }

      .menu {
         position: absolute;
         height:100vh;
         right: 15px;
         width: 150px;
         display: none;
         grid-area: menu;
         opacity: 1;
         z-index: 100;
         background-color: rgba(0,0,0, .5);
      }

      .corpo {
         grid-area: main;
      }

      .foot {
         grid-area: footer;
         background-color: gray;
      }

      #button-menu {
         position: relative;
         top: -80px;
         width: 20px;
         height: 20px;
         float: right;
      }

      #logo {
         margin: auto;
         width: 30%;
         position: relative;
         top: 20%;
         right: 33%;
         left: 33%;
      }

      #logs {
         margin: auto;
         position: relative;
         top: 30%;
      }

   </style>
   <script src="https://code.jquery.com/jquery-3.5.0.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(document).ready(function () {
         $("#logo").hide();
         $("#logo").fadeIn(2000); //logo che appare
         $("#button-menu").click(function () {
            $(".menu").toggle("slow");
         });
      });
   </script>
</head>

<body class="box-container">
   <div class="menu">
      menuz
   </div>
   <div class="head">header
      <div id="logs">
         <img id="logo" src="http://stdiofrenz.altervista.org/image/log.png">
         <img id="button-menu" src="http://stdiofrenz.altervista.org/image/menu.png">
      </div>
   </div>
   <div class="corpo">body</div>
   <div class="foot">footer</div>
</body>

</html>

**Frenzarectah** · 07-09-2020, 15:41

grazie per le risposte ninja72, questa soluzione è funzionante, ma l'avevo già provata prima di sperimentare le grid, di fatto, in questo caso non vengono utilizzate neanche, è un semplice div in posizione assoluta che viene reso visibile dal click.
Adesso mi sta venendo un dubbio però, se è così semplice fare una cosa coi div piuttosto che css-grid, conviene davvero implementarlo come sistema di layouting?
Come ho già scritto, sto cercando di barcamenarmi nel fare web 2.0...
lasciando stare i vari CMS, per uno a cui piace crearli da artigiano, consigliate quindi l'approccio div + positioning del caso?

**ninja72** · 07-09-2020, 18:19

Il discorso è che nel tuo caso il layout è molto semplice/spartano dunquè non ha molto senso utilizzare le potenzialità della griglia css. Sul web recentemente lo consigliano ed è compatibile con la maggior parte dei browser anche quelli mobile, forse è ora di aggiornarsi, parlo per me ovviamente

Discussione: Qualche dubbio su CSS-GRID

Strumenti discussione

Ricerca discussione

Visualizza

Qualche dubbio su CSS-GRID

Permessi di invio