Hamburgher menu con codice non funziona con safari 
Author: Federico S.Ho cosrtuito un hamburger menu che si apre a schermo intero ed inserito nel header per smartphone.
Il problema è che con safari non funziona. Praticamente invece di aprirsi a schermo intero Si espande all interno del contenitore dove ho scritto il codice.
Qui la pagina :https://www.mangioacasa.bz.it/texmex/index.php (visibile solo con smartphone)
Con android funziona.
P.s non posso usare il menu di website perche ho la necessità di prelevare le voci in elenco da database
Questo è il codice di esempio che ho usato, che poi ho modicato per inseritlo in php.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide downwards from the top:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>
non puoi inserire quel codice cosi...
devi togliere:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
e tutto quello che hai scritto sopra...
per esempio questo non ci deve essere:
Author
Infatti non l ho inserito cosi, questo è solo il codice di esempio che ho usato.
la mia domanda è perche funziona perfettamente con android invece no con safari?
in particolare non funziona se lo metto nel header, non si espande a tutto schermo ma rimane dentro le dimensioni dell elemento codice.
Ok, avevi scritto sopra:
Questo è il codice di esempio che ho usato,
poi hai messo un link dove però io non vedo quel menu...
Author
è impostato per vedersi a risoluzioni sotto a 480 di x percui con un cellura.
se lo provi con android funziona, invece con iphone no!
Scusa @federico scalzo posso chiederti perchè non lo fai con il progemma ? O ofrse non ho capito io il risultato che vuoi ottenere !!! Se vuoi un hamburger menù che si apra a tutto schermo basta che, nei vari livelli, al passo 3--->modello imposti la larghezza dell'hamburger uguale alla largheza del livello e ti si vede a schermo intero.
Passo2--->Modello--->Contenuto Modello
Author
Perché ne devo fare una trentina di questi menù. E ognuno è diverso con numerose voci. Percui vorrei prendere i dati da un database.
Cmq anche lo schermo pieno non funziona benissimo con il programma perché non si può mettere il 100% ma un numero fisso. Percui per esempio se il livello è 320px ed uno usa un dispositivo a 450px non sarà a pieno schermo.
... ci sono diversi errori nel codice sorgente EXTRA della pagina che potrebbero comprometterne il funzionamento, relativi a impropri tag img, table, font, b, doppio /html, eccetera, da rivedere e riparare con attenzione...
.
Author
Immagino che ci siano questi errori. Però il problema non è quello. Ho provato anche a fare una pagina vuota con solo il codice di sopra e il problema rimane.
Author
Poi se sposto in codice dall header al body allora funziona. Solo che li nasce un'altro problema. Il menù va sotto a tutto e con z-index non riesco a metterlo sopra a tutto. Se nessuno riesce ad avere una soluzione per il primo problema sarebbe utile una soluzione per il secondo.
?
...scusa ma il codice del pulsante non lo hai messo in Oggetto Codice HTML ?
Author
Certo, altrimenti dove potevo metterlo?
... secondo me, il codice originale <div *** *** *** </div> + <script>***</script> ... così come sono, dovresti incollarli nella:
>> sezione Esperto | Codice personalizzato | 6^ opzione - Prima della chiusura del tag BODY
... invece il contenuto del tag <style> puoi lasciarlo in Oggetto Codice HTML, come hai fatto, magari eliminando il body, oppure incollarlo per intero (-body) nella:
>> sezione Esperto | Codice personalizzato | 3^ opzione - Prima della chiusura del tag HEAD
.
come detto già da me e confermato da KolAsim, io eliminerei tutti gli errori prima, visto che male non fà, e poi potrai provare a sistemare il resto...poi fai come credi...
Author
Si ma correggere gli errori non risolvono la questione che ho proposto. Ho già detto che anche se usi solo il codice postato il alto fatto da un sito specializzato il problema rimane.
Author
Trovata soluzione prendendo spunto suggerimento KolAsim :
codice <div *** *** *** </div> in proprità >> sezione Esperto Prima della chiusura del tag BODY
Css in proprità >> sezione Esperto Prima della chiusura del tag HEAD
Oggetto html con pulsante e codice <script>***</script> dentro modello >>contenuto modello >>header.
Grazie