Летящее меню на CSS3

Еще один вариант меню на CSS3 с интересным визуальным эффектом. При наведении курсора мыши пункт меню начинает биться, словно сердце, а подпункты вылетают справа. 

Разметка HTML

Меню строится на основе неупорядоченного списка - обычное решение для разметки.

01           <ul id="nav">

02               <li><a href="#">Главная</a></li>

03               <li><a class="hsubs" href="#">Меню 1</a>

04                   <ul class="subs">

05                       <li><a href="#">Подпункт 1</a></li>

06                       <li><a href="#">Подпункт 2</a></li>

07                       <li><a href="#">Подпункт 3</a></li>

08                       <li><a href="#">Подпункт 4</a></li>

09                       <li><a href="#">Подпункт 5</a></li>

10                   </ul>

11               </li>

12               <li><a class="hsubs" href="#">Меню 2</a>

13                   <ul class="subs">

14                       <li><a href="#">Подпункт 2-1</a></li>

15                       <li><a href="#">Подпункт 2-2</a></li>

16                       <li><a href="#">Подпункт 2-3</a></li>

17                       <li><a href="#">Подпункт 2-4</a></li>

18                       <li><a href="#">Подпункт 2-5</a></li>

19                       <li><a href="#">Подпункт 2-6</a></li>

20                       <li><a href="#">Подпункт 2-7</a></li>

21                       <li><a href="#">Подпункт 2-8</a></li>

22                   </ul>

23               </li>

24               <li><a class="hsubs" href="#">Меню 3</a>

25                   <ul class="subs">

26                       <li><a href="#">Подпункт 3-1</a></li>

27                       <li><a href="#">Подпункт 3-2</a></li>

28                       <li><a href="#">Подпункт 3-3</a></li>

29                       <li><a href="#">Подпункт 3-4</a></li>

30                       <li><a href="#">Подпункт 3-5</a></li>

31                   </ul>

32               </li>

33               <li><a href="#">Меню 4</a></li>

34               <li><a href="#">Меню 5</a></li>

35               <li><a href="#">Меню 6</a></li>

36               <li><a href="#">RUSELLER.COM</a></li>

37           </ul>

CSS

001         #nav,#nav ul {

002             list-style: none outside none;

003             margin: 0;

004             padding: 0;

005         }

006         #nav {

007             font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;

008             font-size: 13px;

009             height: 36px;

010             list-style: none outside none;

011             margin: 40px auto;

012             text-shadow: 0 -1px 3px #202020;

013             width: 980px;

014        

015             /* Скругленные углы */

016             -moz-border-radius:4px;

017             -webkit-border-radius:4px;

018             border-radius:4px;

019        

020             /* Тени */

021             -moz-box-shadow: 0px 3px 3px #cecece;

022             -webkit-box-shadow: 0px 3px 3px #cecece;

023             box-shadow: 0 3px 4px #8b8b8b;

024        

025             /* Градиент */

026             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));

027             background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);

028             background-color:#5f5f5f;

029         }

030         #nav ul {

031             left: -9999px;

032             position: absolute;

033             top: -9999px;

034             z-index: 2;

035         }

036         #nav li {

037             border-bottom: 1px solid #575757;

038             border-left: 1px solid #929292;

039             border-right: 1px solid #5d5d5d;

040             border-top: 1px solid #797979;

041             display: block;

042             float: left;

043             height: 34px;

044             position: relative;

045             width: 105px;

046         }

047         #nav li:first-child {

048             border-left: 0 none;

049             margin-left: 5px;

050         }

051         #nav li a {

052             color: #FFFFFF;

053             display: block;

054             line-height: 34px;

055             outline: medium none;

056             text-align: center;

057             text-decoration: none;

058        

059             /* Градиент */

060             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));

061             background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);

062             background-color:#5f5f5f;

063         }

064        

065         /* Кадры для анимации #animation1 */

066         @-webkit-keyframes animation1 {

067             0% {

068                 -webkit-transform: scale(1);

069             }

070             30% {

071                 -webkit-transform: scale(1.3);

072             }

073             100% {

074                 -webkit-transform: scale(1);

075             }

076         }

077         @-moz-keyframes animation1 {

078             0% {

079                 -moz-transform: scale(1);

080             }

081             30% {

082                 -moz-transform: scale(1.3);

083             }

084             100% {

085                 -moz-transform: scale(1);

086             }

087         }

