Расширение меню изображения на Jquery

Сегодня рассмотрим интересный прием создания меню из изображения (точнее двух изображений).

Для нашей работы понадобиться подключить Jquery (минимально 1.5.1) и Jquery.easing (версии 1.3). Еще необходимо подготовить два изображения для самого меню: цветной вариант и черно-белый.

А вот собственно HTML-код:

<div class="ei_menu" id="ei_menu">
  <ul>
    <li style="width: 400px;">
      <a class="pos1" href="#"><span class="ei_preview" style="opacity: 0.1;"></span> <span class="ei_image" style="left: 0px; opacity: 1;"></span></a>
      <div class="ei_descr">
        <h2>Arora</h2>
        <h3>The Squad</h3>
        <p>The striking Issa Lish has found a fan in Steven Meisel, the photographer selected Lish not only for a solo cover of Vogue Italia, but also tapped the newcomer for his fresh face filled campaign for Coach.</p>
      </div>
    </li>
    <li style="width: 75px;">
      <a class="pos2" href="#"><span class="ei_preview" style="opacity: 0.1;"></span> <span class="ei_image" style="left: 75px; opacity: 0.2;"></span></a>
      <div class="ei_descr">
        <h2>Ertel</h2>
        <h3>Dominique Models</h3>
        <p>The delicate Ine looks like she stepped out of a fairytale and has been a hit with designers who favor the ethereal.</p>
        <p>Case in point - Valentino tapped her for their campaign two seasons in a row.</p>
      </div>
    </li>
    <li style="width: 75px;">
      <a class="pos3" href="#"><span class="ei_preview" style="opacity: 0.1;"></span> <span class="ei_image" style="left: 75px; opacity: 0.2;"></span></a>
      <div class="ei_descr">
        <h2>Jones</h2>
        <h3>Viva Barcelona</h3>
        <p>Back to back work with multiple Vogues, i-D and Givenchy made Imaan one of the most wanted new faces in recent memory.</p>
        <p>Her impeccable show season and work with this season with Calvin Klein solidify her red hot career.</p>
      </div>
    </li>
    <li style="width: 75px;">
      <a class="pos4" href="#"><span class="ei_preview" style="opacity: 0.1;"></span> <span class="ei_image" style="left: 75px; opacity: 0.2;"></span></a>
      <div class="ei_descr">
        <h2>Goddrie</h2>
        <h3>MODELWERK</h3>
        <p>An icy blonde with grace to spare, Hedvig has proven herself an essential component of any good runway.</p>
        <p>With her campaign and editorial presence building - including a star turn in Valentino’s latest - it’s her time to shine.</p>
      </div>
    </li>
    <li style="width: 75px;">
      <a class="pos5" href="#"><span class="ei_preview" style="opacity: 0.1;"></span> <span class="ei_image" style="left: 75px; opacity: 0.2;"></span></a>
      <div class="ei_descr">
        <h2>Hartzel</h2>
        <h3>Modellink</h3>
        <p>A classic blonde beauty of the highest order, with sinewy features and piercing green eyes.</p>
        <p>Photographers have fallen for Hana’s intense look and she’s become a regular presence in the pages of Vogue Paris, Numero and Vogue Russia.</p>
        <p>Add in campaign time for Akris and Ralph Lauren and you have the making of a blue-chip beauty.</p>
      </div>
    </li>
    <li style="width: 75px;">
      <a class="pos6" href="#"><span class="ei_preview" style="opacity: 0.1;"></span> <span class="ei_image" style="left: 75px; opacity: 0.2;"></span></a>
      <div class="ei_descr">
        <h2>Varlese</h2>
        <h3>Storm Management</h3>
        <p>Platinum blonde chameleon Harleth effortlessly eases into any look and as such has become a runaway favorite.</p>
        <p>With a lengthy show list and a editorial in only the very best magazines Harleth is quickly making a name for herself.</p>
      </div>
    </li>
  </ul>
</div>

