Hamburger menu per mobile

main
Antonio De Lucreziis 3 years ago
parent aca7ddec4c
commit a737a3eab1

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sito Susanna</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="../style.css">
</head>
@ -15,7 +16,9 @@
<header>
<nav>
<div class="nav-item" id="mobile-nav-menu">
Bla bla bla
<span class="material-icons">
more_vert
</span>
</div>
<div class="nav-item">
<a href="..">Home</a>
@ -54,6 +57,7 @@
Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
</div>
</footer>
<script src="../nav.js"></script>
</body>
</html>

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sito Susanna</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="../style.css">
</head>
@ -15,7 +16,9 @@
<header>
<nav>
<div class="nav-item" id="mobile-nav-menu">
Bla bla bla
<span class="material-icons">
more_vert
</span>
</div>
<div class="nav-item">
<a href="..">Home</a>
@ -44,6 +47,7 @@
Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
</div>
</footer>
<script src="../nav.js"></script>
</body>
</html>

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sito Susanna</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="../style.css">
</head>
@ -15,7 +16,9 @@
<header>
<nav>
<div class="nav-item" id="mobile-nav-menu">
Bla bla bla
<span class="material-icons">
more_vert
</span>
</div>
<div class="nav-item">
<a href="..">Home</a>
@ -44,6 +47,7 @@
Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
</div>
</footer>
<script src="../nav.js"></script>
</body>
</html>

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sito Susanna</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
@ -15,7 +16,9 @@
<header>
<nav>
<div class="nav-item" id="mobile-nav-menu">
Bla bla bla
<span class="material-icons">
more_vert
</span>
</div>
<div class="nav-item current">
<a href="#">Home</a>
@ -134,6 +137,8 @@
Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
</div>
</footer>
<script src="./nav.js"></script>
</body>
</html>

@ -0,0 +1,11 @@
const $mobileMenuButton = document.querySelector('#mobile-nav-menu');
$mobileMenuButton.addEventListener('click', () => {
$mobileMenuButton.classList.toggle('openned');
});

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sito Susanna</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="../style.css">
</head>
@ -15,7 +16,9 @@
<header>
<nav>
<div class="nav-item" id="mobile-nav-menu">
Bla bla bla
<span class="material-icons">
more_vert
</span>
</div>
<div class="nav-item">
<a href="..">Home</a>
@ -44,6 +47,7 @@
Lucreziis</a> e <a href="https://poisson.phc.dm.unipi.it/~baldino/">Francesco Baldino</a>
</div>
</footer>
<script src="../nav.js"></script>
</body>
</html>

@ -196,20 +196,32 @@ h1, h2, h3, h4 {
/* Mobile */
@media screen and (min-width: 513px) {
#mobile-nav-menu {
display: none;
}
}
@media screen and (max-width: 512px) {
header {
padding: 0;
height: unset;
}
header h1 {
padding-left: 1rem;
}
nav {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
/* position: absolute;
top: 0; */
z-index: 1;
background: var(--color-4);
}
nav .nav-item, nav .nav-item.current {
@ -222,5 +234,10 @@ h1, h2, h3, h4 {
#mobile-nav-menu {
display: flex;
justify-content: flex-start;
}
#mobile-nav-menu:not(.openned) ~ .nav-item {
display: none;
}
}
Loading…
Cancel
Save