Интересное меню на CSS и jQuery


Интересное меню на CSS и jQuery

1262
12.4 из 10
Проголосовало: 5






Выпадающее меню с плавным эффектом появления подпунктов и фоновым изображением для них.

Установка:

1. в head

Code
<link rel="stylesheet" href="http://webo4ka.ru/Ucoz5/style_interecnoe_menu_CSS_jQuery.css" type="text/css" media="screen"/>  
<script type="text/javascript" src="http://webo4ka.ru/Ucoz5/jquery.easing_interecnoe_menu_CSS_jQuery.js"></script>

  <script>
  $(function() {
  $('#navigation > div').hover(
  function () {
  var $this = $(this);
  //$this.find('.images').fadeIn();
   
  $this.find('a.menu').removeClass('menu').addClass('hovered');
   
  $this.find('.images').stop().animate({
  'width' :'230px',
  'height' :'390px',
  'opacity' :'1.0'
  },400,'easeOutBack',function(){
   
  $(this).parent().find('div').fadeIn('fast');
  });
  },
  function () {
  var $this = $(this);
   
  $this.find('div').fadeOut(500);
  //$this.find('.images').hide();
  $this.find('a.hovered').removeClass('hovered').addClass('menu');
   
  $this.find('.images').stop().animate({
  'width' :'100px',
  'height' :'0px',
  'top' :'0px',
  'left' :'0px',
  'opacity' :'0.9'
  },600,'easeOutBack');  
  }
  );
  });
  </script>


2. куда вам надо:

Code
<div class="total_images" id="navigation">
   
  <div class="eachs" id="link1">  
   
  <a href="#" class="menu" style=" width:94px;">Скрипты</a>
   
  <img src="http://webo4ka.ru/Ucoz5/bg_interecnoe_menu_CSS_jQuery.png" alt="" width="140" height="140" class="images"/>  
   
  <div>  
  <ul>
  <li><a href="#">PHP</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">JQuery</a></li>
  <li><a href="#">AJAX</a></li>
  <li><a href="#">Mootools</a></li>  
  <li><a href="#">javascript</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">MYSQL</a></li>
  <li><a href="#">JSON</a></li>
  </ul>
  </div>  
  </div>  
   
  <div class="eachs" id="link4">  
   
  <a href="#" class="menu" style=" width:150px;">Ещё скрипты</a>
   
  <img src="http://webo4ka.ru/Ucoz5/bg_interecnoe_menu_CSS_jQuery.png" alt="" width="140" height="140" class="images"/>  
   
  <div>
  <ul>
  <li><a href="#">PHP</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">JQuery</a></li>
  <li><a href="#">AJAX</a></li>
  <li><a href="#">Mootools</a></li>  
  <li><a href="#">javascript</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">MYSQL</a></li>
  <li><a href="#">JSON</a></li>
  </ul>
  </div>  
  </div>  
   
   
  <div class="eachs" id="link2">  
   
  <a href="#" class="menu" style=" width:114px;">Скриптики</a>
   
  <img src="http://webo4ka.ru/Ucoz5/bg_interecnoe_menu_CSS_jQuery.png" alt="" width="160" height="199" class="images"/>  
   
  <div>  
  <ul>
  <li><a href="#">PHP</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">JQuery</a></li>
  <li><a href="#">AJAX</a></li>
  <li><a href="#">Mootools</a></li>  
  <li><a href="#">javascript</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">MYSQL</a></li>
  <li><a href="#">JSON</a></li>
  </ul>
  </div>  
  </div>  
   
   
  <div class="eachs" id="link3">  
   
  <a href="#" class="menu" style=" width:100px;">Скрипты</a>
   
  <img src="http://webo4ka.ru/Ucoz5/bg_interecnoe_menu_CSS_jQuery.png" alt="" width="160" height="199" class="images"/>  
   
  <div>  
  <ul>
  <li><a href="#">PHP</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">JQuery</a></li>
  <li><a href="#">AJAX</a></li>
  <li><a href="#">Mootools</a></li>  
  <li><a href="#">javascript</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">MYSQL</a></li>
  <li><a href="#">JSON</a></li>
  </ul>
  </div>  
  </div>  
   
  <div class="eachs" id="link5">  
   
  <a href="#" class="menu" style=" width:120px;">PCVECTOR</a>
   
  <img src="http://webo4ka.ru/Ucoz5/bg_interecnoe_menu_CSS_jQuery.png" alt="" width="160" height="199" class="images"/>  
   
  <div>  
  <ul>
  <li><a href="#">PHP</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">JQuery</a></li>
  <li><a href="#">AJAX</a></li>
  <li><a href="#">Mootools</a></li>  
  <li><a href="#">javascript</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">MYSQL</a></li>
  <li><a href="#">JSON</a></li>
  </ul>
  </div>  
  </div>  
   
   
  <br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />
   
  </div>


Всё!
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 2

AndreyKlipikov
0
AndreyKlipikov написал: Написано 23 Января 2012 в 15:42
Комментарий №2
Накрутка)

k43
0
k43 написал: Написано 23 Января 2012 в 12:23
Комментарий №1
чё за хня? оценка 10 из 5 wacko

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: