Блог
Главная » Другие » Раздвижное меню с слайдом фоновых изображений на jQuery для uCoz
19:48


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

На все примеры, демо приведено ниже!

Установка:

Для начала для ВСЕХ вариантов подключаем стили :
Code

  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="css/sbimenu.css" />


Далее также для всех примеров устанавливаем скрипт в любой глобальный блок:
Code

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="js/jquery.bgImageMenu.js"></script>
  <script type="text/javascript">
  $(function() {
  $('#sbi_container').bgImageMenu({
  defaultBg : 'images/default.jpg',
  border : 1,
  type : {
  mode : 'seqHorizontalSlide',
  speed : 150,
  easing : 'jswing',
  seqfactor : 100
  }
  });
  });
  </script>


Пример №1

Код нашего меню:
Code

<div id="sbi_container" class="sbi_container">
  <div class="sbi_panel" data-bg="images/1.jpg">
  <a href="#" class="sbi_label">About</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/2.jpg">
  <a href="#" class="sbi_label">Menu</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/3.jpg">
  <a href="#" class="sbi_label">Location</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  </div>


Пример №2

Code

<div id="sbi_container" class="sbi_container">
  <div class="sbi_panel" data-bg="images/5.jpg">
  <a href="#" class="sbi_label">About</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/2.jpg">
  <a href="#" class="sbi_label">Menu</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/3.jpg">
  <a href="#" class="sbi_label">Location</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  </div>


Пример №3
Code

<div id="sbi_container" class="sbi_container">
  <div class="sbi_panel" data-bg="images/4.jpg">
  <a href="#" class="sbi_label">About</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/2.jpg">
  <a href="#" class="sbi_label">Menu</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/3.jpg">
  <a href="#" class="sbi_label">Location</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  </div>


Пример №4
Code

<div id="sbi_container" class="sbi_container">
  <div class="sbi_panel" data-bg="images/8.jpg">
  <a href="#" class="sbi_label">About</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/7.jpg">
  <a href="#" class="sbi_label">Menu</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/6.jpg">
  <a href="#" class="sbi_label">Location</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  </div>


Пример №5
Code

<div id="sbi_container" class="sbi_container">
  <div class="sbi_panel" data-bg="images/8.jpg">
  <a href="#" class="sbi_label">About</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/7.jpg">
  <a href="#" class="sbi_label">Menu</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/6.jpg">
  <a href="#" class="sbi_label">Location</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  </div>


Пример №6
Code

<div id="sbi_container" class="sbi_container">
  <div class="sbi_panel" data-bg="images/1.jpg">
  <a href="#" class="sbi_label">About</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/2.jpg">
  <a href="#" class="sbi_label">Menu</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/3.jpg">
  <a href="#" class="sbi_label">Location</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  </div>


Пример №7
Code

<div id="sbi_container" class="sbi_container">
  <div class="sbi_panel" data-bg="images/1.jpg">
  <a href="#" class="sbi_label">About</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/2.jpg">
  <a href="#" class="sbi_label">Menu</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/3.jpg">
  <a href="#" class="sbi_label">Location</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  </div>


Пример №8
Code

<div id="sbi_container" class="sbi_container">
  <div class="sbi_panel" data-bg="images/4.jpg">
  <a href="#" class="sbi_label">About</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/5.jpg">
  <a href="#" class="sbi_label">Menu</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  <div class="sbi_panel" data-bg="images/8.jpg">
  <a href="#" class="sbi_label">Location</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>
  </div>
  </div>


Пример №9
Code

<div id="sbi_container" class="sbi_container">
  <div class="sbi_panel" data-bg="images/3.jpg">
  <a href="#" class="sbi_label">Veggie</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/4.jpg">
  <a href="#" class="sbi_label">Pasta</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/5.jpg">
  <a href="#" class="sbi_label">Seafood</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/6.jpg">
  <a href="#" class="sbi_label">Salads</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  </div>


Пример №10
Code

<div id="sbi_container" class="sbi_container">
  <div class="sbi_panel" data-bg="images/1.jpg">
  <a href="#" class="sbi_label">About</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Our Story</a></li>
  <li><a href="#">Family</a></li>
  <li><a href="#">Mission</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/2.jpg">
  <a href="#" class="sbi_label">Menu</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Vegetarian</a></li>
  <li><a href="#">Seafood</a></li>
  <li><a href="#">Salads</a></li>
  <li><a href="#">Summer Special</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/3.jpg">
  <a href="#" class="sbi_label">Location</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Restaurant</a></li>
  <li><a href="#">Country</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/4.jpg">
  <a href="#" class="sbi_label">Chefs</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Mauro Sousa</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/5.jpg">
  <a href="#" class="sbi_label">Team</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/6.jpg">
  <a href="#" class="sbi_label">Contact</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/7.jpg">
  <a href="#" class="sbi_label">Find us</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/8.jpg">
  <a href="#" class="sbi_label">Special</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  </div>


Пример №11
Code

<div id="sbi_container" class="sbi_container">
  <div class="sbi_panel" data-bg="images/1.jpg">
  <a href="#" class="sbi_label">Item 1</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/2.jpg">
  <a href="#" class="sbi_label">Item 2</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  <div class="sbi_panel" data-bg="images/3.jpg">
  <a href="#" class="sbi_label">Item 3</a>
  <div class="sbi_content">
  <ul>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  <li><a href="#">Subitem</a></li>
  </ul>
  </div>  
  </div>
  </div>


Из прикрепленного архива все файлы заливаем в соответствующие папки css, js, images

Спасибо за внимание!
Категория: Другие

Вы не авторизованы, по-этому вы не можете скачивать файлы к материалу, просматривать демо, читать и оставлять комментарии!

Knu.com
  • Опросик
    • Зайдете ли вы к нам еще?