Вот код CSS-стилей:

 body {
 font-family: sans-serif;
 font-size: 14px;
 background: #333;
 color: #fff;
}
.ei_menu {
 background: #111;
 width: 100%;
 overflow: hidden;
}
.ei_menu ul {
 height: 350px;
 margin-left: 50px;
 position: relative;
 display: block;
 width: 1300px;
}
.ei_menu ul li {
 float: left;
 width: 75px;
 height: 350px;
 position: relative;
 overflow: hidden;
 border-right: 2px solid #111;
}
.ei_preview {
 width: 75px;
 height: 350px;
 cursor: pointer;
 position: absolute;
 top: 0px;
 left: 0px;
 background: transparent url("//s18.postimg.org/w7tihu0nt/image.gif") no-repeat top left;
}
.ei_image {
 position: absolute;
 left: 75px;
 top: 0px;
 width: 75px;
 height: 350px;
 opacity: 0.2;
 background: transparent url("//s2.postimg.org/ashfdrq09/color.jpg") no-repeat top left;
}
.pos1 span {
 background-position: 0px 0px;
}
.pos2 span {
 background-position: -75px 0px;
}
.pos3 span {
 background-position: -152px 0px;
}
.pos4 span {
 background-position: -227px 0px;
}
.pos5 span {
 background-position: -302px 0px;
}
.pos6 span {
 background-position: -377px 0px;
}
.ei_descr {
 position: absolute;
 width: 278px;
 height: 310px;
 border-right: 7px solid #f0f0f0;
 padding: 20px;
 left: 75px;
 top: 0px;
 background: #fff;
}
.ei_descr h2 {
 font-size: 26px;
 color: #333;
 padding: 10px;
 text-shadow: 0px 0px 1px #fff;
}
.ei_descr h3 {
 color: #fff;
 text-shadow: 0px 0px 1px #000;
 font-style: normal;
 padding: 10px;
 background: #333;
}
.ei_descr p {
 color: #000;
 padding: 10px 5px 0px 5px;
 line-height: 18px;
 font-size: 11px;
 font-family: Arial;
 text-transform: uppercase;
}

Перед закрывающим </body> вставляем код:

$(function() {
  var $menu = $('#ei_menu > ul'),
    $menuItems = $menu.children('li'),
    $menuItemsImgWrapper = $menuItems.children('a'),
    $menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'),
    totalMenuItems = $menuItems.length,
    ExpandingMenu = (function() {
      /*
        @current
        set it to the index of the element you want to be opened by default,
        or -1 if you want the menu to be closed initially
       */
      var current = -1,
        /*
          @anim
          if we want the default opened item to animate initialy set this to true
         */
        anim = true,
        /*
          checks if the current value is valid -
          between 0 and the number of items
         */
        validCurrent = function() {
          return (current >= 0 && current < totalMenuItems);
        },
        init = function() {
          /* show default item if current is set to a valid index */
          if (validCurrent()) configureMenu();
          initEventsHandler();
        },
        configureMenu = function() {
          /* get the item for the current */
          var $item = $menuItems.eq(current);
          /* if anim is true slide out the item */
          if (anim) slideOutItem($item, true, 900, 'easeInQuint');
          else {
            /* if not just show it */
            $item.css({
              width: '400px'
            }).find('.ei_image').css({
              left: '0px',
              opacity: 1
            });
            /* decrease the opacity of the others */
            $menuItems.not($item).children('.ei_preview').css({
              opacity: 0.2
            });
          }
        },
        initEventsHandler = function() {
          /*
          when we click an item the following can happen:
          1) The item is already opened - close it!
          2) The item is closed - open it! (if another one is opened, close it!)
          */
          $menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
            var $this = $(this).parent(),
              idx = $this.index();
            if (current === idx) {
              slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
              current = -1;
            } else {
              if (validCurrent() && current !== idx) slideOutItem($menuItems.eq(current), false, 250, 'jswing');
              current = idx;
              slideOutItem($this, true, 250, 'jswing');
            }
            return false;
          });
        },
        /* if you want to trigger the action to open a specific item */
        openItem = function(idx) {
          $menuItemsImgWrapper.eq(idx).click();
        },
        /*
        opens or closes an item
        note that "mLeave" is just true when all the items close,
        in which case we want that all of them get opacity 1 again.
        "dir" tells us if we are opening or closing an item (true | false)
        */
        slideOutItem = function($item, dir, speed, easing, mLeave) {
          var $ei_image = $item.find('.ei_image'),
            itemParam = (dir) ? {
              width: '400px'
            } : {
              width: '75px'
            },
            imageParam = (dir) ? {
              left: '0px'
            } : {
              left: '75px'
            };
          /*
          if opening, we animate the opacity of all the elements to 0.1.
          this is to give focus on the opened item..
          */
          if (dir)
          /*
              alternative:
              $menuItemsPreview.not($menuItemsPreview.eq(current))
                       .stop()
                       .animate({opacity:0.1}, 500);
           */
            $menuItemsPreview.stop().animate({
            opacity: 0.1
          }, 1000);
          else if (mLeave) $menuItemsPreview.stop().animate({
            opacity: 1
          }, 1500);
          /* the <li> expands or collapses */
          $item.stop().animate(itemParam, speed, easing);
          /* the image (color) slides in or out */
          $ei_image.stop().animate(imageParam, speed, easing, function() {
            /*
            if opening, we animate the opacity to 1,
            otherwise we reset it.
            */
            if (dir) $ei_image.animate({
              opacity: 1
            }, 2000);
            else $ei_image.css('opacity', 0.2);
          });
        };
      return {
        init: init,
        openItem: openItem
      };
    })();
  /*
  call the init method of ExpandingMenu
  */
  ExpandingMenu.init();
  /*
  if later on you want to open / close a specific item you could do it like so:
  ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
  */
});

Посмотреть пример меню и скачать изображения можно ниже.