Top Menu

Vous êtes ici : Codesscripts » HTML5 / CSS3 » CSS3 – HTML5 animated dropdown menu

CSS3 – HTML5 animated dropdown menu

-

-

- Le script fonctionne avec tous les navigateurs.

Démonstration

-

Télécharger

-

À 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

-

, , ,

14 Réponses pour → CSS3 – HTML5 animated dropdown menu

  1. ant 15 octobre 2012 chez 16 h 36 min #

    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…

    • Patrick 16 octobre 2012 chez 11 h 56 min #

      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

  2. Phrixos 5 mars 2012 chez 14 h 46 min #

    Merci pour cette démo clef en main à tester puis à remanier pour l’adapter et comprendre.

    • Patrick 5 mars 2012 chez 21 h 15 min #

      Bonjour,

      Bonne installation…

      Cordialement

      • ant 11 octobre 2012 chez 15 h 56 min #

        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.

        • Patrick 14 octobre 2012 chez 21 h 20 min #

          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

          • ant 15 octobre 2012 chez 14 h 50 min #

            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.

  3. n3o 18 décembre 2011 chez 15 h 42 min #

    Merci j’y vais de ce pas :P

  4. n3o 18 décembre 2011 chez 10 h 49 min #

    bonjour

    Visiblement impossible a installer sous ubuntu dommage.

    Merci a vous

    • Patrick 18 décembre 2011 chez 14 h 53 min #

      Bonjour,

      Vous pouvez peut-être demander chez planet-libre.org qui semble l’avoir installé.

      Cordialement

  5. n3o 17 décembre 2011 chez 17 h 56 min #

    quel est votre IDE ? c’est trés sympa de voir la page entier a droite

    • Patrick 18 décembre 2011 chez 9 h 43 min #

      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

  6. shudacr 12 décembre 2011 chez 19 h 13 min #

    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 !

    • Patrick 13 décembre 2011 chez 14 h 49 min #

      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

Laisser un commentaire