Перейти к содержимому

Реферальная программа Мегаплана

Выбрать шаблон и создать сайт

Помогите создать менюшку

#1 basilio

basilio
  • Пользователь
  • 79 сообщений
  • Репутация: 0
0

Отправлено 04 Ноябрь 2012 - 23:31

Форумчане, помогите пожалуйста сделать такое же (или похожее меню), как на вот этом сайте

P.S. Которое находится между заголовками "Wordpress Themes" и "Responsive Design"

с JS у меня не лады, да и верстальщик я ещё тот. Буду очень признателен, если вы объясните, как такое меню можно реализовать. :)

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 05 Ноябрь 2012 - 17:09

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Кб), из которой методом спрайтов вытягиваются иконки для пунктов меню:

Прикрепленные изображения

  • wpf_nav.png

  • 1

#3 basilio

basilio
    Topic Starter
  • Пользователь
  • 79 сообщений
  • Репутация: 0

Отправлено 05 Ноябрь 2012 - 22:55

Большое Вам спасибо!
  • 0


Оформление форума – IPBSkins.ru