Хотите красиво оформить главную страницу сайта, а именно стилизировать меню на главной странице с помощью красивой смены изображений, тогда в данном уроке мы покажем как данное меню, можно сделать с помощью замечательного плагина jQuery. При этом добавлены различные эффекты переходов между пунктами меню. Данное меню будет отлично смотреться на сайте-портфолио. В демонстрации приведено несколько различных вариантов переходов и смены изображений. Вот так все выглядит в примерах..

 

Для начала нам необходимо подключить фреймворки, обратите внимание, что некоторые стили которые используется в примере приведены исключительно для демонстрации, так что при создании не загромождайте данное меню ненужными скриптами.

Теперь мы создаем HTML-структуру для нашего меню со сменными изображениями,  представляет собой следующий код:

Атрибут data-bg содержит путь к фоновому рисунку, который соответствует пункту меню.

Само меню запускается следующим кодом JavaScript:

Вот некоторые параметры которые можно использовать:

defaultBg

изображение, которое выводится, когда курсор мыши отсутствует в области меню

pos

если не установлено значение defaultBg, то pos указывает, какую панель надо показывать

width

ширина контейнера и изображений (они должны иметь одинаковый размер)

border

расстояние между панелями

height

высота контейнера и изображений

menuSpeed

скорость проскальзывания пунктов меню

mode

тип анимации (можно использовать def | fade | seqFade | horizontalSlide | seqHorizontalSlide | verticalSlide | seqVerticalSlide | verticalSlideAlt | seqVerticalSlideAlt)

Вот на этом и все, плагин легко редактировать под свои нужды. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.