COMMUNITY responsive : add close_menu.png + update menu css

public/opac/css/responsive.css

@@ -7,6 +7,37 @@
     }
 
 
+    div[class*="menu"].show_menu > ul ul,
+    div[class*="menu"].show_menu > ul li {
+	min-width: 0 !important;
+    }
+
+
+    #menu_horizontal a {
+    	background: none !important;
+    }
+
+    
+    div[class*="menu"].show_menu > ul li {
+	margin: auto !important
+    }
+
+
+    div[class*="menu"] > ul > li {
+	display: block !important;
+	height: auto !important;
+    }
+
+
+    div[class*="menu"] * {
+	display: block !important;
+	left: auto !important;
+	top: auto !important;
+	right: auto !important;
+	min-height: none !important;
+    }
+
+
     #site_web_content {
 	margin: 0 !important;
     }
@@ -164,23 +195,24 @@
 
 
     .titre {
-	height: auto !important;
-	max-height: none !important;
-	min-height: none !important;
+	height: auto;
+	max-height: none;
+	min-height: none;
     }
 
 
     /** MENU **/
+    div:not(.show_menu)[class*="menu"],
     #menu_horizontal {
-	background: none !important;
-	height: auto !important;
-	padding: 0 !important;
-	margin: 0 !important;
+	background: none;
+	height: auto;
+	padding: 0;
+	margin: 0;
     }
 
     
     div[class*="menu"] * {
-	transition: none !important;
+	transition: none;
     }
 
 
@@ -194,43 +226,50 @@
 
 
     div[class*="menu"] > ul {
-	display: block !important;
+	display: block;
 	position: absolute;
-	height: 0 !important;
+	height: 0;
 	visibility: hidden;
     }
 
 
+    #menu_horizontal > ul > li,
     div[class*="menu"] > ul > li {
-
+	float: left;
+	width: auto;
     }
 
 
     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;
+    div[class*="menu"].show_menu > ul li,
+    #menu_horizontal ul li ul,
+    #menu_horizontal ul li ul li {
+	display: block;
+	position: relative;
+	min-width: auto;
+	width: auto;
 	float: left;
 	clear: both;
 	text-align: left;
-	left: 0 !important;
-	top: 0 !important;
+	left: 0;
+	top: 0;
 	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,
+    #menu_horizontal.show_menu > ul ul,
+    #menu_horizontal.show_menu > ul li,
+    #menu_horizontal.show_menu > ul li a {
+	background: none;	
+	color: #fff;
+	height: auto;
     }
 
     
-    div[class*="menu"].show_menu > ul li a {
+    div[class*="menu"].show_menu > ul li {
 	line-height: 2em;
     }
 
@@ -240,54 +279,59 @@
     }
 
 
-    div[class*="menu"].show_menu > ul {
+    div[class*="menu"].show_menu > ul,
+    #menu_horizontal.show_menu > ul{
 	visibility: visible;
 	width: auto;
-	height: auto !important;
+	height: auto;
 	font-size: 1.5em;
-	background: #2179FF url(../images/buttons/menu.png) no-repeat top left;
-	padding: 50px 10px !important;
+	background: #333;
+	padding: 0 10px;
+	margin: 3em 0 0 0;
 	left: 0;
-	z-index: 101 !important;
+	z-index: 101;
     }
 
 
-    div[class*="menu"] .selected_profil {
+    div[class*="menu"] li li.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;
+    div:not(.show_menu)[class*="menu"] li li.selected_profil,
+    #menu_horizontal:not(.show_menu) li li.selected_profil{
+	background-color: #333;
 	float: left;
+	line-height: 5em;
+	margin: 0 0 0 5.1em;
+	padding: 0 0.5em;
     }
 
 
-    /* div[class*="menu"].show_menu > ul * { */
-    /* 	display: block; */
-    /* 	clear: both; */
-    /* 	position: relative; */
-    /* 	float: none; */
-    /* } */
-    
+    div[class*="menu"].show_menu li li.selected_profil {
+	border-left: 5px solid #00C000;
+	margin-left: -5px:
+    }
+
 
     div:not(.boite)[class*="menu"]:after {
 	content: '';
-	height:50px;
-	width: 50px;
-	background: url(../images/buttons/menu.png) no-repeat center center;
+	height: 5em;
+	width: 5em;
+	background: #333 url(../images/buttons/menu.png) no-repeat center center;
 	float: left;
 	cursor: pointer;
     }
 
 
+    div:not(.boite)[class*="menu"].show_menu:after {
+	background: #333 url(../images/buttons/close_menu.png) no-repeat center center;
+    }
+
+
     #menu_horizontal ul li ul {
-    
+	
+    }
     
     /** WIDGET **/
 

public/opac/js/responsive.js

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

public/opac/skins/modele/css/global.css

@@ -146,8 +146,6 @@ a:hover {color:#D44100;}
 		font-size:1.2em;
 		font-decoration:none;
 		font-weight:normal;
-		height:15px;
-		max-height:15px;
 		padding: 2px 0px 2px 5px;}