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



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

#1

Поделиться сообщением #1



basilio

basilio
  • Неактивные
  • 79 сообщений
  • Репутация: 0
0

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

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

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

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

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Пошаговая инструкция создания сайта с помощью CMS Joomla!
  2. Создание меню для Html, которое будет обновляться на всех страницах сайта...
  3. Помогите сделать меню на сайт.
  4. Как сделать меню без перезагрузки контента?
  5. Создание меню Wordpress (проблема)

#2

Поделиться сообщением #2



yury

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

Отправлено 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

Поделиться сообщением #3



basilio

basilio
    Topic Starter
  • Неактивные
  • 79 сообщений
  • Репутация: 0

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

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


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