Menu déroulant type LavaLamp en Css3

Par Eric - Le
Css Html
Menu déroulant type LavaLamp en Css3

Je pense que vous avez déjà vu des menus animés avec l'effet "LavaLamp" basés sur le plugin jQuery.

Voici un petit tutoriel qui vous permettra d'obtenir le même comportement mais avec Css3 et sans javascript et qui utilise les transitions pour animer le menu.

Menu déroulant type LavaLamp en Css3

Le code Html

  1. <ul id="nav">
  2. <li><a href="#">Home</a></li>
  3. <li><a class="hsubs" href="#">Menu 1</a>
  4. <ul class="subs">
  5. <li><a href="#">Sous menu 1</a></li>
  6. <li><a href="#">Sous menu 2</a></li>
  7. <li><a href="#">Sous menu 3</a></li>
  8. <li><a href="#">Sous menu 4</a></li>
  9. <li><a href="#">Sous menu 5</a></li>
  10. </ul>
  11. </li>
  12. <li><a class="hsubs" href="#">Menu 2</a>
  13. <ul class="subs">
  14. <li><a href="#">Sous menu 2-1</a></li>
  15. <li><a href="#">Sous menu 2-2</a></li>
  16. <li><a href="#">Sous menu 2-3</a></li>
  17. <li><a href="#">Sous menu 2-4</a></li>
  18. <li><a href="#">Sous menu 2-5</a></li>
  19. <li><a href="#">Sous menu 2-6</a></li>
  20. <li><a href="#">Sous menu 2-7</a></li>
  21. <li><a href="#">Sous menu 2-8</a></li>
  22. </ul>
  23. </li>
  24. <li><a class="hsubs" href="#">Menu 3</a>
  25. <ul class="subs">
  26. <li><a href="#">Sous menu 3-1</a></li>
  27. <li><a href="#">Sous menu 3-2</a></li>
  28. <li><a href="#">Sous menu 3-3</a></li>
  29. <li><a href="#">Sous menu 3-4</a></li>
  30. <li><a href="#">Sous menu 3-5</a></li>
  31. </ul>
  32. </li>
  33. <li><a href="#">Menu 4</a></li>
  34. <li><a href="#">Menu 5</a></li>
  35. <li><a href="#">Menu 6</a></li>
  36. <div id="lavalamp"></div>
  37. </ul>

La Css

  1.  
  2. #nav,#nav ul {
  3. list-style: none outside none;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. #nav {
  8. background-color: #000;
  9. clear: both;
  10. font-size: 12px;
  11. height: 58px;
  12. padding: 0 0 0 9px;
  13. position: relative;
  14. width: 957px;
  15. }
  16. #nav ul {
  17. background-color: #222;
  18. border:1px solid #222;
  19. border-radius: 0 5px 5px 5px;
  20. border-width: 0 1px 1px;
  21. box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
  22. left: -9999px;
  23. overflow: hidden;
  24. position: absolute;
  25. top: -9999px;
  26. z-index: 2;
  27.  
  28. -moz-transform: scaleY(0);
  29. -ms-transform: scaleY(0);
  30. -o-transform: scaleY(0);
  31. -webkit-transform: scaleY(0);
  32. transform: scaleY(0);
  33.  
  34. -moz-transform-origin: 0 0;
  35. -ms-transform-origin: 0 0;
  36. -o-transform-origin: 0 0;
  37. -webkit-transform-origin: 0 0;
  38. transform-origin: 0 0;
  39.  
  40. -moz-transition: -moz-transform 0.1s linear;
  41. -ms-transition: -ms-transform 0.1s linear;
  42. -o-transition: -o-transform 0.1s linear;
  43. -webkit-transition: -webkit-transform 0.1s linear;
  44. transition: transform 0.1s linear;
  45. }
  46. #nav li {
  47. background: url('menu_line.png') no-repeat scroll right 5px transparent;
  48. float: left;
  49. position: relative;
  50. }
  51. #nav li a {
  52. color: #FFFFFF;
  53. display: block;
  54. float: left;
  55. font-weight: normal;
  56. height: 30px;
  57. padding: 23px 20px 0;
  58. position: relative;
  59. text-decoration: none;
  60. text-shadow: 1px 1px 1px #000000;
  61. }
  62. #nav li:hover > a {
  63. color: #00B4FF;
  64. }
  65. #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
  66. background: none repeat scroll 0 0 #121212;
  67. outline: 0 none;
  68. }
  69. #nav li:hover ul.subs {
  70. left: 0;
  71. top: 53px;
  72. width: 180px;
  73.  
  74. -moz-transform: scaleY(1);
  75. -ms-transform: scaleY(1);
  76. -o-transform: scaleY(1);
  77. -webkit-transform: scaleY(1);
  78. transform: scaleY(1);
  79. }
  80. #nav ul li {
  81. background: none;
  82. width: 100%;
  83. }
  84. #nav ul li a {
  85. float: none;
  86. }
  87. #nav ul li:hover > a {
  88. background-color: #121212;
  89. color: #00B4FF;
  90. }
  91. #lavalamp {
  92. background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
  93. height: 16px;
  94. left: 13px;
  95. position: absolute;
  96. top: 0px;
  97. width: 64px;
  98.  
  99. -moz-transition: all 300ms ease;
  100. -ms-transition: all 300ms ease;
  101. -o-transition: all 300ms ease;
  102. -webkit-transition: all 300ms ease;
  103. transition: all 300ms ease;
  104. }
  105. #lavalamp:hover {
  106. -moz-transition-duration: 3000s;
  107. -ms-transition-duration: 3000s;
  108. -o-transition-duration: 3000s;
  109. -webkit-transition-duration: 3000s;
  110. transition-duration: 3000s;
  111. }
  112. #nav li:nth-child(1):hover ~ #lavalamp {
  113. left: 13px;
  114. }
  115. #nav li:nth-child(2):hover ~ #lavalamp {
  116. left: 90px;
  117. }
  118. #nav li:nth-child(3):hover ~ #lavalamp {
  119. left: 170px;
  120. }
  121. #nav li:nth-child(4):hover ~ #lavalamp {
  122. left: 250px;
  123. }
  124. #nav li:nth-child(5):hover ~ #lavalamp {
  125. left: 330px;
  126. }
  127. #nav li:nth-child(6):hover ~ #lavalamp {
  128. left: 410px;
  129. }
  130. #nav li:nth-child(7):hover ~ #lavalamp {
  131. left: 490px;
  132. }
  133. #nav li:nth-child(8):hover ~ #lavalamp {
  134. left: 565px;
  135. }

Démonstration en ligne : menu Lavalamp en Css3 et fichiers sources originels.

Source du tutoriel : Script Tutorials