Простое горизонтальное jQuery аккордеон меню из картинок

Отличное и очень простое аккордеон меню из изображений, без плагинов и дополнительных модулей, только CSS и очень скромный jQuery скрипт.
  Раздвижное меню эффектно смотрится на сайтах торговых компаний и интернет-магазинов где товары и услуги представлены по категориям, хотя вполне может вписаться в дизайн фотоблога или сайта о кулинарии, например.
  Ссылки в меню сделаны в виде части изображений, а при наведении картинка открывается полностью и появляется подсказка, описание или текст ссылки с названием раздела. Слайд-меню на сайте смотрится очень красиво.
 

27.02.2013 Обновлены:
- CSS - добавил некоторые свойства, для универсальности:
- jQuery скрипт-обработчик;
- архив исходных кодов.
В ДЕМО показана работа новой версии.

DEMO
  Если понравилось смотрим составляющие.
HTML код меню:

<div class="ImageMenu">
  <ul>
    <li id="one"><a href="#"><span>Monday</span></a></li>
    <li id="two"><a href="#"><span>Friday</span></a></li>
    <li id="three"><a href="#"><span>Saturday</span></a></li>
    <li id="fore"><a href="#"><span>Sunday</span></a></li>
    <li id="five"><a href="#"><span>Wednesday</span></a></li>
    <li id="six"><a href="#"><span>Monday</span></a></li>
    <li id="seven"><a href="#"><span>Friday</span></a></li>
    <li id="eight"><a href="#"><span>Saturday</span></a></li>
    <li id="nine"><a href="#"><span>Sunday</span></a></li>
    <li id="ten"><a href="#"><span>Wednesday</span></a></li>
  </ul>
</div>

Проще не бывает.

  CSS:

.ImageMenu,
.ImageMenu ul {
  display: block;
  position:relative;
  list-style: none;
  background:#fff;
  margin: 0;
  padding: 0;
  height:160px; /*высота всего блока; ставится относительно высоты изображений*/
  width:auto;
}
.ImageMenu ul li {
  display: block;
  position:relative;
  float: left;
  width: 50px; /*указывает на сколько будет открыто изображение изначально*/
  overflow: hidden;
}
.ImageMenu ul li a {
  display:block;
  text-decoration: none;
  background:#fff;
  border-right: 1px solid #fff;
  border-left: 2px solid #fff;
  cursor:pointer;
  height: 156px; /*соответствует высоте изображения*/
  padding: 0 !important;
  width: 100%;
}
.ImageMenu ul li span {
  display: none; /*обязательно*/
  position: absolute; /*обязательно*/
  top: 100px;
  left: 2px;
  background: linear-gradient(to right, rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 100%);
  color: #fff;
  font: normal bold 14px Arial;
  text-align: left;
  white-space: nowrap;
  padding: 5px 15px;
  width: 100%;
}
.ImageMenu ul li#one a {
  background: url(".../img/your_image.jpg") no-repeat;
}
.ImageMenu ul li#two a {
  background: url(".../img/your_image.jpg") no-repeat;
}
.ImageMenu ul li#three a {
  background: url(".../img/your_image.jpg") no-repeat;
}
.ImageMenu ul li#fore a {
  background: url(".../img/your_image.jpg") no-repeat;
}
.ImageMenu ul li#five a {
  background: url(".../img/your_image.jpg") no-repeat;
}
.ImageMenu ul li#six a {
  background: url(".../img/your_image.jpg") no-repeat;
}
.ImageMenu ul li#seven a {
  background: url(".../img/your_image.jpg") no-repeat;
}
.ImageMenu ul li#eight a {
  background: url(".../img/your_image.jpg") no-repeat;
}
.ImageMenu ul li#nine a {
  background: url(".../img/your_image.jpg") no-repeat;
}
.ImageMenu ul li#ten a {
  background: url(".../img/your_image.jpg") no-repeat;
}

 В CSS для блоков ссылок: .ImageMenu ul li#one a и т.д. - добавлено только одно свойство - background - фон. Фоновая картинка и будет изображением блока ссылки. Идентификаторы указывают к какой ссылке будет применено данное изображение, их может быть сколько угодно.

 И самое главное - jQuery для работы данного меню. Но сначала проверяем подключен ли к сайту jQuery, если нет, то подключаем.
 И jQuery скрипт-обработчик:

$(function() {
  $('.ImageMenu ul li').hover(
    function () {
       $(this).stop().animate({width : "250"}, 300).find('a>span').fadeIn(300);},
    function () {
       $(this).stop().animate({width : "50"}, 300).find('a>span').fadeOut(300);});
});

 В нем можно производить основные настройки.
Первая значения в функциях - анимации открытия блоков:
- 250 - значение указывает на сколько в пикселях будет открываться секция меню при наведении. Лучше установить чуть меньше чем ширина используемого изображения;
- 300 - значение обозначает скорость скольжения в миллисекундах;
Далее идут функции для плавного появления и скрытия названия ссылки, значения - это скорость появления в миллисекундах.

При установке данного меню в Blogger-блог ознакомьтесь также с этой статьей Превратности шаблонов или Почему не выпадает меню в Blogger?

Вот и все, просто и красиво.

СКАЧАТЬ ZIP

  Всем удачи, заходите есчЁ :)
©http://magentawave.com