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

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

9 комментариев:

  1. Наталья20.04.13, 22:06

    очень красивое меню. В joomla 1.5 все работает. Как подключить к joomla 2.5 ? не получаеться у меня, а очень надо...

    ОтветитьУдалить
    Ответы
    1. С этим вопросом лучше обратится на оф. форуме. На Жумле не тестировал и даже не могу сказать в чем может быть проблема.

      Удалить
    2. Наталья28.04.13, 18:35

      Уже разобралась, все подключаеться. Хорошее меню, спасибо)

      Удалить
  2. Анонимный27.05.13, 2:05

    так как же к joomla 2.5 прикрутить?

    ОтветитьУдалить
    Ответы
    1. Жумлой не пользуюсь, все вопросы по ней лучше задавать на оф. форуме.

      Если найдете ответ, можете запостить для будущих соискателей.

      Удалить
  3. Виталя18.08.13, 20:40

    Преогромнейшее спасибо!!!
    За столь красивый и редкий аккордеончик.

    ОтветитьУдалить
  4. Отличный аккордеон. Но можете помочь как изменить ширину дочерних картинок при наведении? Заранее спасибо...

    ОтветитьУдалить
    Ответы
    1. Если правильно понял, вам нужно сделать шире блок с надписью. Его ширина изменяется в CSS, селектор .ImageMenu ul li span, добавьте к нему свойство height с необходимым значением высоты.
      Например
      .ImageMenu ul li span {
      ....
      height: 20px;
      }

      Удалить
  5. Анонимный10.08.14, 18:11

    на юкоз не работает(((

    ОтветитьУдалить

Следующее Предыдущее

BestProject