From d52afe5cc37ce1e88772e7cb7a40b54bbbebda83 Mon Sep 17 00:00:00 2001
From: polo <ordipolo@gmx.fr>
Date: Thu, 13 Nov 2025 20:19:48 +0100
Subject: =?UTF-8?q?classe=20CSS=20drop-left=20pour=20ouvrir=20des=20sous-m?=
 =?UTF-8?q?enus=20=C3=A0=20gauche,=20normes=20de=20responsive=20design:=20?=
 =?UTF-8?q?480,=20768=20et=201024px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/nav.css | 85 +++++++++++++++++++++++++++++++-----------------------
 1 file changed, 49 insertions(+), 36 deletions(-)

(limited to 'public/css/nav.css')

diff --git a/public/css/nav.css b/public/css/nav.css
index a9bddf2..4c276be 100644
--- a/public/css/nav.css
+++ b/public/css/nav.css
@@ -1,7 +1,7 @@
 /*-- menu principal --*/
 
 /* version horizontale */
-@media screen and (min-width: 601px){
+@media screen and (min-width: 769px){
 	.nav_button{
 		display: none;
 	}
@@ -32,21 +32,28 @@
 		border-top: 3px solid #13aff0;
 	}
 	/* élément du menu survolé, le positionnement relatif en fait la référence du positionnement suivant */
-	.drop-right .sub-menu
+	.drop-right .sub-menu, .drop-left .sub-menu
 	{
 		position: absolute; /* positionnement par rapport au précédent "position" en CSS */
-		left: 100%;
 		top: -3px; /* la bordure bleue fait 3px */
 	}
+	.drop-right .sub-menu{
+		left: 100%;
+	}
+	.drop-left .sub-menu{
+		right: 100%;
+	}
 	/* 1er sous-menu, poitionnement pour ne pas aggrandir l'élément parent */
-	nav > ul > li > ul
-	{
+	nav > ul > li > ul{
 		position: absolute; /* retire du flux, positionnement par rapport à la fenêtre */
 		margin-top: 5px;
 		margin-left: -5px;
 	}
+	nav > ul > li > ul:has(.drop-left){
+		right: 0;
+	}
 
-	@media screen and (max-width: 1000px){ /* entre 601 et 1000 */
+	@media screen and (max-width: 1024px){ /* entre 769 et 1024 */
 		.nav_main p
 		{
 			font-size: 90%;
@@ -54,33 +61,31 @@
 	}
 	
 	@media (pointer: fine){
-		.nav_main > ul > li:hover
-		{
+		.nav_main > ul > li:hover{
 			background-color: white;
 		}
 		.drop-right > a > p:after{
 			content: " ▶";
 		}
+		.drop-left > a > p:before{
+			content: "◀ ";
+		}
 	}
 }
-@media screen and (max-width: 450px){
+@media screen and (max-width: 480px){
 	.sub-menu p{
 		font-size: 90%;
 	}
 }
 
-@media screen and (min-width: 1000px){
-	nav > ul > li > ul{
-		margin-left: -7px; /* annuler le déplacement dû au padding: 7px; dans ".nav_main li" */
-		margin-top: 7px;
-	}
+@media screen and (min-width: 1025px){
 	.nav_main li{
 		padding: 7px;
 	}
 }
 
 /* version petits écrans */
-@media screen and (max-width: 600px){
+@media screen and (max-width: 768px){
 	#nav_zone{
 		display: flex;
 		flex-direction: column;
@@ -119,31 +124,40 @@
 		padding-left: 25px;
 		padding-right: 5px;
 	}
-
 	/*nav > ul > li > ul{
 		margin-left: 0;
 	}*/
+
 	@media (pointer: fine){
 		.nav_main > ul > li:hover{
 			background-color: yellow;
 		}
-		.drop-right > a > p:after{
+		.drop-right > a > p:after, .drop-left > a > p:after{
 			content: ' ▼';
 		}
 	}
+
+	@media (pointer: coarse){
+		.drop-down.open, .drop-right.open, .drop-left.open{
+			border-radius: 5px;
+		}
+	}
 }
 
 
-.nav_main
-{
+.nav_main{
 	border: 2px solid #13aff0;
 	text-wrap: nowrap;
 }
 .sub-menu{
 	box-shadow: 1px 1px 3px black;
 }
+.sub-menu:has(.drop-left), .sub-menu:has(.drop-left) .sub-menu{
+	box-shadow: -1px 1px 3px black;
+}
 ul{
-	margin: 0;
+	margin-top: 0;
+	margin-bottom: 0;
 }
 
 .nav_main p
@@ -166,15 +180,15 @@ li:not(.current){
 	background-color: initial;
 	font-weight: initial;
 }
+.drop-down.open, .drop-down:hover{
+	position: relative; /* permet d'aligner son enfant en position absolue à droite avec un right: 0; */
+}
 
 
 /* sous-menus avec PC + souris
 mettre ici tous les blocs avec :hover, les navigateurs mobiles "simulent" les :hover, cassant le JS utilisé ici */
-@media (pointer: fine) /* fine => précision de la souris */
-{
-	.drop-down:hover > .sub-menu,
-	.drop-right:hover > .sub-menu
-	{
+@media (pointer: fine){ /* fine => précision de la souris */
+	.drop-down:hover > .sub-menu, .drop-right:hover > .sub-menu, .drop-left:hover > .sub-menu{
 		display: block;
 	}
 	.sub-menu li:hover /* écrase le fond blanc placé en même temps */
@@ -187,7 +201,7 @@ mettre ici tous les blocs avec :hover, les navigateurs mobiles "simulent" les :h
 		content: ' ▼';
 		font-size: x-small;
 	}
-	.drop-right > a > p:after
+	.drop-right > a > p:after, .drop-left > a > p:before
 	{
 		font-size: x-small;
 	}
@@ -203,22 +217,21 @@ mettre ici tous les blocs avec :hover, les navigateurs mobiles "simulent" les :h
 	font-size: x-small;
 	vertical-align: text-bottom;
 }
+.sub-menu{
+	display: none;
+	background-color: white;
+	font-size: 95%;
+}
 
 /* écran tactile */
-@media (pointer: coarse) /* coarse = grossier = précision écran tactile */
-{
+@media (pointer: coarse){ /* coarse = grossier = précision écran tactile */
 	.sub-menu-toggle{
 		display: inline-block; /* visible sur écran tactile */
 	}
-	.drop-down.open > .sub-menu, .drop-right.open > .sub-menu{
+	.drop-down.open > .sub-menu, .drop-right.open > .sub-menu, .drop-left.open > .sub-menu{
 		display: block;
 	}
-	.drop-down.open, .drop-right.open{
+	.drop-down.open, .drop-right.open, .drop-left.open{
 		background-color: yellow;
 	}
-}
-.sub-menu{
-	display: none;
-	background-color: white;
-	font-size: 95%;
-}
+}
\ No newline at end of file
-- 
cgit v1.2.3