-
-
- Le script fonctionne avec tous les navigateurs.
Démonstration
- Une démonstration (dans un design).
- Une démonstration (celle de l’auteur).
-
Télécharger
- Télécharger css3-animated-dropdown-menu
-
À placer avant la balise de fermeture </body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').css('visibility','visible');
}).mouseout(function(){
$(this).children('ul').css('visibility','hidden');
})
}
});
</script>
-
Liens
Rendez-vous sur le site de son auteur (Ouvrez un onglet de votre navigateur et copier /coller l’url dedans).
http://www.red-team-design.com/css3-animated-dropdown-menu
- Rendez-vous sur le Site du Zéro, Apprenez à créer votre site web avec HTML5 et CSS3
-

j’ai réussi, pour chaque boutons, j’ai mis une class spécifique avec comme valeur left en pourcentage comme ceci:
#menu .contact{
left: -45%;
}
cordialement.
désolé, il suffit souvent d’exposer pour résoudre ses problèmes…
Bonjour,
Alors c’est parfait, j’en suis ravi pour vous.
Pour mon information, voulez-vous me communiquer l’adresse de votre site, afin que je puisse voir le résultat.
Pour ce faire, écrivez-moi en utilisant le formulaire de contact. Merci
Bien à vous
Merci pour cette démo clef en main à tester puis à remanier pour l’adapter et comprendre.
Bonjour,
Bonne installation…
Cordialement
merci, je le trouve bien ce menu, je me suis permis de l’utiliser dans un site que je réalise actuellement.
Par contre, sauriez-vous comment faire pour que chaque sous rubrique du menu déroulant soit centrer au milieu et non pas sur la gauche de chaque boutons ?
cordialement et merci d’avance.
Bonjour,
Editez la feuille de style style.css et modifiez la valeur de left: 40px; par 65px comme ci-dessous :
#menu ul li:first-child > a::after {
content: »;
position: absolute;
left: 65px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
Seulement en fonction du nombre de caractère des titres, exemple : Home | Catégories | Work | About | Contact, le positionnement des sous menus (items) ne sera jamais le même, voire au milieu.
Bien à vous
je parlais de l’envelloppe du sous menu, il s’agit il me semble de:
#menu ul{
}
j’ai changé la valeur du left: 0px; en left:-20px; mais en effet selon la taille des caractère des boutons cela change, donc impossible de center les sous menu au milieux, enfin moi j’ai pas trouver comment faire ..
cordialement et merci de votre réponse.
Merci j’y vais de ce pas
bonjour
Visiblement impossible a installer sous ubuntu dommage.
Merci a vous
Bonjour,
Vous pouvez peut-être demander chez planet-libre.org qui semble l’avoir installé.
Cordialement
quel est votre IDE ? c’est trés sympa de voir la page entier a droite
Bonjour,
J’utilise Sublime Text 2 déjà depuis quelques temps, il est multiplateforme. LA version bêta publique est gratuite, pour ma part je l’ai achetée.
Par ailleurs, pour des projets plus important, je me sers de NetBeans 7.0 (gratuit).
Cordialement
Salut,
Sympa, j’avais fait un truc du style en JS, belle démonstration de HTML5 !
PS : Je conseil quand même require() que include() pour inclure des fichiers visible en PHP (style, un menu, etc), mais, préfère inclure des fichiers de connexion (par exemple, connexion à mySQL) via include() ^^
Merci pour le tuto !
Bonjour,
Merci de commenter, il y en aura d’autres « HTML5 & CSS3″.
Pour ma part, non je trouve préférable d’utiliser include() pour un menu, par exemple.
+++
require() est identique à include() mise à part le fait que lorsqu’une erreur survient, il produit également une erreur fatale de type E_COMPILE_ERROR. En d’autres termes, il stoppera le script alors que include() n’émettra qu’une alerte de type E_WARNING, ce qui permet au script de continuer.
+++
- Source PHP Manual
Cordialement