Kdigit studio de création, identité et communication

Nous inaugurons la rubrique des tutoriels avec une petite astuce pour égayer les rollovers de vos menus.

L’objectif étant de reproduire l’effet que nous avons actuellement sur notre menu principal, à savoir l’affichage progressif d’une image d’arrière-plan au survol d’un lien.

Également dans ce tutoriel quelques astuces pour accélérer le chargement de vos pages quand vous utilisez des scripts JS.

Le code jQuery proposé est l’œuvre de David Arakelian, expert en développement et membre du Studio Kdigit.

Sommaire

1. Principe de la solution
   • Le code HTML
   • Le code CSS
   • Le code JavaScript
2. Optimiser le chargement de vos scripts
3. Utilisations alternatives du script

I. Principe de la solution

Cette solution est une alternative élégante à l’apparition trop « binaire » de vos backgrounds CSS. De plus, elle est facilement adaptable sur un menu existant et ne pèse tout au plus que quelques kilo-octets (si vous utilisez déjà jQuery, bien sûr).

Pour parvenir au résultat escompté nous utiliserons la fameuse librairie jQuery, dont la réputation n’est plus à faire, et plus particulièrement la fonction fadeTo. En effet, celle-ci permet de faire apparaitre / disparaitre un élément en jouant sur son opacité, le tout en un laps de temps personnalisable.

jQuery peut modifier la façon dont va s’afficher un élément de votre code HTML, ou jouer avec la modification à la volée de vos propriétés CSS. Mais malheureusement, il ne permet pas nativement d’appliquer un fade directement sur une image placée en background via CSS.

Il va donc falloir ruser.

La solution consiste à utiliser un élément supplémentaire qui contiendra uniquement l’image d’arrière-plan, et de déclencher son affichage lors du hover.

Et pour que nos deux éléments se positionnent correctement, on utilisera un peu de CSS (positionnement absolu et z-index) pour superposer le texte au dessus de notre image.

Le code HTML

<ul id="menu">
    <li>
        <a href="#">
            <span class="texte">Intitulé du lien</span>
            <span class="background"></span>
        </a>
    </li>
    <li>
        <a href="#" class="courant">
            <span class="texte">Page en cours</span>
            <span class="background"></span>
        </a>
    </li>	
</ul>

Vous aurez remarqué dans le code la classe courant sur le lien du deuxième élément de liste. Celui-ci permet de mettre en valeur l’item de la page en cours (comment marquer la page courante sur mon site ?).

Le code CSS

ul#menu { 
overflow:hidden; /* contexte de formatage pour éviter que les éléments flottants ne dépassent du parent */ }

ul#menu li { 
float:left; /* alignement horizontal des éléments */ }

ul#menu li a { 
display:block; /* pour permettre le redimensionnement des liens */
height:50px; /* hauteur des liens */
line-height:50px; /* centrage vertical du texte (= height précédent) */
position:relative; /* pour servir de référence aux enfants positionnés en absolu */
padding:0 10px; /* on aère un peu les extrémités du lien */ }

ul#menu li a span.texte { 
position:relative; /* pour faire fonctionner le z-index */
z-index:2; /* niveau de superposition */ }

ul#menu li a span.background { 
display:none; /* l'élément est masqué au départ */
width:100%; /* toute la largeur du lien */
height:100%; /*... et toute sa hauteur */
position:absolute; /* on sort l'élément du flux */
top:0; /* et on le cale en haut */
left:0; /* ... à gauche */
z-index:1; /* ... et en dessous du texte [optionnel] */
background:url(img.jpg) no-repeat center top; /* notre image d'arrière-plan, centrée horizontalement et calée en haut */ }

ul#menu li a.courant span.background { 
display:block; /* pour la page courante l'arrière-plan est affiché */ }

On pourrait optimiser le code HTML et CSS en utilisant des sélecteurs CSS2.1 avancés pour cibler nos <span> (on s’affranchit donc des deux classes CSS).

ul#menu li a span:first-child { 
/* Styles du premier <span> (ciblé grâce à la pseudo-classe :first-child) */ }

ul#menu li a span + span { 
/* Styles du deuxième <span> (ciblé grâce au sélecteur d'enfant adjacent) */ }

Attention toutefois si vous utilisez cette technique :

• Ces sélecteurs ne sont pas compatibles avec Internet Explorer 6.
• N’oubliez pas d’adapter le script jQuery !

Le code JavaScript

