COMMUNITY responsive : add responsive.js for menu click event + update css

application/modules/opac/views/scripts/head.phtml

@@ -71,7 +71,7 @@
 																																 'media' => 'all']);
 
 	if($current_profil->isResponsive())
-		$head_scripts->addOpacStyleSheet('responsive');
+		$head_scripts->addOpacStyleSheet('responsive')->addOpacScript('responsive');
 
 	if ($this->accessibilite_on) {
 		//Feuilles de styles pour les déficiences visuelles

public/opac/css/responsive.css

 @media screen and (max-device-width: 1024px) {
 
     /** FORCED RULES **/
+    #banniere,
+    #header {
+	height: auto !important;
+    }
 
 
     #site_web_content {
@@ -34,6 +38,7 @@
     .siteWeb,
     .footer,
     #site_web_content,
+    #site_web_content > :not(.menu_horizontal),
     #site_web_wrapper,
     .layout-division ,
     #col_wrapper .boite > * {
@@ -145,9 +150,145 @@
     }
 
 
+    #site_web_content > * {
+	float: left;
+    }
+
+
+    .back_to_phone {
+	right: 0;
+	width: auto;
+	padding: 5px;
+	z-index: 1;
+    }
+
+
+    .titre {
+	height: auto !important;
+	max-height: none !important;
+	min-height: none !important;
+    }
+
+
     /** MENU **/
+    #menu_horizontal {
+	background: none !important;
+	height: auto !important;
+	padding: 0 !important;
+	margin: 0 !important;
+    }
+
+    
+    div[class*="menu"] * {
+	transition: none !important;
+    }
+
+
+    div[class*="menu"] > ul {
+    }
+
+
+    div[class*="menu"] > ul > li > a {
+	text-transform: uppercase;
+    }
+
+
+    div[class*="menu"] > ul {
+	display: block !important;
+	position: absolute;
+	height: 0 !important;
+	visibility: hidden;
+    }
+
+
+    div[class*="menu"] > ul > li {
+
+    }
+
+
+    div[class*="menu"].show_menu > ul ul,
+    div[class*="menu"].show_menu > ul li {
+	display: block !important;
+	position: relative !important;
+	min-width: auto !important;
+	width: auto !important;
+	float: left;
+	clear: both;
+	text-align: left;
+	left: 0 !important;
+	top: 0 !important;
+	border: none;
+    }
+
+
+    div[class*="menu"].show_menu > ul ul,
+    div[class*="menu"].show_menu > ul li,
+    div[class*="menu"].show_menu > ul li a {
+	background: none !important;	
+	color: #fff !important;
+	height: auto !important;
+    }
+
+    
+    div[class*="menu"].show_menu > ul li a {
+	line-height: 2em;
+    }
+
+
+    #menu_horizontal ul li ul {
+	border: none;
+    }
+
+
+    div[class*="menu"].show_menu > ul {
+	visibility: visible;
+	width: auto;
+	height: auto !important;
+	font-size: 1.5em;
+	background: #2179FF url(../images/buttons/menu.png) no-repeat top left;
+	padding: 50px 10px !important;
+	left: 0;
+	z-index: 101 !important;
+    }
 
 
+    div[class*="menu"] .selected_profil {
+	visibility: visible;
+    }
+
+
+    div:not(.show_menu)[class*="menu"] .selected_profil a {
+	background-color: #2179FF;
+	text-transform: uppercase;
+	line-height: 50px;
+	margin-left: 50px !important;
+	font-size: 1.5em;
+	padding: 0 10px !important;
+	float: left;
+    }
+
+
+    /* div[class*="menu"].show_menu > ul * { */
+    /* 	display: block; */
+    /* 	clear: both; */
+    /* 	position: relative; */
+    /* 	float: none; */
+    /* } */
+    
+
+    div:not(.boite)[class*="menu"]:after {
+	content: '';
+	height:50px;
+	width: 50px;
+	background: url(../images/buttons/menu.png) no-repeat center center;
+	float: left;
+	cursor: pointer;
+    }
+
+
+    #menu_horizontal ul li ul {
+    
+    
     /** WIDGET **/
 
     #col_wrapper .boite {
@@ -197,9 +338,9 @@
 
 
     #col_wrapper .boite {
-	width: 98%;
-	max-width: 98%;
-	min-width: 98%;
+	width: 96%;
+	max-width: 96%;
+	min-width: 96%;
 	
     }
 }
\ No newline at end of file

public/opac/js/responsive.js

+$(document).ready(function() {
+  var enableMenuButton = function() {
+    $("div:not(.boite)[class*='menu']").click(function(e) {
+      $(this).toggleClass('show_menu');
+    });
+  }
+  enableMenuButton();
+});