Tutoriaux
La technique CSS du « Sliding door » appliquée à un menu Web 2.0
Avant de connaître cette technique, j'utilisais une image différente pour chaque bouton de ma barre de navigation. Il est évident que cela n'est pas très pratique et cela demande aussi un peu plus de CSS que la technique que je vais vous montrer ci-dessous. De plus, cette technique diminuera le temps de chargement de vos pages ainsi que la bande passante utilisée. Alors, voici comment utiliser cette technique, et ce, avec une seule image.
Les images utilisées
La technique du « sliding door »
Le concept de cette technique est l'utilisation d'une image de fond pour les boutons de votre menu. Nous utiliserons un <span> à l'intérieur d'un lien <a> afin de maintenir l'image de fond. C'est donc dire que la partie la plus importante, est la position de l'image de font « background-image position ».
Code HTML
<ul class="blue">
<li><a href="#" title="Accueil">Accueil</a></li>
<li><a href="#" title="Tutoriel">Tutoriel</a></li>
<li><a href="#" title="Astuce">Astuce</a></li>
<li><a href="#" title="Article">Article</a></li>
</ul>
<li><a href="#" title="Accueil">Accueil</a></li>
<li><a href="#" title="Tutoriel">Tutoriel</a></li>
<li><a href="#" title="Astuce">Astuce</a></li>
<li><a href="#" title="Article">Article</a></li>
</ul>
Ajoutons maintenant le <span> pour chaque lien afin d'accueillir l'image de fond.
<ul class="green">
<li><a href="#" title="Accueil" class="current"><span></span>Accueil</a></li>
<li><a href="#" title="Tutoriel"><span></span>Tutoriel</a></li>
<li><a href="#" title="Astuce"><span></span>Astuce</a></li>
<li><a href="#" title="Articles"><span></span>Articles</a></li>
</ul>
<li><a href="#" title="Accueil" class="current"><span></span>Accueil</a></li>
<li><a href="#" title="Tutoriel"><span></span>Tutoriel</a></li>
<li><a href="#" title="Astuce"><span></span>Astuce</a></li>
<li><a href="#" title="Articles"><span></span>Articles</a></li>
</ul>
Le code CSS
Passons maintenant à la partie CSS de cette technique
<UL>
ul.blue {
padding: 5px;
margin: 10px 0;
// Suppression des puces de la liste, car nous ne voulons par les voir
// dans le menu.
list-style: none;
float: left;
}
padding: 5px;
margin: 10px 0;
// Suppression des puces de la liste, car nous ne voulons par les voir
// dans le menu.
list-style: none;
float: left;
}
<LI>
ul.blue li {
float: left;
}
ul.blue li a {
float: left;
// Suppression du soulignement du lien
text-decoration: none;
color: #ccc;
// La valeur 15px du padding, représente l'espace entre le bord
// du bouton et le texte.
padding: 4px 15px 0 0;
// La valeur 8px de la marge, représente l'espace entre les boutons
margin-right: 8px;
font: 900 14px "Arial", Helvetica, sans-serif;
}
float: left;
}
ul.blue li a {
float: left;
// Suppression du soulignement du lien
text-decoration: none;
color: #ccc;
// La valeur 15px du padding, représente l'espace entre le bord
// du bouton et le texte.
padding: 4px 15px 0 0;
// La valeur 8px de la marge, représente l'espace entre les boutons
margin-right: 8px;
font: 900 14px "Arial", Helvetica, sans-serif;
}
<SPAN>
ul.blue li a span {
float: left;
padding-right: 15px;
display: block;
// Diminution de la marge du haut afin de compenser le padding-top de
// 4px du lien <a>
margin-top: -4px;
height: 24px;
}
float: left;
padding-right: 15px;
display: block;
// Diminution de la marge du haut afin de compenser le padding-top de
// 4px du lien <a>
margin-top: -4px;
height: 24px;
}
<HOVER>
ul.blue li a:hover, ul.blue li a.current {
color: #0d5f83;
background: url('/images/blue.png') no-repeat top right;
}
ul.blue li a:hover span, ul.blue li a.current span {
background: url('/images/blue.png') no-repeat top left;
}
color: #0d5f83;
background: url('/images/blue.png') no-repeat top right;
}
ul.blue li a:hover span, ul.blue li a.current span {
background: url('/images/blue.png') no-repeat top left;
}
Voilà! Technique facile et utile! Vous devriez être en mesure de le faire vous même et de réutiliser votre code dans vos projets facilement.
Ajouter cette page à votre réseau social favoris
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (0)
Flux RSS pour les commentairesEcrivez un commentaire
Navigation
Publicités
Nos services
Programmation Web
Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.
La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.
Suite ...
Programmation Desktop
Quel que soit votre projet, nous pouvons le réaliser pour vous !
Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.
Suite ...
Autres ...
Quel que soit vos projets ou vos idées, contactez nous!
Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.
Suite ...