Salve, sono nuovo nel mondo dell'HTML e stavo cercando di fare un piccolo sito web (per il momento personale). L'ho provvisto di un menu hamburger per quando va in modalità mobile diciamo.
Il funzionamento è il seguente:
Quando la finestra viene rimpicciolita sotto i 768px allora la barra di navigazione sparisce, e viene ridimensionata a forma di hamburger su lato destro, e viene traslata FUORI dalla visuale, per poi traslare nuovamente all'interno della visuale con la pressione di un tasto, (questa parte fatta con due o tre righe di java script).
Il problema è questo: io ho messo il comando "overflow-x:hidden" nel body (in css) in modo tale che quando il menu è traslato fuori dallo schermo dovrebbe essere nascosto, ed in effetti funziona su PC ma non su cellulare, infatti dal cellulare se si scrolla verso desta si può vedere il menu che dovrebbe essere nascosto (quindi non si dovrebbe proprio poter traslare).
Funzionamento su PC (in modalità mobile), non compaiono le scrollbars:
Funzionamento su cellulare vero (possibilità di scrollare):
Codice html:
<body>
<nav>
<ul class="nav-links">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<div class="burger">
<div class="top-line"></div>
<div class="bottom-line"></div>
</div>
</nav>
<main>
...
</main>
<script src="app.js"></script>
</body>
Codice CSS:
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
nav
{
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(to right, rgba(76, 181, 230, 0.5), rgba(45, 76, 214, 0.5));
min-height: 8vh;
width: 100%;
}
nav li
{
list-style: none;
}
.nav-links
{
display: flex;
justify-content: space-around;
width: 50%;
transition: 0.2s width;
}
.nav-links a
{
color: white;
font-weight: 600;
text-decoration: none;
filter: drop-shadow(0px 0px 4px #00000017)
}
.burger
{
cursor: pointer;
margin-left:auto;
margin-right:20px;
display: none;
}
.burger div
{
width: 25px;
height: 1.5px;
margin: 8px;
background-color: white;
transition: all 0.2s ease;
}
body
{
font-family: 'Montserrat', sans-serif;
background: white;
background-image: url("/Grafica/SVG/bg.svg");
background-repeat: no-repeat;
background-size: cover;
background-position: 0%;
background-attachment: fixed;
}
@media screen and (max-width:1024px)
{
.nav-links
{
width: 70%;
}
}
@media screen and (max-width:768px)
{
body
{
overflow-x: hidden;
}
.nav-links
{
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-image: linear-gradient(to bottom left, #96A6EB, rgb(102, 199, 238));
display: block;
text-align: center;
width: 100%;
transform: translateX(100%);
transition: all 0.3s ease;
}
.nav-links a
{
font-size: 18px;
}
.nav-links a:hover
{
font-size: 24px;
}
.nav-links li
{
margin: 40px;
}
.burger
{
display: block;
}
}
Codice JS:
const navSlide = () => {
const burger = document.querySelector(".burger");
const navlinks = document.querySelector(".nav-links");
burger.addEventListener("click", () => {
navlinks.classList.toggle("nav-active");
//burger animation
burger.classList.toggle("toggle");
});
}
/*window.onscroll = function (event) {
window.scrollTo(0, 0);
}*/
navSlide();