Après plus de 15 ans, j'ai decide de me remettre a jour dans mes notions en HTML et CSS en créant mon site web perso/portfolio en tant que chercheur en biologie.
Je découvre donc toutes les "nouvelles" possibilités et fonctionnalités offertes par HTML et CSS et les nouvelles conditions a prendre en compte (internet mobile et responsive design).
Pour mon site web perso, je souhaite créer un menu responsive (pas sur de la traduction en français) pour Ipad et smartphone. Le menu que j'ai créé en m'aidant de tutoriaux en ligne me convient parfaitement. Il est uniquement en CSS et sans utilisation de javascript.
Un des problèmes que je rencontre actuellement et le fait que le menu ne se ferme pas lorsque je click sur les liens et me retrouve donc avec le menu flottant au dessus de mon site web. Comment puis-je résoudre ce problème?
Voici mon code html et CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="TacoTuesday.css">
<title>FG - lateral menu</title>
</head>
<body>
<header>
<div class="logo">
My logo
</div>
<!-- Burger START -->
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<!-- Burger END -->
<nav>
<ul class="menu">
<li><a href="#Box1">Link 1</a></li>
<li><a href="#Box2">Link 2</a></li>
<li><a href="#Box3">Link 3</a></li>
<li><a href="#Box4">Link 4</a></li>
</ul>
</nav>
</header>
<main>
<div class="Container">
<p>Voluptate deserunt sit sint veniam pariatur fugiat aliqua duis labore consectetur aliqua aute velit.
Do veniam et et labore voluptate fugiat dolore veniam cillum nostrud laborum deserunt.
Et reprehenderit consequat aliqua aliquip qui. Ex laboris quis ex qui enim cupidatat qui.
Ex reprehenderit labore qui pariatur eiusmod magna. Mollit enim labore laboris aliquip minim qui consequat.
</p>
<ul class="ToDo">
<li>Horizontal menu</li>
<li>Horizontal menu covering all page (hide header)</li>
<li>Horizontal menu in one page (no scrolling when mobile menu open)</li>
</ul>
</div>
<div id="Box1">
Box1
</div>
<div id="Box2">
Box2
</div>
<div id="Box3">
Box3
</div>
<div id="Box4">
Box4
</div>
</main>
</body>
</html>
:root {
--header-height: 80px;
}
html {
font-size: 18px;
font-weight: 100;
font-family: Verdana, sans-serif;
overflow-x: hidden; /* To hide the menu on the left, no horizontal scrolling */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.Container {
width: 100%;
height: 200vh;
background-color: darkkhaki;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
header {
display: grid;
grid-auto-flow: column; /* Automatically flow the content into columns */
*grid-auto-columns: max-content; /* Automatically fit the content and not make it wrap if there is more content */
height: var(--header-height);
background-color: #DBCBA8;
}
.logo {
font-size: 40px;
padding-left: 10px;
margin: auto 0px; /* Vertically center */
}
nav {
margin: auto 0px; /* Vertically center menu item */
}
header ul {
display: grid;
grid-auto-flow: column; /* Make appear ul next to each other */
*grid-auto-columns: max-content;
grid-template-rows: 1fr; /* Everything should appear on 1 row */
list-style: none;
border: 1px solid red;
font-size: 24px;
}
header ul li {
text-align: center;
margin: 0 10px;
}
header a {
*display: flex; /* Is it essential? */
*align-items: center; /* Is it essential? */
text-decoration: none;
*background-color: beige;
color: black;
}
/* Hide the check box */
header .menu-btn {
display: none;
}
#Box1 {
background-color: darksalmon;
height: 160px;
}
#Box2 {
background-color: orange;
height: 260px;
}
#Box3 {
background-color: grey;
height: 200px;
}
#Box4 {
background-color: limegreen;
height: 180px;
}
@media screen and (max-width: 768px) {
/* Parameter to prevent scrolling, need to check if it works when menu is closed */
html, body {
*margin: 0;
*height: 100%;
*overflow: hidden;
}
header {
justify-content: space-between; /* Push everything (name and red box burger) to the left and right */
align-items: center;
}
header nav { /* Reposition the nav list */
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 100%;
background-color: rgba(122, 129, 145, 0.7); /* transparent grey background */
/* When activates, it hides the menu but it is not yet responsive */
transition: 0.5s ease-in-out all;
transform: translateX(100%); /* To hide the menu on the left */
}
header ul {
grid-auto-flow: row; /* Reorganization into a single row */
grid-template-columns: 1fr; /* Reorganization into a single row as wide as possible */
*grid-template-rows: none; /* Unset the grid-template-rows from the screen css style */
*grid-auto-rows: max-content;
*gap: 0.5rem;
*padding: 0;
padding-top: var(--header-height);
}
header li {
padding: 30px 0px;
border: 1px solid darkred;
}
/* Style for links */
header a {
padding: 0.5rem 1.5rem;
color: white;
text-transform: uppercase;
font-size: 50px;
}
/* I added it from the working html, check how to adjust it */
header .menu {
clear: both; /* force the menu to return under the logo */
max-height: 0;
transition: max-height .2s ease-out; /* Will allow to create the smooth animation, see .header .menu-btn:checked ~ .menu If not
activated, the menu will simply appear*/
}
/* Creation of the red circle around burger */
header .menu-icon {
border: 2px solid black;
border-radius: 50%;
padding: 28px 20px;
position: relative;
float: right; /* To put the hamburger button on the right */
cursor: pointer;
margin-right: 10px;
z-index: 5; /* Move burger to the front, on the menu, not sure if it will work */
}
/* Creation of a middle bar for hamburger */
header .menu-icon .nav-icon {
background-color: black;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
/* Creation of a top bar for hamburger */
header .menu-icon .nav-icon:before {
content: '';
background-color: black;
display: block;
height: 100%; /* same size as its parent */
width: 100%;
position: absolute;
top: 5px;
transition: all .2s ease-out;
}
/* Creation of a bottom bar for hamburger */
header .menu-icon .nav-icon:after {
content: '';
background-color: black;
display: block;
height: 100%; /* same size as its parent */
width: 100%;
position: absolute;
top: -5px;
transition: all .2s ease-out;
}
/* ANIMATION START*/
/* Create animation when clicking on the button */
header .menu-btn:checked ~ nav { /* ~ is to select the next sibbling, here it will select our menu */
*position: initial; /* Lateral script */
transform: translateX(0); /* Lateral script */
/* ORIGINAL SCRIPT No JAVA */*max-height: 240px; /* Expand the menu */
}
/* Create X animation */
header .menu-btn:checked ~ .menu-icon .nav-icon {
background-color: transparent;
}
header .menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top: 0;
}
header .menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top: 0;
}
/* ANIMATION END */
}
En Javascript, tu n'as besoin que d'une ligne de code pour faire cela.
Salut,
Merci pour ta réponse.
Effectivement je viens de regarder plusieurs videos pour d'autres types de menu "css and html only" et cela ne fait reference que au design du menu en lui même et pas a son fonctionnement. Mauvaise interprétation de ma part donc.
J'avais espéré éviter le javascript comme je n'y connais rien mais comme tu le dis, je ne vais pas pouvoir y échapper.
Je suis curieux de savoir quelle solution tu proposes.
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]
La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]