Dans le <head>, ajoutez la librairie jQuery (accès direct au téléchargement du plug-in) et le script pour réaliser l’effet :

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        var fadein_speed  = 350; /* Vitesse de transition (show) en ms (350 = 0.350s) */
        var fadeout_speed = 150; /* Vitesse de transition (hide) en ms (150 = 0.150s) */
        var opacity_show  = 1;   /* Opacité du background (show) (1 = 100%) */
        var opacity_hide  = 0;   /* Opacité du background (hide) (0 =   0%) */

        $('#menu a').hover(
            function () { // mouse hover
                // on affiche le span progressivement
                $(this).children('span.background').stop().fadeTo(fadein_speed, opacity_show);    
            },
            function () { // mouse leave
                // si le lien n'est pas "courant"
                if(!$(this).hasClass('courant'))    
                {
                    // on fait disparaitre le span progressivement
                    $(this).children('span.background').stop().fadeTo(fadeout_speed, opacity_hide);
                }
        });
	
    });
	
</script>

Quelques explications supplémentaires :

• La fonction .hover() accepte en paramètre deux fonctions. Celles-ci sont exécutées quand le pointer de la souris entre et sort du bouton de notre menu.
• .children() permet de sélectionner l’élément span.background parmi les enfants de #menu a.
• La fonction .stop() est utilisée pour arrêter l’animation du background dans le cas où le curseur de la souris quitte le lien.

• .fadeTo() est donc la fonction qui fait apparaitre / disparaitre l’image (les paramètres spécifient la vitesse de la transition et le degré d’opacité à atteindre).

  Pourquoi avoir utilisé .fadeTo() plutôt que .fadeIn() et .fadeOut() ? Tout simplement parce que .fadeTo() donne d’avantage de possibilités de personnalisation concernant l’opacité.

• Et enfin, .hasClass() vérifie si la classe CSS courant est attribuée à l’élément.

II. Optimiser le chargement de vos scripts JS

Voici quelques astuces pour accélerer le temps de chargement de votre page lorsque vous utilisez des scripts JavaScript.

La liste n’est bien entendue pas exhaustive, et le net regorge de ressources sur le sujet, mais son but est de vous aider à optimiser immédiatement l’appel du script de ce tutoriel. Donc pas besoin de fouiller le web maintenant, voici l’essentiel.

• Regroupez vos fonctions dans un fichier externe :

  De cette façon, le navigateur ne téléchargera qu’une seule fois le fichier. Les prochains chargements se feront à partir du cache.

  Exemple pratique :

  // Dans votre <head>
  <script type="text/javascript" src="mes_fonctions.js"></script>

  // Dans votre fichier "mes_fonctions.js"
  $(document).ready(function() { 
  
  	// Regroupez à cet endroit vos fonctions jQuery
  
  	/***** Rollover menu principal *****/
  	$('#menu a').hover(
  		// code de la fonction
  	});
  
  });
  
  // En dessous vos fonctions en Javascript à l'ancienne :
  function has_been() {
  	// code de la fonction
  }

• Appelez le script en fin de page :

  Et plus précisemment avant </body>. Cela permet au navigateur de charger d’abord le contenu de votre site, puis d’y ajouter vos effets JS. Ne mettez pas un script en bas de page si vous tenez absolument à ce qu’un élément ne soit chargé qu’avec l’effet du script.

  Exemple pratique :

  		[...]
  
  		<script type="text/javascript" src="mes_fonctions.js"></script>
  	</body>
  </html>

• Comment rendre valide W3C un code (X)HTML qui contient du Javascript dans le corps de la page ?

  Plusieurs solutions possibles. Citons-en une, l’ajout de commentaires HTML autour du code JS.

  Exemple pratique :

  		[...]
  
  		<script type="text/javascript"><!--
  			// code JavaScript valide
  		--></script>	
  	</body>
  </html>

• D’autres « tips » ?

  Compression des sources, des pages web, chargement des librairies via un hébergeur externe, bref, encore pas mal de solutions que je vous propose de découvrir chez les mangeurs de choucroute. : )

III. Utilisations alternatives du script

Bien sûr, l’application d’un tel script ne se limite pas aux menus. On peut très bien étendre son utilisation à n’importe quel modèle de boite qui doit fournir une alternative (textuelle ou visuelle) au survol d’un élément (lien, image, zone, etc.). Une démo très prochainement c’est promis, mais là je dois y aller, j’ai piscine.