Add CSS3 Flying Style Drop Down Menu-bar to Blogger

Untitled.jpg
  1. Login to your Blogger Account.
  2. From Dashboard >> Tamplate >> Edit HTML >> Proceed.
  3. Don't forget to backup your template first.
  4. Check the Expand Widget Templates box.
  5. Find out (Press Ctrl+F) the Code ]]></b:skin>
  6. Now Just before the ]]></b:skin> Paste the following Code
    1. #flyingmenubt,
    2. #flyingmenubt ul {
    3. list-style: none outside none;
    4. margin: 0;
    5. padding: 0;
    6. height: 500px;
    7. }
    9. #flyingmenubt {
    10. font-family: "Lucida Sans Unicode", Verdana, Arial, sans-serif;
    11. font-size: 13px;
    12. height: 36px;
    13. list-style: none outside none;
    14. margin: 40px auto;
    15. text-shadow: 0 -1px 3px #202020;
    16. width: 980px;
    17. -moz-border-radius: 4px;
    18. -webkit-border-radius: 4px;
    19. border-radius: 4px;
    20. -moz-box-shadow: 0px 3px 3px #cecece;
    21. -webkit-box-shadow: 0px 3px 3px #cecece;
    22. box-shadow: 0 3px 4px #8b8b8b;
    23. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    24. background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    25. background-color: #5f5f5f;
    26. }
    28. #flyingmenubt ul {
    29. left: -9999px;
    30. position: absolute;
    31. top: -9999px;
    32. z-index: 2;
    33. }
    35. #flyingmenubt li {
    36. border-bottom: 1px solid #575757;
    37. border-left: 1px solid #929292;
    38. border-right: 1px solid #5d5d5d;
    39. border-top: 1px solid #797979;
    40. display: block;
    41. float: left;
    42. height: 34px;
    43. position: relative;
    44. width: 105px;
    45. }
    47. #flyingmenubt li:first-child {
    48. border-left: 0 none;
    49. margin-left: 5px;
    50. }
    52. #flyingmenubt li a {
    53. color: #FFFFFF;
    54. display: block;
    55. line-height: 34px;
    56. outline: medium none;
    57. text-align: center;
    58. text-decoration: none;
    59. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    60. background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    61. background-color: #5f5f5f;
    62. }
    64. /* keyframes #animation1 */
    65. @-webkit-keyframes animation1 {
    66. 0% {
    67. -webkit-transform: scale(1);
    68. }
    70. 30% {
    71. -webkit-transform: scale(1.3);
    72. }
    74. 100% {
    75. -webkit-transform: scale(1);
    76. }
    77. }
    79. @-moz-keyframes animation1 {
    80. 0% {
    81. -moz-transform: scale(1);
    82. }
    84. 30% {
    85. -moz-transform: scale(1.3);
    86. }
    88. 100% {
    89. -moz-transform: scale(1);
    90. }
    91. }
    93. #flyingmenubt li>a:hover {
    95. -moz-animation-name: animation1;
    96. -moz-animation-duration: 0.7s;
    97. -moz-animation-timing-function: linear;
    98. -moz-animation-iteration-count: infinite;
    99. -moz-animation-direction: normal;
    100. -moz-animation-delay: 0;
    101. -moz-animation-play-state: running;
    102. -moz-animation-fill-mode: forwards;
    103. -webkit-animation-name: animation1;
    104. -webkit-animation-duration: 0.7s;
    105. -webkit-animation-timing-function: linear;
    106. -webkit-animation-iteration-count: infinite;
    107. -webkit-animation-direction: normal;
    108. -webkit-animation-delay: 0;
    109. -webkit-animation-play-state: running;
    110. -webkit-animation-fill-mode: forwards;
    111. }
    113. #flyingmenubt li:hover>a {
    114. z-index: 4;
    115. }
    117. #flyingmenubt li:hover ul.subs {
    118. left: 0;
    119. top: 34px;
    120. width: 150px;
    121. }
    123. #flyingmenubt ul li {
    124. background: none repeat scroll 0 0 #838383;
    125. box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    126. opacity: 0;
    127. width: 100%;
    128. /*-webkit-transition:all 0.3s ease-in-out;
    129. -moz-transition:all 0.3s ease-in-out;
    130. -o-transition:all 0.3s ease-in-out;
    131. -ms-transition:all 0.3s ease-in-out;
    132. transition:all 0.3s ease-in-out;*/
    133. }
    135. /* keyframes #animation2 */
    136. @-webkit-keyframes animation2 {
    137. 0% {
    138. margin-left: 185px;
    139. }
    141. 100% {
    142. margin-left: 0px;
    143. opacity: 1;
    144. }
    145. }
    147. @-moz-keyframes animation2 {
    148. 0% {
    149. margin-left: 185px;
    150. }
    152. 100% {
    153. margin-left: 0px;
    154. opacity: 1;
    155. }
    156. }
    158. #flyingmenubt li:hover ul li {
    159. /* css3 animation */
    160. -moz-animation-name: animation2;
    161. -moz-animation-duration: 0.3s;
    162. -moz-animation-timing-function: linear;
    163. -moz-animation-iteration-count: 1;
    164. -moz-animation-direction: normal;
    165. -moz-animation-delay: 0;
    166. -moz-animation-play-state: running;
    167. -moz-animation-fill-mode: forwards;
    168. -webkit-animation-name: animation2;
    169. -webkit-animation-duration: 0.3s;
    170. -webkit-animation-timing-function: linear;
    171. -webkit-animation-iteration-count: 1;
    172. -webkit-animation-direction: normal;
    173. -webkit-animation-delay: 0;
    174. -webkit-animation-play-state: running;
    175. -webkit-animation-fill-mode: forwards;
    177. /*-webkit-transition:all 0.3s ease-in-out;
    178. -moz-transition:all 0.3s ease-in-out;
    179. -o-transition:all 0.3s ease-in-out;
    180. -ms-transition:all 0.3s ease-in-out;
    181. transition:all 0.3s ease-in-out;*/
    182. }
    184. /* animation delays */
    185. #flyingmenubt li:hover ul li:nth-child(1) {
    186. -moz-animation-delay: 0;
    187. -webkit-animation-delay: 0;
    188. }
    190. #flyingmenubt li:hover ul li:nth-child(2) {
    191. -moz-animation-delay: 0.05s;
    192. -webkit-animation-delay: 0.05s;
    193. }
    195. #flyingmenubt li:hover ul li:nth-child(3) {
    196. -moz-animation-delay: 0.1s;
    197. -webkit-animation-delay: 0.1s;
    198. }
    200. #flyingmenubt li:hover ul li:nth-child(4) {
    201. -moz-animation-delay: 0.15s;
    202. -webkit-animation-delay: 0.15s;
    203. }
    205. #flyingmenubt li:hover ul li:nth-child(5) {
    206. -moz-animation-delay: 0.2s;
    207. -webkit-animation-delay: 0.2s;
    208. }
    210. #flyingmenubt li:hover ul li:nth-child(6) {
    211. -moz-animation-delay: 0.25s;
    212. -webkit-animation-delay: 0.25s;
    213. }
    215. #flyingmenubt li:hover ul li:nth-child(7) {
    216. -moz-animation-delay: 0.3s;
    217. -webkit-animation-delay: 0.3s;
    218. }
    220. #flyingmenubt li:hover ul li:nth-child(8) {
    221. -moz-animation-delay: 0.35s;
    222. -webkit-animation-delay: 0.35s;
    223. }
  7. Go back Blogger and click Layout than Add Gadget >> HTML/Javascript.
  8. Paste the below code and Save.
    1. <ul id="flyingmenubt">
    2. <li><a href="http://www.sr-site.com/" temp_href="http://www.sr-site.com/">Home</a></li>
    3. <li><a class="hsubs" href="#" temp_href="#">Menu 1</a>
    4. <ul class="subs">
    5. <li><a href="#" temp_href="#">Submenu 1</a></li>
    6. <li><a href="#" temp_href="#">Submenu 2</a></li>
    7. <li><a href="#" temp_href="#">Submenu 3</a></li>
    8. <li><a href="#" temp_href="#">Submenu 4</a></li>
    9. <li><a href="#" temp_href="#">Submenu 5</a></li>
    10. </ul>
    11. </li>
    12. <li><a class="hsubs" href="http://www.sr-site.com/" temp_href="http://www.sr-site.com/">
    13. Menu 2</a>
    14. <ul class="subs">
    15. <li><a href="#" temp_href="#">Submenu 1</a></li>
    16. <li><a href="#" temp_href="#">Submenu 2</a></li>
    17. <li><a href="#" temp_href="#">Submenu 3</a></li>
    18. <li><a href="#" temp_href="#">Submenu 4</a></li>
    19. <li><a href="#" temp_href="#">Submenu 5</a></li>
    20. <li><a href="#" temp_href="#">Submenu 6</a></li>
    21. <li><a href="#" temp_href="#">Submenu 7</a></li>
    22. <li><a href="#" temp_href="#">Submenu 8</a></li>
    23. </ul>
    24. </li>
    25. <li><a class="hsubs" href="#" temp_href="#">Menu 3</a>
    26. <ul class="subs">
    27. <li><a href="#" temp_href="#">Submenu 1</a></li>
    28. <li><a href="#" temp_href="#">Submenu 2</a></li>
    29. <li><a href="#" temp_href="#">Submenu 3</a></li>
    30. <li><a href="#" temp_href="#">Submenu 4</a></li>
    31. <li><a href="#" temp_href="#">Submenu 5</a></li>
    32. </ul>
    33. </li>
    34. <li><a href="#" temp_href="#">Menu 4</a></li>
    35. <li><a href="#" temp_href="#">Menu 5</a></li>
    36. <li><a href="#" temp_href="#">Menu 6</a></li>
    37. <li><a href="http://www.sr-site.com/" temp_href="http://www.sr-site.com/">Back</a></li>
    38. </ul>