Tous,menu html liste
<html>
<ul class="menu">
<li>
<a href="">Header</a>
<ul class="submenu">
<li><img src=""/> Link 1</li>
<li><img src=""/> Link 2</li>
</ul>
</li>
</ul>
</html>
le code peut être modifié de telle sorte que link1 et lien2 apparaîtra sur la souris sur ....
Avec CSS ou avec JS?
ici avec CSS:
<html>
<head>
<style type="text/css">
li:hover > ul {
display:block;
}
.submenu {
display:none;
}
</style>
</head>
<body>
<ul class="menu">
<li>
<a href="">Header</a>
<ul class="submenu">
<li><img src=""/> Link 1</li>
<li><img src=""/> Link 2</li>
</ul>
</li>
</ul>
</body>
</html>
Mais cela ne fonctionnera probablement pas dans IE6 et inférieure (merci Andy E) comme ne pas laisser le sélecteur :hover pseudo avec d'autres sélecteurs que a.
Il existe de meilleures approches mais comme votre question n'est pas très spécifique, c'est ma solution.
Edit: Ce serait
li a:hover + ul {
display:block;
}
Reference. Sachez que cela peut ne pas fonctionner avec tous les navigateurs. Mais vous trouverez beaucoup d'informations sur les éléments CSS supportés par quel navigateur sur Internet.
Oui - Cela peut être fait en utilisant JavaScript ou CSS. Il y a un bon article sur la façon de le faire en CSS ici:
http://www.howtocreate.co.uk/tutorials/testMenu.html
Mise à jour: Ce guide semble être beaucoup mieux en fait:
http://www.seoconsultants.com/css/menus/tutorial/
trouver de bonnes informations sur CSS menu seulement est plus difficile que je pensais ...
L'approche CSS n'est pas recommandée. JavaScript permet des solutions beaucoup plus accessibles. – Quentin
@David Bien * Je recommanderais * l'approche CSS - en partie pour l'accessibilité, et la fête parce que j'ai vu quelques implémentations de menu JavaScript dégoûtant! – Justin
L'accessibilité est la raison pour laquelle l'approche CSS n'est pas bonne. Accès au clavier (et accès au commutateur de respiration, etc.)? Non.Un certain degré de fuzz, donc vous n'avez pas besoin d'avoir des compétences de souris de haute précision (l'arthrite n'est pas rare) pour éviter que le menu disparaisse lorsque vous essayez de suivre l'élément de menu que vous voulez? La plupart des implémentations JavaScript ne parviennent pas à implémenter ces fonctionnalités, mais les implémentations CSS ** ne le peuvent pas **. – Quentin
Vous pouvez essayer d'utiliser une combinaison de jQuery et CSS.
HTML:
<ul class="menu">
<li>
<a href="" class="submenuLink">Header</a>
<ul class="submenu">
<li><img src=""/> Link 1</li>
<li><img src=""/> Link 2</li>
</ul>
</li>
</ul>
CSS:
ul.submenu
{
display: none;
}
jQuery:
$(document).ready(function() {
$(".submenuLink").mouseover(function() {
$(".submenu").css("display", "inline");
});
});
Vous aurez juste à lier mouseoout pour le masquer à nouveau lorsque vous déplacez votre souris loin de "En-tête".
Merci .............................. – Hulk
Pourriez-vous spécifier la question? Sur la souris sur quoi? Plus d'en-tête? –
yes mouse over sur l'hyperlien de l'en-tête – Hulk