Menu déroulant en css accessibilité

Support et assistance sur les composants, modules et bots Joomla! 1.0.x de développeurs tiers.

Moderators: Aidan38, sarki

Forum rules
Règles du forum
Locked
User avatar
dec
Joomla! Guru
Joomla! Guru
Posts: 502
Joined: Mon Apr 03, 2006 2:06 pm

Menu déroulant en css accessibilité

Post by dec » Thu Dec 21, 2006 4:05 pm

Pas très claire mon titre...
Bon, la question, quelqu'un connait-il un menu déroulant plus respectueux des standards du web que Lxmenu ?
Parce que quant je vois le pâté de code qu'il rajoute... :'(

User avatar
ouly
Joomla! Ace
Joomla! Ace
Posts: 1074
Joined: Sun Aug 21, 2005 9:18 pm
Contact:

Re: Menu déroulant en css accessibilité

Post by ouly » Thu Dec 21, 2006 7:07 pm

Une piste à creuser éventuellement : http://web.developpez.com/tutoriel/xhtm ... tcss/  ;)

User avatar
dec
Joomla! Guru
Joomla! Guru
Posts: 502
Joined: Mon Apr 03, 2006 2:06 pm

Re: Menu déroulant en css accessibilité

Post by dec » Fri Dec 22, 2006 8:21 am

Bien ton lien Ouly (et en + très joli), mais comment intégrer ceci ds un module de façon à ne pas coder en dur mais à laisser l'opportunité de modifier le menu dans joomla.
Tu vas me dire bin tu développes un composant... et tu en bidouilles un.
Je vais essayer mais c'est pô gagné.
Un début de piste pour appliquer ces css à un composant?  :P

User avatar
ouly
Joomla! Ace
Joomla! Ace
Posts: 1074
Joined: Sun Aug 21, 2005 9:18 pm
Contact:

Re: Menu déroulant en css accessibilité

Post by ouly » Wed Jan 03, 2007 10:21 am

L'idée est de remplacer la première liste par des couches.

Le code HTML original :

Code: Select all

   <ul id="menuDeroulant">
      <li>

         <a href="#">Les castors</a>
         <ul class="sousMenu">
            <li><a href="#">Pelage doux mais robuste qu'on aime bien beaucoup</a></li>
            <li><a href="#">Ils confectionnent des barrages !</a></li>
            <li><a href="#">Ils ont des grandes dents</a></li>    
         </ul>
      </li>

      <li>
         <a href="#">Partie 2</a>
         <ul class="sousMenu">               
            <li><a href="#">whisky</a></li>
            <li><a href="#">vodka</a></li>
            <li><a href="#">gin</a></li>
            <li><a href="#">vin</a></li>

            <li><a href="#">champagne</a></li>
         </ul>
      </li>
      <li>
         <a href="#">Partie 3</a>
         <ul class="sousMenu">               
            <li><a href="#">pommes</a></li>
            <li><a href="#">poires</a></li>

            <li><a href="#">ananas</a></li>
            <li><a href="#">pamplemousse</a></li>
            <li><a href="#">banane</a></li>           
            <li><a href="#">raisins</a></li>
            <li><a href="#">framboises</a></li>
            <li><a href="#">fraises</a></li>

            <li><a href="#">mirabelles</a></li>
            <li><a href="#">groseilles</a></li>
         </ul>
      </li>
      <li>
         <a href="#">Partie 4</a>
         <ul class="sousMenu">               
            <li><a href="#">tomates</a></li>

            <li><a href="#">haricots</a></li>
            <li><a href="#">carrottes</a></li>
            <li><a href="#">choux</a></li>
            <li><a href="#">concombres</a></li>          
            <li><a href="#">courgettes</a></li>
            <li><a href="#">endives</a></li>

            <li><a href="#">navets</a></li>
            <li><a href="#">epinards</a></li>
            <li><a href="#">avocat</a></li>
         </ul>
      </li>
   </ul>
après modifications :

Code: Select all

      <div class="moduletable_menu">
         <h3>Les castors</h3>
         <ul>
            <li><a href="#">Pelage doux mais robuste qu'on aime bien beaucoup</a></li>
            <li><a href="#">Ils confectionnent des barrages !</a></li>
            <li><a href="#">Ils ont des grandes dents</a></li>    
         </ul>
      </div>

      <div class="moduletable_menu">
         <h3>Partie 2</h3>
         <ul>
            <li><a href="#">whisky</a></li>
            <li><a href="#">vodka</a></li>
            <li><a href="#">gin</a></li>
            <li><a href="#">vin</a></li>

            <li><a href="#">champagne</a></li>
         </ul>
      </div>

      <div class="moduletable_menu">
         <h3>Partie 3</h3>
         <ul>
            <li><a href="#">pommes</a></li>
            <li><a href="#">poires</a></li>

            <li><a href="#">ananas</a></li>
            <li><a href="#">pamplemousse</a></li>
            <li><a href="#">banane</a></li>           
            <li><a href="#">raisins</a></li>
            <li><a href="#">framboises</a></li>
            <li><a href="#">fraises</a></li>

            <li><a href="#">mirabelles</a></li>
            <li><a href="#">groseilles</a></li>
         </ul>
      </div>

      <div class="moduletable_menu">
         <h3>Partie 4</h3>
         <ul>
            <li><a href="#">tomates</a></li>

            <li><a href="#">haricots</a></li>
            <li><a href="#">carrottes</a></li>
            <li><a href="#">choux</a></li>
            <li><a href="#">concombres</a></li>          
            <li><a href="#">courgettes</a></li>
            <li><a href="#">endives</a></li>

            <li><a href="#">navets</a></li>
            <li><a href="#">epinards</a></li>
            <li><a href="#">avocat</a></li>
         </ul>
      </div>
La structure résultante est identique à 4 modules menu publiés à la même position avec le style -2 (voir : http://www.joomladraft.org/content/view/70/46/) et avec un style de menu en liste (option sélectionnable dans les propriétés du module).

Mais il y a un couac que je n'avais pas remarqué immédiatement : ce code ne fonctionne pas sur IE car celui-ci ne supporte pas l'attribut :hover sur d'autres éléments que les liens...

User avatar
ouly
Joomla! Ace
Joomla! Ace
Posts: 1074
Joined: Sun Aug 21, 2005 9:18 pm
Contact:

Re: Menu déroulant en css accessibilité

Post by ouly » Sat Jan 20, 2007 10:23 am

Une solution similaire existait sur http://www.ibilab.net/webdev/articles/C ... mple-4.htm mais avec un peu de Javascript pour simuler la pseudo-classe :hover sur IE. Après adaptation, cela fonctionne parfaitement avec Joomla!.

Dans la structure du template :

Code: Select all

   <div id="dropdownmenu">
      <?php mosLoadModules( 'top', -2 ); ?>
      <script type="text/javascript">
      <!--
      function dropdownmenu_display( obj, value ) {
         UL = obj.getElementsByTagName( 'ul' );
         if ( UL.length > 0 ) {
            UL[0].style.display = value;
         }
      }

      function dropdownmenu_setHover() {
         if ( document.all ) {
            menus   = document.getElementById( 'dropdownmenu' ).getElementsByTagName( 'div' );
            nbMenus = menus.length;
            for ( i=0; i < nbMenus; i++ ) {
               menus[i].onmouseover = function() {
                  dropdownmenu_display( this, 'block' );
               }
               menus[i].onmouseout = function() {
                  dropdownmenu_display( this, 'none' );
               }
            }
         }
      }
      dropdownmenu_setHover();
      // -->
      </script>
   </div>
Dans la feuille de style du template :

Code: Select all

#dropdownmenu div.moduletable
{
   float             : left;
   margin            : 0;
   padding           : 0;
}
#dropdownmenu div.moduletable h3
{
   display           : block;
   width             : 140px;
   margin            : 0;
   padding           : 5px;
   background        : white;
}
#dropdownmenu div.moduletable ul
{
   position          : absolute;
   float             : left;
   display           : none;
   margin            : 0;
   padding           : 0;
   list-style        : none;
}
#dropdownmenu div.moduletable:hover > ul
{
   display           : block;
}
#dropdownmenu div.moduletable li
{
   margin            : 0;
   padding           : 0;
}
#dropdownmenu div.moduletable li a
{
   display           : block;
   width             : 134px;
   margin            : 0;
   padding           : 4px 8px;
   background        : white;
}
Je n'ai mis que les éléments CSS nécessaires au menu déroulant. Tout ce qui touche à l'esthétique est à ajouter.

Rappel : les modules publiés à la position correspondant au menu doivent être en style Liste.

User avatar
dec
Joomla! Guru
Joomla! Guru
Posts: 502
Joined: Mon Apr 03, 2006 2:06 pm

Re: Menu déroulant en css accessibilité

Post by dec » Wed Jan 24, 2007 12:16 pm

Je ne t'ai pas répondu plus tôt par manque de temps. Merci encore Ouly. Je vais voir ça.  :)


Locked

Return to “1.0 - Extensions tierce partie”