Changeset 73859 in spip-zone for _plugins_/minibando

Timestamp:

Jun 25, 2013, 10:10:34 AM (6 years ago)

Author:

bystrano@…

Message:

ajoute un javascript pour la navigation au clavier + adaptations css

Location:

_plugins_/minibando/trunk

Files:

• formulaires/administration.html (modified) (1 diff)
• spip_admin_perso.css (modified) (2 diffs)

_plugins_/minibando/trunk/formulaires/administration.html

@@ -54 +54 @@
                 <li><a href="[(#SELF|parametre_url{var_mode,inclure})]"><:minibando:mode_inclure:></a></li></ul></li>]
 </ul></div>
+
+<script type="text/javascript">
+  $(function () {
+
+      $('#minibando a')
+          .focusin(function () {
+              $(this).parents('#minibando > li').addClass('afficher');
+          })
+          .focusout(function () {
+              $(this).parents('#minibando > li').removeClass('afficher');
+          });
+
+  });
+</script>

_plugins_/minibando/trunk/spip_admin_perso.css

@@ -12 +12 @@
         font-size: 0px; margin: 2px; border: 1px solid #bdbdbd;
         border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
-#minibando li a:hover,
-#minibando li li a:hover { background-color: white; }
+#minibando li a:hover, #minibando li a:focus,
+#minibando li li a:hover, #minibando li li a:focus { background-color: white; }
+#minibando > li > a:focus { border-color: black; }
+#minibando li a:focus, #minibando li li a:focus { text-decoration: underline; }
 #minibando #bando1_menu_accueil { background: #f8f8f8 url(images/minibando_stripes_optim.png) 50% 0  no-repeat; }
 #minibando #bando1_menu_edition { background: #f8f8f8 url(images/minibando_stripes_optim.png) 50% -168px no-repeat; }
@@ -29 +31 @@
 #minibando li li a { background-image: none; text-indent: 0; width: 190px; height: auto; border: none; text-decoration: none;
         padding: 5px; color: black; margin: 1px; font-size: 12px; }
-#minibando > li > span { height: 6px; width: 100%; display: block; background: url(images/arrow.png) no-repeat top center; display: none; }
-#minibando ul { background-color: #bdbdbd; position: absolute; display: none; right: 2px;
+#minibando > li > span { height: 6px; width: 100%; display: block; background: url(images/arrow.png) no-repeat top center; position: absolute; left: -99999px; }
+#minibando ul { background-color: #bdbdbd; position: absolute; display: block; left: -99999px; right: 99999px;
         border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
-#minibando li:hover ul, #minibando li:hover span { display:  block; }
+#minibando li.afficher ul, #minibando li:hover ul { display: table; left: -174px;; }
+#minibando li.afficher span, #minibando li:hover span { display: block; position: relative; left: 0; right: 2px; }