Помощник
 |
|
|
|
|
Сообщение сайта
|
 Помогите создать менюшку |
basilio
|
Сообщение
#1
|
||
 Частый гость  Группа: User Сообщений: 79 Регистрация: 13.2.2012 Из: Латвия, Лиепая Поблагодарили: 0 раз Репутация:  0 
 |
|
||
 |
|
||
|
yury_mw
|
 5.11.2012, 18:09;
Ответить: yury_mw
Сообщение
#2
|
|
|
Завсегдатай Группа: User Сообщений: 648 Регистрация: 13.5.2009 Поблагодарили: 0 раз Репутация: 195
|
basilio,
JS для такой менюшки не требуется. Эффект анимации создан средствами CSS3. Конкретно свойством transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; которое меняет все свойства элемента в течении 0,25сек по кривой безье с упомянутыми в скобках параметрами и с нулевой задержкой. Код меню примерно такой: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"> .menu { margin-top: 48px; padding: 3px 0 92px; } .menu ul{ float: none; list-style: none; height: 50px; margin: 0; padding: 0; overflow: hidden; border: 1px solid #e5e5e5; } .menu ul li{ float: left; height: 50px; width: 20%; padding: 0; font: bold 14px/50px 'Open Sans', sans-serif; text-align: left; border-left: 1px solid #e5e5e5; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-webkit-box-sizing: border-box; -o-webkit-box-sizing: border-box; background: url(wpf_nav.png) no-repeat } .menu ul li:first-child { border: none } .menu ul li:hover { background-color: #5faae3; transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -moz-transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -webkit-transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -ms-transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } .menu ul li a { display: block; margin: 0; padding: 0 0 0 66px; border: none; color: #222; } .menu ul li a:hover { color: #fff !important } .menu li#gavern { background-position: 22px 11px; } .menu li#theme { background-position: -223px 15px; } .menu li#widget { background-position: -495px 14px; } .menu li#short { background-position: -781px 17px; } .menu li#support { background-position: -1083px 14px; } .menu li#gavern:hover { background-position: 22px -125px } .menu li#theme:hover { background-position: -223px -121px; } .menu li#widget:hover { background-position: -495px -128px; } .menu li#short:hover { background-position: -781px -119px; } .menu li#support:hover { background-position: -1083px -122px; } </style> </head> <body> <div class="menu"> <ul> <li id="gavern"><a href="#">Gavern WP</a></li> <li id="theme"><a href="#">Theme Options</a></li> <li id="widget"><a href="#">Widget Rules</a></li> <li id="short"><a href="#">Shortcodes</a></li> <li id="support"><a href="#">Support</a></li> </ul> </div> </body> </html> Еще на страничке использована картинка wpf_nav.png (4Кб), из которой методом спрайтов вытягиваются иконки для пунктов меню:
Эскизы прикрепленных изображений
|
|
|
|
|
|
|
basilio
|
Сообщение
#3
|
|
|
Частый гость Группа: User Сообщений: 79 Регистрация: 13.2.2012 Из: Латвия, Лиепая Поблагодарили: 0 раз Репутация: 0
|
Большое Вам спасибо!
|
|
|
|
|
|
|
|
Похожие темы
| Тема | Ответов | Автор | Просмотров | Последний ответ | |
|---|---|---|---|---|---|
 |
Создать видеоканал лучше в ютуб или телеграм? | 20 | uahomka | 3574 | 20.4.2024, 20:56 автор: Vmir |
|
Как создать бота Телеграм с приемом оплат? | 0 | rownong27 | 454 | 4.3.2024, 0:51 автор: rownong27 |
|
Помогите вспомнить рекламного бота Телеграм для обмена рекламой | 0 | Mixatraider | 732 | 21.2.2024, 23:42 автор: Mixatraider |
|
Хочу создать сайт кино. | 12 | jreset26 | 1902 | 30.1.2024, 0:12 автор: Liudmila |
|
Помогите рещить проблему с монитором. Почему низкое разрешение при подключении монитора через displayport? |
0 | Levels | 1702 | 11.12.2020, 0:48 автор: Levels |
|
Текстовая версия | Сейчас: 25.4.2024, 14:09 |