088         #nav li > a:hover {

089             /* Анимации css3 */

090             -moz-animation-name: animation1;

091             -moz-animation-duration: 0.7s;

092             -moz-animation-timing-function: linear;

093             -moz-animation-iteration-count: infinite;

094             -moz-animation-direction: normal;

095             -moz-animation-delay: 0;

096             -moz-animation-play-state: running;

097             -moz-animation-fill-mode: forwards;

098        

099             -webkit-animation-name: animation1;

100             -webkit-animation-duration: 0.7s;

101             -webkit-animation-timing-function: linear;

102             -webkit-animation-iteration-count: infinite;

103             -webkit-animation-direction: normal;

104             -webkit-animation-delay: 0;

105             -webkit-animation-play-state: running;

106             -webkit-animation-fill-mode: forwards;

107         }

108         #nav li:hover > a {

109             z-index: 4;

110         }

111         #nav li:hover ul.subs {

112             left: 0;

113             top: 34px;

114             width: 150px;

115         }

116         #nav ul li {

117             background: none repeat scroll 0 0 #838383;

118             box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

119             opacity: 0;

120             width: 100%;

121        

122             /*-webkit-transition:all 0.3s ease-in-out;

123             -moz-transition:all 0.3s ease-in-out;

124             -o-transition:all 0.3s ease-in-out;

125             -ms-transition:all 0.3s ease-in-out;

126             transition:all 0.3s ease-in-out;*/

127         }

128        

129         /* Кадры для анимации #animation2 */

130         @-webkit-keyframes animation2 {

131             0% {

132                 margin-left:185px;

133             }

134             100% {

135                 margin-left:0px;

136                 opacity:1;

137             }

138         }

139         @-moz-keyframes animation2 {

140             0% {

141                 margin-left:185px;

142             }

143             100% {

144                 margin-left:0px;

145                 opacity:1;

146             }

147         }

148         #nav li:hover ul li {

149             /* Анимация css3 */

150             -moz-animation-name: animation2;

151             -moz-animation-duration: 0.3s;

152             -moz-animation-timing-function: linear;

153             -moz-animation-iteration-count: 1;

154             -moz-animation-direction: normal;

155             -moz-animation-delay: 0;

156             -moz-animation-play-state: running;

157             -moz-animation-fill-mode: forwards;

158        

159             -webkit-animation-name: animation2;

160             -webkit-animation-duration: 0.3s;

161             -webkit-animation-timing-function: linear;

162             -webkit-animation-iteration-count: 1;

163             -webkit-animation-direction: normal;

164             -webkit-animation-delay: 0;

165             -webkit-animation-play-state: running;

166             -webkit-animation-fill-mode: forwards;

167        

168             /*-webkit-transition:all 0.3s ease-in-out;

169             -moz-transition:all 0.3s ease-in-out;

170             -o-transition:all 0.3s ease-in-out;

171             -ms-transition:all 0.3s ease-in-out;

172             transition:all 0.3s ease-in-out;*/

173         }

174         /* Задержки анимации */

175         #nav li:hover ul li:nth-child(1) {

176             -moz-animation-delay: 0;

177             -webkit-animation-delay: 0;

178         }

179         #nav li:hover ul li:nth-child(2) {

180             -moz-animation-delay: 0.05s;

181             -webkit-animation-delay: 0.05s;

182         }

183         #nav li:hover ul li:nth-child(3) {

184             -moz-animation-delay: 0.1s;

185             -webkit-animation-delay: 0.1s;

186         }

187         #nav li:hover ul li:nth-child(4) {

188             -moz-animation-delay: 0.15s;

189             -webkit-animation-delay: 0.15s;

190         }

191         #nav li:hover ul li:nth-child(5) {

192             -moz-animation-delay: 0.2s;

193             -webkit-animation-delay: 0.2s;

194         }

195         #nav li:hover ul li:nth-child(6) {

196             -moz-animation-delay: 0.25s;

197             -webkit-animation-delay: 0.25s;

198         }

199         #nav li:hover ul li:nth-child(7) {

200             -moz-animation-delay: 0.3s;

201             -webkit-animation-delay: 0.3s;

202         }

203         #nav li:hover ul li:nth-child(8) {

204             -moz-animation-delay: 0.35s;

205             -webkit-animation-delay: 0.35s;

206         }

Всю работу выполняет CSS3.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/flying-css3-navigation-menu/
Перевел: Сергей Фастунов