menu deroulant ok

srcs/plugins/map_prof/scripts/mp_create_filters.js

@@ -37,13 +37,25 @@ function fill_filters(filters_div) {
 	 */
 
 	let content = "";
-	for (key in filters) {
-		if (! filters.hasOwnProperty(key))
-			continue;
-		content += '<div class="filter_menu">';
-		content += key;
-		content += '</div>';
-	}
+	let keys = Object.keys(filters);
+	keys.forEach((key) => {
+		content += `
+			<div class="filter_menu">
+				<div class="filter_menu_title">
+					<p>${key}</p>
+				</div>
+				<div class="filter_menu_drop">
+		`;
+		for (value of filters[key]) {
+			content += `
+					<p>${value._name}</p>
+			`;
+		}
+		content += `
+				</div>
+			</div>
+		`;
+	});
 
 	filters_div.innerHTML = content;
 }

srcs/plugins/map_prof/styles/mp_filters.css

@@ -6,15 +6,53 @@
 
 #ljdp_map_filters {
 	display: flex;
+	flex-direction: row;
+	position: relative;
 	border: 1px solid red;
 	width: 100%;
-}   
+	z-index: 1;
+}
 
-#ljdp_map_filters > .filter_menu {
+#ljdp_map_filters .filter_menu {
 	display: flex;
+	flex-direction: column;
+	position: relative;
+	margin: auto;
+	width: 100%;
+	border: 1px solid blue;
+}
+
+#ljdp_map_filters .filter_menu:hover .filter_menu_drop {
+	display: flex;
+}
+
+#ljdp_map_filters .filter_menu .filter_menu_title {
+	display: flex;
+	position: relative;
 	margin: auto;
 	width: auto;
-	border: 1px solid blue;
-}   
+	border: 1px solid green;
+}
 
+#ljdp_map_filters .filter_menu .filter_menu_drop {
+	display: none;
+	flex-direction: column;
+	position: absolute;
+	top: 100%;
+	left: 0px;
+	margin: auto;
+	padding: 10px 0px;
+	width: 100%;
+	max-height: 400px;
+	overflow-y: scroll;
+	background-color: white;
+	border: 1px solid pink;
+}
+
+#ljdp_map_filters .filter_menu .filter_menu_drop p {
+	display: flex;
+	position: relative;
+	margin: 0px auto 0px 0px;
+	padding: 0px 10px;
+}